我有一个巨大的jQuery应用程序,我正在使用以下两种方法进行点击事件.
第一种方法
Some Content
$('#myDiv').click(function(){
//Some code
});
第二种方法
Some Content
function divFunction(){
//Some code
}
我在我的应用程序中使用第一种或第二种方法.哪一个更好？性能更好？和标准？
使用$('#myDiv').click(function(){是更好的,因为它遵循标准的事件注册模型.(jQuery 内部使用addEventListener和attachEvent).
基本上以现代方式注册事件是处理事件的不引人注目的方式.另外,要为目标注册多个事件侦听器,您可以调用addEventListener()同一目标.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
http://jsfiddle.net/aj55x/1/
为什么要使用addEventListener？(来自MDN)
addEventListener是注册W3C DOM中指定的事件侦听器的方法.它的好处如下:
它允许为事件添加多个处理程序.这对于即使使用其他库/扩展也需要正常工作的DHTML库或Mozilla扩展特别有用.
当监听器被激活时(捕获与冒泡),它可以让您对阶段进行更细粒度的控制
它适用于任何DOM元素,而不仅仅是HTML元素.
有关现代事件注册的更多信息 - > http://www.quirksmode.org/js/events_advanced.html
其他方法,如设置HTML属性,例如:
或DOM元素属性,例如:
myEl.onclick = function(event){alert('Hello world');};
很老,他们可以轻易写完.
应避免使用 HTML属性,因为它会使标记更大且可读性更低.对内容/结构和行为的担忧并没有很好地分离,使得更难找到bug.
与该问题DOM元素性质的方法是,只有一个事件处理程序可以绑定到每个事件的元件.
有关传统事件处理的更多信息 - > http://www.quirksmode.org/js/events_tradmod.html
MDN参考:https://developer.mozilla.org/en-US/docs/DOM/event
为了获得更好的性能,请使用本机JavaScript.为了加快开发速度,请使用jQuery.检查jQuery与Native Element Performance的性能比较.
我已经在Windows Server 2008 R2/7 64位上使用32位Firefox 16.0进行了测试
$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
对于单击事件,请检查本机浏览器事件与jquery触发器或jQuery与本机单击事件绑定.
在Windows Server 2008 R2/7 64位上以32位格式在Chrome 22.0.1229.79中进行测试
$('#jquery a').click(window.testClickListener); // 2,957 operations/second
[].forEach.call( document.querySelectorAll('#native a'), function(el) {
el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second
据我所知,你的问题不是关于是否使用jQuery.更确切地说:将事件内联在HTML中还是通过事件监听器更好？
不推荐使用内联绑定.此外,您只能将一个函数绑定到某个事件.
因此,我建议使用事件监听器.这样,您就可以将许多函数绑定到单个事件,并在以后根据需要取消绑定它们.考虑这个纯JavaScript代码:
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
这适用于大多数现代浏览器.
但是,如果您已在项目中包含jQuery - 只需使用jQuery:.on或.click函数.
你可以将它们组合起来,使用jQuery将函数绑定到click
Some Content$('#myDiv').click(divFunction); function divFunction(){ //some code }
$('#myDiv').click更好,因为它将JavaScript代码与HTML分开.必须尝试保持页面行为和结构不同.这有很大帮助.
为此,它将为您提供标准和性能.
$('#myDiv').click(function(){
//Some code
});
因为第二种方法是简单的JavaScript代码,并且比jQuery更快.但这里的表现大致相同.
恕我直言,onclick是仅在满足以下条件时优先于.click的方法:
页面上有很多元素
只有一个事件要为click事件注册
你担心移动性能/电池寿命
我之所以形成这种观点,是因为移动设备上的JavaScript引擎比同代产品中的JavaScript引擎慢4到7倍.当我访问我的移动设备上的网站并接收抖动滚动时,我讨厌它,因为jQuery以牺牲我的用户体验和电池寿命为代价来绑定所有事件.另一个最近的支持因素,虽然这应该只是政府机构关注的问题;),我们有一个IE7弹出窗口,上面有一个消息框,说明JavaScript进程需要很长时间......等待或取消进程.每当有很多元素通过jQuery绑定时就会发生这种情况.
作品的差异.如果使用click(),则可以添加多个函数,但如果使用属性,则只执行一个函数 - 最后一个.
DEMO
HTML
Click #JQuery Click #Attr
JavaScript的
$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})
$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )
如果我们谈论性能,在任何情况下直接使用总是更快,但使用属性,您将只能分配一个功能.
关注点的分离在这里是关键,因此事件绑定是普遍接受的方法.这基本上是许多现有答案所说的.
但是,不要过快地抛弃声明性标记的想法.它有它的位置,并且像Angularjs这样的框架是其核心.
需要有一个理解,tables.一些开发人员实际上避免tables使用表格数据.这是人们在不理解的情况下表现的完美典范.
虽然我喜欢把我的行为与我的观点分开的想法.我发现标记没有问题,声明它做了什么(不是它如何做,这是行为).它可能是实际的onClick属性或自定义属性的形式,就像bootstraps javascript组件一样.
这样,通过只看一下标记,你可以看到它做了什么,而不是试图反向查找javascript事件绑定器.
因此,作为上述的第三种替代方法,使用数据属性来声明性地宣告标记内的行为.行为被排除在视野之外,但一眼就能看出发生了什么.
Bootstrap示例:
资料来源:http://getbootstrap.com/javascript/#popovers
注意第二个例子的主要缺点是全局命名空间的污染.这可以通过使用上面的第三个替代方案,或者像Angular这样的框架及其具有自动范围的ng-click属性来规避.
京公网安备 11010802040832号 | 京ICP备19059560号-6 