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

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


当前回答

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

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

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

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

其他回答

在我看来,你的问题并不是关于是否使用jQuery。而是:在HTML中内联绑定事件更好,还是通过事件监听器绑定事件更好?

不支持内联绑定。此外,通过这种方式,您只能将一个函数绑定到某个事件。

因此,我建议使用事件侦听器。通过这种方式,您将能够将许多函数绑定到单个事件,并在需要时稍后取消它们的绑定。考虑这段纯JavaScript代码:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

这在大多数现代浏览器中都有效。

然而,如果你已经在你的项目中包含了jQuery -只需使用jQuery: .on或.click函数。

不同的作品。如果使用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')" )

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

使用$('#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/

Why use addEventListener? (From MDN) addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows: It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used. It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling) It works on any DOM element, not just HTML elements.

更多关于现代活动注册-> http://www.quirksmode.org/js/events_advanced.html

其他方法,如设置HTML属性,示例:

<button onclick="alert('Hello world!')">

或DOM元素属性,示例:

myEl.onclick = function(event){alert('Hello world');}; 

都是旧的,而且很容易被重写。

应该避免使用HTML属性,因为它会使标记更大,可读性更差。内容/结构和行为的关注点没有很好地分开,使得错误更难被发现。

DOM元素属性方法的问题在于,每个事件只能将一个事件处理程序绑定到一个元素。

更多关于传统事件处理-> http://www.quirksmode.org/js/events_tradmod.html

MDN参考:https://developer.mozilla.org/en-US/docs/DOM/event

jQuery背后的主要思想之一是将JavaScript与令人讨厌的HTML代码分开。第一种方法是要走的路。

Onclick函数Jquery

$(" #选择器”).click(函数(){ / /你的功能 });