JavaScript Event Exploration

1 Event Flow:

The DOM supports both event models: Capture-type events (non-IE, from document to concrete) and bubbling events (IE, from specific elements to document).

2 Event handlers

HTML event handler, the simple point is directly above the HTML element to bind an onclick similar event, the disadvantage is obviously too strong coupling

<input type= "button" value= "buttons" id= "btn" onclick= "Showmes ()" >

Dom0-level event handlers, similar to Document.getbyid (). Onclick=function () {} This is similar

3 DOM2 Level Event handlers

DOM2-level events define two methods ( non IE): Actions for handling the specified and deleted event handlers: AddEventListener () and RemoveEventListener (). They all receive three parameters: the name of the event to be processed, the function that is the event handler, and a Boolean value.

IE Event handlers
Attachevent () Add Event
DetachEvent () Delete event

4 Event Object
Events Object Event
1. Event objects in the DOM
(1), type: Get event Type
(2), Target: Event target
(3), Stoppropagation () block event bubbling
(4), Preventdefault () The default behavior for blocking events
2, the event object in IE
(1), type: Get event Type
(2), srcelement: Event target
(3), cancelbubble=true block event bubbling
(4), returnvalue=false the default behavior of blocking events

The following is a specific example for JS encapsulation and understanding event objects

Index.html

Event.js
   
var eventutil={//Add handle Addhandler:function (Element,type,handler) {if (Element.addeventlisten               ER) {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.removeeventlis               Tener) {Element.removeeventlistener (type,handler,false);               }else if (element.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.target | | event.srCElement;            }, Preventdefault:function (event) {if (Event.preventdefault) {event.preventdefault ();            }else{Event.returnvalue=false; }}, Stoppropagation:function (event) {if (event.stoppropagation) {Event.stoppropagat           Ion ();           }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 whole 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);  });






JavaScript Event Exploration