我有一个巨大的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
}

在我的应用程序中,我使用第一种或第二种方法。哪个更好?性能更好?和标准?


当前回答

说你有一个按钮嵌套在Javascript/Jquery生成的html元素(.html()或.innerHTML类型的元素),然后你需要首先选择最外层的元素(父元素),并这样做

var parentElement = $('#outermostElement')
 parentElement.click('button', function(){
    console.log('clicked')
}) 

我所说的最外层元素是指嵌入.html()的元素

outermostElement.html("<div><button>click<button><div>")

其他回答

两者都不是更好的,因为它们可以用于不同的目的。onClick(实际上应该是onClick)执行得稍微好一点,但我高度怀疑你会注意到其中的差异。

值得注意的是,它们做不同的事情:.click可以绑定到任何jQuery集合,而onclick必须内联使用在你想要它绑定的元素上。您也可以使用onclick只绑定一个事件,而.click允许您继续绑定事件。

在我看来,我会保持一致,在任何地方都使用.click,并将所有JavaScript代码放在一起,与HTML分开。

不要使用onclick。除非你知道你在做什么,否则没有任何理由使用它,而你可能不知道。

不同的作品。如果使用click(),则可以添加几个函数,但如果使用属性,则只执行一个函数—最后一个函数。

DEMO

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

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')" )

如果我们谈论的是性能,在任何情况下直接使用总是更快,但使用属性,您将只能分配一个函数。

说你有一个按钮嵌套在Javascript/Jquery生成的html元素(.html()或.innerHTML类型的元素),然后你需要首先选择最外层的元素(父元素),并这样做

var parentElement = $('#outermostElement')
 parentElement.click('button', function(){
    console.log('clicked')
}) 

我所说的最外层元素是指嵌入.html()的元素

outermostElement.html("<div><button>click<button><div>")

$ (" # myDiv”)。click更好,因为它将JavaScript代码从HTML中分离出来。必须尽量保持页面行为和结构的不同。这很有帮助。

为了获得更好的性能,请使用本机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