onclick - 匿名函数 vs 定义函数 vs HTML onclick

Question

onclick - 匿名函数 vs 定义函数 vs HTML onclick

3

我需要在元素中创建一个链接，然后将其绑定到函数。例如，消息面板的关闭按钮。

哪种解决方案最好？为什么？我指的是性能/标准。或者可能有其他更好的解决方案：

1. 定义函数 + 在匿名函数中调用onclick函数

function add-close-button( ){
  $( '.msg' ).append( '<a href="#" class="close">Close me</a>' );
  $( '.msg .close' ).click( function(){ close-msg( ); } );
}
function close-msg( ){ /* code here */ }

2. 定义函数 + html onclick

function add-close-button( ){
  $( '.msg' ).append( '<a href="#" class="close" onclick="close-msg">Close me</a>' );
}
function close-msg( ){ /* code here */ }

3.关闭功能未定义，只有匿名onclick函数

function add-close-button( ){
  $( '.msg' ).append( '<a href="#" class="close">Close me</a>' );
  $( '.msg .close' ).click( function(){ /* code here */ } );
}

- roiwew

use code formatting for code - hoijui

修复了。我第一次做的时候没问题，但是当我添加了一些注释以使帖子更清晰时，它崩溃了。谢谢。 - roiwew

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Watkins · Accepted Answer

对于#1-添加更多的命名函数会使全局命名空间变得混乱。虽然这不是什么大问题，但在全局调用某些东西时，它会导致更多的全局命名空间“扫描”。使用一个虚拟对象(例如var namespace = {};)对所有内容进行命名空间处理是另一个激励因素。

对于#2-在HTML中使用“onclick”处理程序将您的代码实现与演示混合在一起，这被认为有点“老套”，而且在JS文件中更难看到事件绑定，可读性好的代码是很重要的。

对于#3，如果您只想要特定的处理程序，并且不需要重用，那么它可以快速解耦与HTML。如果您需要进行后续绑定，则必须跳过更多的环节，因为匿名函数直接分配给处理程序，并且不在代码的其他任何地方存在。

如果您需要更复杂和动态的用例，您可以使用jQuery.on来进行委派事件绑定(再次使用匿名函数)。

请参见我快速演示的这里使用委派事件。 HTML:

<div id="myContent">
    <a href="#" class="close">Close me</a>
    <br/>
    <a href="#" class="showClose">Trigger the Close button appearing</a> 
</div>

脚本：

$( "#myContent" ).on("click", ".close", function() {
  alert("clicked");
});

$( "#myContent" ).on("click", ".showClose", function() {
  $(".close").toggle();   
});

CSS（层叠样式表）：

.close {
   display:none;   
}