jQuery.click（）vs onClick [英] jQuery.click() vs onClick

问题描述

我有一个巨大的jQuery应用程序，并且我在下面的两个方法中使用了点击事件。

第一种方法

HTML

 < div id =myDiv>一些内容< / DIV> 
  

jQuery

  $（'＃myDiv'）。click（function（）{
 // Some code 
}）; 
  

第二种方法

HTML

 < div id =myDivonClick =divFunction（）>某些内容< / div> ; 
  

JavaScript函数调用

 函数divFunction（）{
 //一些代码
} 
  

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

解决方案使用 $（'＃myDiv'）。click（function（）{更好，因为它遵循标准事件注册模型（jQuery 内部使用 addEventListener code> 和 attachEvent ）。

基本上在现代化的方式是处理事件的不显眼的方式，也可以注册更多您可以为同一个目标调用 addEventListener（），而不是目标的一个事件侦听器。 code> var myEl = document.getElementById（'myelemen t'）;

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

其他方法，例如设定

 < button onclick =US / docs / DOM / event＃HTML_attribute> HTML属性 alert（'Hello world！'）> 
  

或 DOM元素属性，例如：

  myEl.onclick = function（event） {alert（'Hello world'）;}; 
  

是旧的，它们可以很容易地被覆盖。应避免使用HTML属性 ，因为它会使标记变得更大并且可读性更差。

DOM元素属性的问题 em> 方法是每个事件只能绑定一个事件处理程序。

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

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

I have a huge jQuery application, and I'm using the below two methods for click events.

First method

HTML

<div id="myDiv">Some Content</div>

jQuery

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

Second method

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScript function call

function divFunction(){
    //Some code
}

I use either the first or second method in my application. Which one is better? Better for performance? And standard?

解决方案

Using $('#myDiv').click(function(){ is better as it follows standard event registration model. (jQuery internally uses addEventListener and attachEvent).

Basically registering an event in modern way is the unobtrusive way of handling events. Also to register more than one event listener for the target you can call addEventListener() for the same target.

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.

More about Modern event registration -> http://www.quirksmode.org/js/events_advanced.html

Other methods such as setting the HTML attributes, example:

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

Or DOM element properties, example:

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

are old and they can be over written easily.

HTML attribute should be avoided as It makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find.

The problem with the DOM element properties method is that only one event handler can be bound to an element per event.

More about Traditional event handling -> http://www.quirksmode.org/js/events_tradmod.html

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

这篇关于jQuery.click（）vs onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！