on( "click" ，function()) 和 onclick= "function();" 有什么区别？

Question

因此，如果我想在单击按钮时发生某些事情，我可以执行以下操作之一：

<!-- EXAMPLE A-->
<input type="button" onclick="alert('hello world');">

或者我可以做

<!-- EXAMPLE B-->
<input type="button" id="clickme">
<script>
   $('#clickme').on("click",function(){alert('hello world');});
</script>

当然，任何变体（在change上，在hover上）和快捷方式（.click() .change()）都是可能的。。。

除了A较短之外，还有什么区别？哪个更好，为什么

我注意到，当我使用.html()向网站动态添加元素（如按钮）时，B不适用于这个新创建的按钮，我需要使用a…

任何见解都会有所帮助！

Answer 1

<input type="button" onclick="alert('hello world');">

这就是内联事件的处理方式。这是一个坏主意的主要原因是要清楚地定义separation of concerns.

HTML - Structure of your page
JS   - Your page functionality

从长远来看，当系统规模扩大时，这将减少维护问题。

如果你的页面上有100个按钮，并且你想删除或更改所有按钮的点击事件，会发生什么。这绝对是一场噩梦。此外，如果内联绑定，则只能定义单个事件。

通过移动到一个单独的文件，您有很大的灵活性，只需进行一个小的更改即可影响页面上的所有元素。

所以第二种方法总是更好和前进的道路。

通过定义以下事件

$('#clickme').on("click",function(){alert('hello world');});

HTML看起来很干净，没有任何功能，并消除了紧密耦合。

在动态添加的情况下，内联事件确实总是有效的，但有一个概念叫做事件委派。您将事件附加到页面上始终存在的父容器，并将事件绑定到该容器。当事件稍后在元素上发生时，事件将冒泡到为您处理事件的父容器。

对于这种情况，您可以使用传入选择器的.on来绑定事件

$(document).on('click', '#clickme', function() {

请记住，将多个事件绑定到一个文档是个坏主意。您可以始终使用closestStaticAncestor来绑定事件。

Answer 2

第一种方法只允许您注册一个点击侦听器，而第二种方法允许您注册任意数量的侦听器。

如果您希望动态添加的元素上的点击也能被听到，那么您应该使用.on()。这里有一些代码演示了这一点（jsfiddle）：

HTML

<div id="mainDiv">
<span class="span1">hello</span>
</div>

JS-

$(document).on("click", ".span1", function () {
   $( "#mainDiv" ).append("<span class="span1">hello</span>");
});
$(".span1").click( function () {
   console.log( "first listener" );
}); 
$(".span1").click( function () {
   console.log( "second listener" );
}); 

请注意，只有在单击第一个hello时才会打印first listener和second listener，而在单击任何跨度时都会添加新的span。

Answer 3

猜测这是你真正的问题：

我注意到，当我使用.html（）向站点（像按钮）B不适用于这个新创建的按钮，我需要使用…

只需使用.on()函数中的选择器，就可以对多个元素使用ANDuse A CLASS而不是DUPLICATE IDs：

$('document').on("click", ".myButtons", function(){
    alert('hello world');
});

按钮-更改为类（如果您使用ID，则只会选择第一个）：

<input type="button" class="myButtons" />
<input type="button" class="myButtons" />

这就是使用.on()将事件处理程序附加到新元素的方式：

https://stackoverflow.com/a/14354091/584192

Answer 4

不同的是，如果你使用click（），你可以添加几个fn，但如果你使用attribute，只会执行一个函数-最后一个

HTML-

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

Js-

$('#JQueryClick').on("click", function(){alert('1')});
$('#JQueryClick').on("click", function(){alert('2')});
$('#JQueryAttrClick').attr('onClick'," alert('1')" );//this doesn't work    
$('#JQueryAttrClick').attr('onClick'," alert('2')" );

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

试试这个

参考