首页 文章

jQuery.click（）vs onClick

提问于
浏览 次
511

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

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 divFunction(){
    //Some code
}

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

javascript html javascript-events jquery

16 回答

  • 13

    使用 onclick 的第一种方法不是jQuery而只是Javascript，所以你不会得到jQuery的开销 . 如果你需要将jQuery方法添加到其他元素而不向每个元素添加事件处理程序，那么jQuery方法可以通过选择器进行扩展，但是现在你只需要使用jQuery就可以了 .

    就个人而言，因为你使用的是jQuery，我会坚持使用它，因为它是一致的，并且会将标记与脚本分离 .

    回复于
  • 12

    为此，它将为您提供标准和性能 .

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

    第二种方法是简单的JavaScript代码，比jQuery更快 . 但这里的表现大致相同 .

    回复于
  • 37

    关注点的分离在这里是关键，因此事件绑定是普遍接受的方法 . 这基本上是许多现有答案所说的 .

    However don 't throw away the idea of declarative markup too quickly. It has it'这个地方，以及像Angularjs这样的框架，是其中心 .

    需要有一个理解，整个__1096969被如此沉重地羞辱，因为它被一些开发人员滥用 . 所以它达到了亵渎神圣的程度，就像 tables 一样 . 一些开发人员实际上避免使用表格数据 tables . 这是人们在不理解的情况下行事的完美典范 .

    虽然我喜欢把我的行为与我的观点分开的想法 . 我发现标记声明 what 没有问题（不是 how 它做了，这是行为） . 它可能是实际的onClick属性或自定义属性的形式，就像bootstraps javascript组件一样 .

    这样，通过只看一下标记，你可以看到是什么，而不是试图反向查找javascript事件 Binders .

    因此，作为上述的第三种替代方法，使用数据属性来声明性地宣告标记内的行为 . 行为被排除在视野之外，但一眼就能看出发生了什么 .

    Bootstrap示例：

    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

    资料来源：http://getbootstrap.com/javascript/#popovers

    Note 第二个例子的主要缺点是全局命名空间的污染 . 这可以通过使用上面的第三个替代方案，或者像Angular这样的框架及其具有自动范围的ng-click属性来规避 .

    回复于
  • 2

    作品的差异 . 如果使用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')" )

    如果我们谈论性能，在任何情况下直接使用总是更快，但使用属性，您将只能分配一个功能 .

    回复于
  • 2

    单击按钮时执行JavaScript：

    <button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>
    回复于
  • 3

    $('#myDiv').click 更好，因为它将JavaScript代码与HTML分开 . 必须尝试保留页面 behaviour and structure different . 这有很大帮助 .

    回复于
  • 10

    你可以将它们组合起来，使用jQuery将函数绑定到click

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

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}
    回复于
  • 512

    两者都不是更好，因为它们可能用于不同的目的 . onClick （实际应该是 onclick ）表现得稍微好一点，但我非常怀疑你会注意到那里的差异 .

    值得注意的是，它们可以执行不同的操作： .click 可以绑定到任何jQuery集合，而 onclick 必须在您希望它绑定到的元素上内联使用 . 您也可以只使用 onclick 绑定一个事件，而 .click 允许您继续绑定事件 .

    在我看来，我会保持一致，只是在任何地方使用 .click 并将我的所有JavaScript代码保存在一起并与HTML分开 .

    不要使用 onclick . 没有't any reason to use it unless you know what you'正在做，你可能没有 .

    回复于
  • -2

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

    回复于
  • 12

    大多数时候，当性能是唯一的标准时，原生JavaScript方法是比jQuery更好的选择，但jQuery使用JavaScript并使开发变得容易 . 您可以使用jQuery，因为它不会过多地降低性能 . 在您的具体情况下，性能的差异是可以忽略的 .

    回复于
  • 7

    恕我直言，onclick是仅在满足以下条件时优先于.click的方法：

    • 页面上有很多元素

    • 只有一个要为click事件注册的事件

    • 您担心移动性能/电池寿命

    我形成了这个观点，因为移动设备上的JavaScript引擎比同代的桌面版本慢了4到7倍 . 当我访问我的移动设备上的网站并接收抖动滚动时，我讨厌它，因为jQuery以牺牲我的用户体验和电池寿命为代价来绑定所有事件 . 另一个最近的支持因素，虽然这应该只是政府机构关注的问题;），我们在IE7中弹出一个消息框，说明JavaScript进程需要很长时间......等待或取消进程 . 每当有很多元素通过jQuery绑定时就会发生这种情况 .

    回复于
  • 59

    第一种方法是偏好 . 它使用advanced event registration model[s]，这意味着您可以将多个处理程序附加到同一个元素 . 您可以轻松访问事件对象，处理程序可以存在于任何函数的范围内 . 而且，它是动态的，即它可以被调用任何时候，特别适合动态生成的元素 . 无论您使用jQuery，其他库还是本机方法都无关紧要 .

    第二种方法使用内联属性，需要大量的全局函数（这会导致命名空间污染），并将内容/结构（HTML）与行为（JavaScript）混合在一起 . 不要使用它 .

    您无法轻易回答有关性能或标准的问题 . 这两种方法完全不同，并做了不同的事情 . 第一个是更强大的，而第二个被鄙视（被认为是糟糕的风格） .

    回复于
  • 9
    <whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

    onclick, onmouseover, onmouseout, etc. 事件实际上是 bad for performance （主要在Internet Explorer中，请参见图） . 如果使用Visual Studio进行编码，则在运行带有这些内容的页面时，每个页面都会创建一个占用内存的单独SCRIPT块，从而降低性能 .

    更不用说你应该有separation of concerns：JavaScript和布局应该分开！

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

    （另外，其他人都在说 . ）

    回复于
  • 4

    据我所知，你的问题不是关于是否使用jQuery . 更确切地说：将事件内联在HTML中还是通过事件监听器更好？

    不推荐使用内联绑定 . 此外，您只能将一个函数绑定到某个事件 .

    因此，我建议使用事件监听器 . 这样，您就可以将许多函数绑定到单个事件，并在以后根据需要取消绑定它们 . 考虑这个纯JavaScript代码：

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

    这适用于大多数现代浏览器 .

    但是，如果您已在项目中包含jQuery - 只需使用jQuery： .on 或 .click 函数 .

    回复于
  • 4

    使用 $('#myDiv').click(function(){ 是 better ，因为它遵循标准事件注册模型 . （jQuery internally使用addEventListener和attachEvent） .

    基本上在modern way中注册事件是unobtrusive处理事件的方式 . 另外，要为目标注册多个事件侦听器，可以为同一目标调用 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/

    为什么要使用addEventListener？ （来自MDN）addEventListener是注册W3C DOM中指定的事件侦听器的方法 . 它的好处如下：它允许为事件添加多个处理程序 . 这对于需要运行良好的DHTML库或Mozilla扩展特别有用，即使使用其他库/扩展也是如此 . 当侦听器被激活时（捕获与冒泡），它可以让您对阶段进行更精细的控制 . 它适用于任何DOM元素，而不仅仅是HTML元素 .

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

    其他方法，如设置HTML attributes，例如：

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

    或DOM element properties，例如：

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

    已经老了，很容易被写完 .

    应避免使用 HTML attribute ，因为它会使标记更大且可读性更低 . 对内容/结构和行为的关注并没有很好地分离，使得更难找到bug .

    DOM element properties 方法的问题是每个事件只能将一个事件处理程序绑定到一个元素 .

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

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

    回复于
  • 3

    为了获得更好的性能，请使用本机JavaScript . 为了加快开发速度，请使用jQuery . 检查jQuery vs Native Element Performance的性能比较 .

    我已经在Windows Server 2008 R2 / 7 64位上对Firefox 16.0 32位进行了测试

    $('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

    对于单击事件，请选中Native Browser events vs jquery trigger或jQuery vs Native Click Event Binding .

    在Windows Server 2008 R2 / 7 64位上以32位格式在Chrome 22.0.1229.79中进行测试

    $('#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
    回复于

相关问题