原生
//html <button id="btn">按钮</button> //js document.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对象
原文：http://www.cnblogs.com/cjy1993/p/4077042.html