JavaScriptでよく使われるイベント

イベント依頼
要素に複数のイベントを追加できます.

var addHandler = function(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);  //false      
    }else if(element.attachEvent){
        element.attachEvent("on" + type,handler);
    }
}

ここには個性を最適化するためのテクニックがあります.例えば、ページに9999のli追加クリックイベントがあります.

<ul>
    <li></li>
    <li></li>
    <li></li>
    ....9999 li
</ul>

もし私達はliを一回便利にして、またonclick事件を別々に追加すれば、9999個のonclickが必要で、多くのメモリを消費します.
非常に良い方法はulにイベント依頼を追加し、event.targetによってクリックしたliにイベントを追加することです.

addHandler(ul,"click",function(event){
   var event =  event|| window.event,
         target = event.target || event.srcElement; 
    alert(target.innerHTML);
})

イベントを削除
今まで使ったことがないので、使えない事件に対してはff chromeはよくメモリを放出します.しかし、その後、ieメモリの漏洩に関するいくつかの記事を読みましたが、このイベントは非常に有用であることが分かりました.

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.srcele ment
dom要素を取得 
タージw 3 c
srcele ment e e

var getTarget = function(event){
        return event.target || event.srcElement;
}

イベントのデフォルトをキャンセル

 1 //w3c
 2 event.preventDefault();
 3 
 4 //ie
 5 event.returnValue = false;
 6 
 7 //           
 8 var preventDefault = function(event){ 
 9         (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
10 }

例えば、aリンクをキャンセルする行為は、クリックしても効果がありません.

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

キャンセルイベント(中断事件の泡立ち)

//w3c
event.stopPropagation();

//ie
event.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)">     </li>
    <li>     </li>
    <li>     </li>
</ul>



function a(obj){
    alert(obj.innerHTML);
}


//   first     first #test       
addHandler(document.getElementById("first"),"click",function(){
    stopPropagation(event);
});


addHandler(document.getElementById("test"),"click",function(){
    alert(2)
});