Javascript event Exploration

Javascript event Exploration

1 event stream:

DOM also supports two event models: capture-type events (non-IE, from document to specific elements) and bubble-type events (IE, from specific elements to document ).

2 event handler

The html event handler is simply bound to an onclick event on the html element. The disadvantage is that the coupling is too strong.

Dom0-level event handler, similar to document. getById (). onclick = function () {}

3. DOM2-level event handler

DOM2-level events define two methods (non-IE): addEventListener () and removeEventListener () for processing specified and deleted event handlers (). They all receive three parameters: the name of the event to be processed, the function used as the event handler, and a Boolean value.

IE event handler
AttachEvent () add events
DetachEvent () Deletion event

4. event object
Event object
1. Event objects in the DOM
(1), type: Get the Event type
(2) target: event target
(3) stopPropagation () prevents event bubbles
(4) preventDefault () blocks the default action of an event
2. Event objects in IE
(1), type: Get the Event type
(2) srcElement: event Target
(3) cancelBubble = true to prevent event bubbles
(4), returnValue = false to prevent the default action of the event

The following uses a specific example to encapsulate js and understand event objects.

Index.html

    Event stream   
 <Script src = "js/event. js"> </script> <script src = "js/script. js"> </script>                                 Jump 

Event. js

Var eventUtil = {// Add handle addHandler: function (element, type, handler) {if (element. addEventListener) {element. addEventListener (type, handler, false);} else if (element. attachEvent) {element. attachEvent ('on' + type, handler);} else {element ['on' + type] = handler ;}}, // Delete handle removeHandler: function (element, type, handler) {if (element. removeEventListener) {element. removeEventListener (type, handler, false);} else if (el Ement. detachEvent) {element. detachEvent ('on' + type, handler);} else {element ['on' + type] = null ;}, getEvent: function (event) {return event? Event: window. event;}, getType: function (event) {return event. type ;}, getElement: function (event) {return event.tar get | event. srcElement;}, preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}, stopPropagation: function (event) {if (event. stopPropagation) {event. stopPropagation ();} else {event. cancelBubble = true ;}}}

Script. js

Window. onload = function () {var go = document. getElementById ('Go'), box = document. getElementById ('box'); eventUtil. addHandler (box, 'click', function () {alert ('I am the entire parent box') ;}); eventUtil. addHandler (go, 'click', function (e) {// e = eventUtil. getEvent (e); e = e | window. event; alert (eventUtil. getElement (e ). nodeName); eventUtil. preventDefault (e); eventUtil. stopPropagation (e );});}