jQuery.click() 与 onClick [英] jQuery.click() vs onClick

问题描述

我有一个巨大的 jQuery 应用程序，我正在使用以下两种方法来处理点击事件.

第一种方法

HTML

一些内容

jQuery

$('#myDiv').click(function(){//一些代码});

第二种方法

HTML

<div id="myDiv" onClick="divFunction()">一些内容</div>

JavaScript 函数调用

function divFunction(){//一些代码}

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

解决方案

使用 $('#myDiv').click(function(){ 是 更好 因为它遵循标准事件注册模型.(jQuery 内部使用addEventListener 和 attachEvent).

基本上以现代方式注册事件是非侵入式 处理事件的方式.此外，要为目标注册多个事件侦听器，您可以为同一目标调用 addEventListener().

var myEl = document.getElementById('myelement');myEl.addEventListener('click', function() {alert('你好世界');}， 错误的);myEl.addEventListener('click', function() {alert('你好世界又来了!!!');}， 错误的);

http://jsfiddle.net/aj55x/1/

<块引用>

为什么使用 addEventListener?(来自 MDN)

addEventListener 是注册指定事件监听器的方式在 W3C DOM 中.其好处如下:

• 它允许为一个事件添加多个处理程序.这对于 DHTML 库或 Mozilla 扩展特别有用即使使用其他库/扩展程序也需要正常工作.
• 当侦听器被激活(捕获与冒泡)时，它可以让您对相位进行更细粒度的控制
• 它适用于任何 DOM 元素，而不仅仅是 HTML 元素.

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

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

或 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/事件

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() 与 onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！