我有一个巨大的jQuery应用程序,我正在使用下面的两个方法来处理点击事件。
第一个方法
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
第二种方法
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
JavaScript函数调用
function divFunction(){
//Some code
}
在我的应用程序中,我使用第一种或第二种方法。哪个更好?性能更好?和标准?
关注点分离是这里的关键,因此事件绑定是普遍接受的方法。这基本上是很多现有答案的答案。
但是,不要过快地抛弃声明性标记的想法。它有它的位置,和像Angularjs这样的框架一起,它是核心。
需要有一个理解,整个<div id="myDiv" onClick="divFunction()>Some Content</div>被严重羞辱,因为它被一些开发人员滥用。所以它达到了亵渎的比例,就像桌子一样。有些开发人员实际上避免使用表格来处理表格数据。这是人们不理解行为的完美例子。
尽管我喜欢把我的行为和我的观点分开。我认为标记声明它做什么(而不是它如何做,这是行为)没有问题。它可能是一个实际的onClick属性的形式,也可能是一个自定义属性的形式,很像bootstrap javascript组件。
这样,只需看一眼标记,就可以看到它做了什么,而不是试图反向查找javascript事件绑定器。
因此,作为上述方法的第三种替代方法,使用数据属性来声明标记中的行为。行为被排除在视图之外,但一眼就能看到发生了什么。
自举的例子:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
来源:http://getbootstrap.com/javascript/弹窗
注意:第二个示例的主要缺点是对全局名称空间的污染。这可以通过使用上面的第三种选择来避免,或者使用像Angular这样的框架及其带有自动作用域的ng-click属性。
为了获得更好的性能,请使用本机JavaScript。为了更快地开发,请使用jQuery。查看jQuery和原生元素性能的比较。
我在Windows Server 2008 R2 / 7 64位的Firefox 16.0 32位上进行了测试
$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
对于点击事件,检查本机浏览器事件vs jquery触发器或jquery vs本机点击事件绑定。
在Windows Server 2008 R2 / 7 64位的Chrome 22.0.1229.79 32位上测试
$('#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