jquery notes event_jquery

Browser model:
1. DOM level 0 model
Event handlers are declared by assigning a reference to a function instance to an attribute of a DOM element. This is also our most common, such as onclick, etc.

Copy code The code is as follows:

< img onclick="alert('hello');" src="1.jpg" />
$("img").onmouseover = function(){alert("hello");}

(1), the more interesting ones are Event instances and event bubbling
Event instances are most browsers that pass the class instance of the event as the first parameter to the function, but in IE, it The event is assigned to the window attribute; when obtaining the target element, the w3c standard browser has target, and IE takes the srcElement attribute. For compatible events, write as follows:

Copy code The code is as follows:

$("img").onclick=function(event){
if(!event) event = window.event;
var target = event.target?event.target:event.srcElement;
}

(2), event bubbling
The target element has a chance to obtain the event, and the event model insists on the target element's Parent element to see if a handler has been established for the same type. If so, the handler is also called until the top of the DOM tree
For w3c standard browsers, you can use event's stopPropagation(), for ie, you can use event's cancelBubble to cancel Bubbling

2. Level 2 model
solves the defect that only one handler can be registered for each attribute storage event in the level 0 model.

Copy code The code is as follows:

$("img").addEventListener('click' ,function1,false).addEventListener('click',function2,false);

In the 2-level model, the event is triggered and first propagates downward from the DOM tree to the target element (capture phase) , and then bubble up. When the third parameter of addEventListener above is false, a bubbling handler is created, and when it is true, a capture handler is created.
This is the first time I have heard of the capture type here, because IE6 and 7 do not support the second level model, so it is no wonder, but some IE browsers support a similar bubble type with attachEvent(eventName, handler).

Then jquery’s bind solves these problems. . .
Refer to "jquery in practice"