Event Model
Two event models in JavaScript: DOM0, DOM2.
DOM0 level event model
DOM0 level is an early event model event model, all browsers support.
Event registration: in front of the event types add on, such as: onclick, onmouseover ......
Lift Event: dom.onclick = null;
Each DOM object can only register a same type of event, register multiple coverage occurs, only the last event executed function.
DOM2 event model level
DOM2 event model grade is a relatively new event model, IE8 and below are not supported.
Registration issue:
addEventListener (type, fn, useCapture) event monitoring
Parameters: type ---- event type, for example: click
fn ---- event handler
useCapture Boolean value ---- true or false
(True representation event capture, false representation event bubbling)
In order to be compatible browsers, and the third parameter is usually set to false
Lift Event: removeEventListener (type, fn, useCapture)
Each DOM objects can register multiple same type of event coverage will not happen, it will be followed by the execution of each event function.
Because IE only supports event bubbling, event capture is not supported, so it does not support addEventListener () method
IE provides another function attachEvent (type, fn)
Parameters: type ---- event type, for example: onclick
fn ---- event handler
No third parameter
Lift Event: detachEvent (type, fn)
Package event listener function (compatible)
Event stream
Event flow: the flow of events, execution sequence of events.
When the child elements, and parent elements are defined in the same event, such as we define the onclick event,
When you click a child element, onclick event of the parent element will be triggered.
JS said in the mechanism of this continuous occurrence or event bubbling event capture.
IE: incident from the inside out, from the most accurate trigger event starts the object (target), then the least accurate object (document) is triggered, i.e., event bubbling
Netscape: incident from outside to inside, triggering event starts from the most inaccurate object (document), then the most accurate target (target) is triggered, that event capture
W3C both ongoing and, in any W3C event model, first enter the event capture stage, and then into the bubbling phase.
.png "Attachment")
Whether event bubbling, or event capture feature has spread!
Stop event propagation
event.stopPropagation() // W3C
event.cancelBubble = true // IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
Event delegates
What is the event: popular talk onclick, onmouseover, onmouseout and so is the event.
What is the commission: that this incident could have been applied to some of the elements, but you have other elements added up to complete this event.
Principle: use of event propagation characteristics.
Specifically, the goal of the event is the event delegate itself does not handle the event, but to delegate event handling to its parent element, or even to complete the document.
advantage:
1. improve the performance and efficiency
2. Reduce the event registration, saving memory footprint
3. The next element without registering event again
......
Mouse wheel events
In the non-Firefox browsers
Mouse wheel events: onmousewheel
Example:
box.onmousewheel=function (ev){
var event=ev||window.event;
alert(event.wheelDelta);
};
In the Firefox browser
Mouse wheel events: DOMMouseScroll
Example:
box.addEventListener('DOMMouseScroll',function (ev){
alert(ev.detail);
},false)