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

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


当前回答

第一种方法是选择。它使用高级事件注册模型,这意味着您可以将多个处理程序附加到同一个元素。您可以轻松地访问事件对象,并且处理程序可以存在于任何函数的作用域中。此外,它是动态的,即它可以在任何时候被调用,特别适合于动态生成的元素。无论直接使用jQuery、其他库还是本地方法都无关紧要。

第二种方法使用内联属性,需要大量全局函数(这会导致名称空间污染),并将内容/结构(HTML)与行为(JavaScript)混合在一起。不要用这个。

你关于性能或标准的问题不容易回答。这两种方法完全不同,做的事情也不一样。第一种更强大,而第二种则被鄙视(被认为是糟糕的风格)。

其他回答

这样做,因为它将为您提供标准和性能。

 $('#myDiv').click(function(){
      //Some code
 });

因为第二种方法是简单的JavaScript代码,比jQuery更快。但这里的性能大致相同。

Onclick函数Jquery

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

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

使用onclick的第一种方法不是jQuery,而是简单的Javascript,所以您没有jQuery的开销。jQuery的方式可以通过选择器进行扩展,如果你需要将它添加到其他元素,而不需要为每个元素添加事件处理程序,但现在你有了它,是否需要使用jQuery只是一个问题。

就我个人而言,因为你正在使用jQuery,我会坚持使用它,因为它是一致的,并从脚本中解耦标记。

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout等事件实际上对性能不好(主要是在ie中,去想想)。如果您使用Visual Studio进行编码,当您使用这些代码运行一个页面时,其中的每一个都将创建一个单独的SCRIPT块,占用内存,从而降低性能。

更不用说你应该有一个分离的关注点:JavaScript和布局应该分开!

为这些事件创建evenHandlers总是更好的,一个事件可以捕获数百/数千个项目,而不是为每个事件创建数千个单独的脚本块!

(还有,所有人都在说的话。)