The difference between the event of the Internet and the IE event and the blocking of the default event

When the browser resolves the event, there are two types of triggers, one called bubbling (bubbling) and the other is called capturing (capture). The effect of bubbling is that when an event of a DOM element, such as the Click event, is triggered by F, the Click event of its parent element is fire (triggered) and passed to the top-level BODY element. Instead, when the click event of an element is triggered, it starts at the top level of the BODY element click event and is passed to the element that is actually triggered.

The most common way to bind an event to a DOM element is to obj.onclick=handler it. We temporarily call this way of events added to the traditional (traditional way) bar, IE has its own IE event module, and Firefox and other browsers to follow the mode of the event module, see below what the pros and cons of each of these three-

1. Traditional Module (traditional method)

The traditional way of the event model is to bind the event handler directly on the DOM element, for example-

Window.onload=function () {...}

Obj.onmouseover=function (e) {...}

Obj.onclick=function () {...}

First of all, this is a common way to run successfully in other browsers, IE or Firefox. This is its biggest advantage, and in the event handler function inside of the this variable without exception only want to be bound DOM elements, which makes JS programmers can greatly use this keyword to do a lot of things.

As for its shortcomings, it is also obvious that the traditional way is to support only bubbling, not capturing, and that only one event handler can be bound at a time. Multiple handler bindings cannot be implemented on DOM elements. Finally, the event parameter in the function parameter is valid only for non IE browsers (because IE has a specially crafted window.event).

2. The firefox.e.g Event Module

browsers, such as Firefox, are determined to follow the standards of the consortium to develop a browser event model, using AddEventListener and RemoveEventListener two functions, examples-

Window.addeventlistener (' Load ', function () {...},false);

Document.body.addEventListener (' KeyPress ', function{...},false);

Obj.addeventlistener (' mouseover ', mv,true);

function MV () {...}

AddEventListener with three parameters, the first argument is the event type, which is the name of the event we are familiar with. Remove the previous ' on ', the second parameter is a handler, you can give the function literal or function name, and the third argument is a Boolean value, Indicates whether the event supports capturing.

The benefit of the event model for the bubbling is that both the capturing and the support, and can bind multiple event handlers on a DOM element, and they do not conflict. and inside the processing function, the This keyword can still use a DOM element that only wants to be bound. In addition, the first position of the function argument list, whether or not it is displayed, is always a reference to the event object.

As for its shortcomings, it is only in the market share of the largest IE browser can not use this point.

3, IE Event Module

IE's own event model is similar to that of the attachevent, but it is mostly done through the two functions of the detachevent. Example

Window.attachevent (' onload ', function () {...});

Document.body.attachEvent (' onkeypress ', mykeyhandler);

You can see that the difference between it and the consortium is that there is no third argument, and that the first parameter that represents the event type must also add ' on '. The advantage of this approach is that you can bind multiple event handlers on the same DOM element.

As for its shortcomings, why is it rarely seen in actual development today? First of all, ie browsers support only bubbling not support capturing, and in the event-handling function inside the This keyword is not available, because this will always only want the Window object this global object. To get the event object you have to go through the window.event way, and finally, in other browsers, it's obviously not working.

organization Default events:

1, when we need to block the browser a DOM element of the default behavior of the E.preventdefault () down in the Internet, and in IE, through the window.event.returnvalue=false to achieve.

2, when we want to prevent the event bubbling, call E.stoppropagation () in the standard of the consortium, and in IE by setting window.event.cancelbubble=true to implement.