JavaScript-Work notes (event bindings)

Background:

Currently, only native JavaScript is used for the project. For JavaScript event bindings, you should know the syntax:

1, use the property call method in the label: <div onclick= "AAAA ();" ></div>

2. Bind the data to the tag object in javascript:

<div id= "Test" ></div>

var item = document.getElementById ("test");

Item.onclick = function () {};

Mode One (cannot bind multiple events, if there are more than one, then overwrite the front)

No compatibility issues

Item.attachevent ("onclick", function () {});

Additional events, do not overwrite, execute sequentially when triggered, ie specific

Item.addeventlistener ();

Ditto, Ie9,firefox,safari,chrome and opera all support this.

In use, it is often used to bind events, in order to take into account the compatibility of some browsers, in the event of processing, you have to do more processing.

Later on the Internet to see a netizen for the event binding package, feel very good, so learn from, hey.

JavaScript Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

functionaddevent (elementment, type, handler) { if(!handler.$ $guid) handler.$ $guid = addevent.guid++;//Assign a separate ID to each event handler function     if(!elementment.events) elementment.events = {};//Create a hash of the event type for the element     varhandlers = Elementment.events[type];// Create a hash of the event handler for each pair of elements/events     if(!handlers) { Handlers = Elementment.events[type] = {}; if(elementment["on"+ type]) {//Store existing event handlers (if one already exists) handlers[0] = elementment["on"+ Type]; } } handlers[handler.$ $guid] = handler;//Store the event function in a hash table elementment["on"+ Type] = Handleevent;//Give a global event handler to come out all the work } Addevent.guid =1;//Create a counter with a separate ID functionRemoveevent (elementment, type, handler) { if(elementment.events && Elementment.events[type]) {//Remove the event handler from the hash list         Deleteelementment.events[type][handler.$ $guid]; } } functionHandleevent (Event) { varreturnvalue =true; Event = Event | | Fixevent (window.event);//Get Event object (ie uses global event object)     varhandlers = This. Events[event.type];//Get a reference to an event handler hash list      for(varIinchhandlers) {//Execute each event handler in sequence          This. $ $handerEvent = Handlers[i]; if( This. $ $handerEvent (Event) = = =false) { returnvalue =false; } } returnreturnvalue; } //Add some methods to the lack of IE event object functionFixevent (Event) { Event.preventdefault = Fixevent.preventdefault; Event.stoppropagation = fixevent.stoppropagation; returnevent; } Fixevent.preventdefault =function() { This. returnvalue =false; } Fixevent.stoppropagation =function() { This. cancelbubble =true; }

JavaScript-Work notes (event bindings)