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.的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" );
}); 

请注意， first listener和second listener器仅在单击第一个hello时打印，而在单击任何span时添加新的span 。

Answer 3

猜猜这是你真正的问题：

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

只需使用.on()函数中的选择器，并使用一个CLASS代替多个元素的DUPLICATE ID ：

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

按钮 - 更改为类（如果使用ID，则仅选择FIRST ）：

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

这是你应该如何使用.on()将事件处理程序附加到新元素：

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

Answer 4

工作上的差异，如果你使用click（）你可以添加几个fn，但如果你使用属性只会执行一个函数 - 最后一个

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')" );

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

试试这个

参考