jquery的事件處理

標籤：style   blog   io   color   ar   sp   strong   div   on   

原生

//html<button id="btn">按鈕</button>//jsdocument.getElementById(‘btn‘).onclick = clickCheckboxCallback;function clickCheckboxCallback(event) {    var e = event || window.event;    var target = e.target || e.srcElement;    if (target.nodeName === ‘BUTTON‘) {        alert(‘yuansheng ok‘);    }    else {        alert(‘yuansheng fail‘);    }}   

此處 event、e 為 MouseEvent，target為button#btn

-----------------------------------------------------------------

jquery

//html<button id="btn">按鈕</button>//js$(‘#btn‘).on(‘click‘, clickCheckboxCallback);function clickCheckboxCallback(event) {    var target = event.target;    if ($.nodeName(target, ‘button‘)) {        alert(‘jquery ok‘);    }    else {        alert(‘jquery fail‘);    }}

此處 event為m.Event(jquery對象), target為button#btn

-------------------------------------------------------------

總結：jquery和原生js綁定事件的不同在於

　　　　1. 綁定方式  

　　　　　　 js為 dom.onclick = fn； jquery為$(‘#dom‘).on(‘click‘, fn);

　　　　2. 相容處理

　　　　　　js 要經過 相容處理，如下

var e = event || window.event;var target = e.target || e.srcElement;

　　　　　　jquery不用處理，只需要直接用event或者event.target，如下

var target = event.target;

　　　　　　

　　　　　　*jquery 和 原生js的event不一樣，但target都是一樣的

 

　　　　　　3.對nodeName的判斷，二者區別在上面的代碼上可以看到 

---------------------------------------------------------------------------

 

* Q:如何理解$符號？ 

   A:直接寫在$上的函數都只支援dom對象

jquery的事件處理