Common events in JavaScript

Turn from: http://www.cnblogs.com/dtdxrk/p/3551454.html The event delegate used in JavaScript

Multiple events can be added to an element

var addHandler = function (element,type,handler) {    if (element.addeventlistener) {        Element.addeventlistener ( Type,handler,false);  False indicates the bubbling phase    }else if (element.attachevent) {        element.attachevent ("on" + Type,handler);}    }

There is also a little tip for performance optimizations, such as 9,999 Li-added click events on the page.

<ul>    <li></li>    <li></li>    <li></li> ...    .. 9,999 x li</ul>

If we make it easy for Li to add the onclick event separately, 9,999 onclick will consume a lot of memory.

There is a very good way to add an event delegate to UL, according to Event.target to add events to the clicked Li

AddHandler (UL, "click", Function (event) {   var event =  event| | window.event,         target = Event.target | | event.srcelement;     alert (target.innerhtml);})

removing events

The removal event has never been used, and the memory can be freed up by the FF Chrome for the event that is not available. But later read some articles about IE memory leaks, found this event is very useful.

var removehandler = function (element,type,handler) {    if (element.removeeventlistener) {        Element.removeeventlistener (Type,handler,false);    } else if (element.detachevent) {        element.detachevent ("on" + Type,handler);    } else{        element["on" + type] = null;    }}

Event.target event.srcelement

Get DOM Element

Target Consortium

Srcelement ie

var gettarget = function (event) {        return event.target | | event.srcelement;}

Cancel the default behavior of an event

1//w3c 2 event.preventdefault (); 3  4//ie 5 event.returnvalue = false; 6  7//The default behavior for canceling events 8 var preventdefault = function (event) {  9         (EVENT.P Reventdefault)? Event.preventdefault (): Event.returnvalue = false;10}

For example, to cancel the action of a link, clicking will not take effect.

1 <a href= "http://www.baidu.com" id= "link" >www.baidu.com</a>2 3 document.getElementById ("link"). onclick = function () {4     preventdefault (event); 5}

Cancel event (interrupt event bubbling)

W3cevent.stoppropagation ();//ieevent.cancelbubble = True;var stoppropagation = function (event) {        ( event.stoppropagation)? Event.stoppropagation (): Event.cancelbubble = true;}

<ul id= "Test" onclick= "a (This)" >    <li id= "First" onclick= "a [this]" > This is the number one </li>    <li> This is the second </li>    <li> This is the third </li></ul>function A (obj) {    alert (obj.innerhtml);} Block first bubble Click First #test的事件不会触发addHandler (document.getElementById ("first"), "click", Function () {    Stoppropagation (event);}); AddHandler (document.getElementById ("Test"), "click", Function () {    alert (2)});

Common events in JavaScript