9

因此，如果我想在单击按钮时发生某些事情，我可以这样做：

<!-- 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...

任何见解都会有所帮助！

4

4 回答 4

11 
<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看起来很干净，没有任何功能，并消除了紧密耦合。

在您动态添加的情况下，真正的内联事件总是有效，但有一个称为事件委托的概念。您将事件附加到页面上始终存在的父容器并将事件绑定到它。当事件稍后在 element 上发生时，事件会冒泡到为您处理事件的父级。

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

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

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

于 2013-07-31T03:52:37.713 回答
1

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

如果您还希望听到点击动态添加的元素，您应该使用.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 listenerandsecond listener仅在单击第一个 hello 时打印，而span单击任何 span 时会添加一个新的。

于 2013-07-31T03:47:43.543 回答
0

猜猜这是你真正的问题：

我注意到，当我使用 .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

于 2013-07-31T03:47:28.737 回答
-1

作品的区别，如果你使用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')" );

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

尝试这个

参考

于 2013-07-31T07:29:39.737 回答