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>

或者当然任何变化(on change,on 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绑定事件.