原生
//html//jsdocument.getElementById('btn').onclick = clickCheckboxCallback;function clickCheckboxCallback(event) { var e = event || window.event; var target = e.target || e.srcElement; alert(target.className); //anniu if (target.nodeName === 'BUTTON') { alert('yuansheng ok'); } else { alert('yuansheng fail'); }}
此处 event、e 为 MouseEvent,target为button#btn
-----------------------------------------------------------------
jquery
//html//js$('#btn').on('click', clickCheckboxCallback);function clickCheckboxCallback(event) { var target = event.target; alert($(target).attr('class')); //anniu if ($.nodeName(target, 'button')) { alert('jquery ok'); } else { alert('jquery fail'); }}
此处 event为m.Event(jquery对象), target为button#btn
-------------------------------------------------------------
总结:jquery和原生js绑定事件的不同在于
- 绑定方式
js为 dom.onclick = fn; jquery为$('#dom').on('click', fn);
- 兼容处理
js 要经过 兼容处理,如下
var e = event || window.event;var target = e.target || e.srcElement;
jquery不用处理,只需要直接用event或者event.target,如下
var target = event.target;
*jquery 和 原生js的event不一样,但target都是一样的
- 对nodeName的判断,二者区别在上面的代码上可以看到
---------------------------------------------------------------------------
* Q:如何理解$符号?
A:直接写在$上的函数都只支持dom对象