javascript - onclick - 匿名函数 vs 定义 vs html onclick

Question

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

哪种解决方案最好，为什么？我的意思是性能/标准。或者也许还有其他更好的东西:

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 */ } );
}

Answer 1

对于 #1 - 添加更多命名函数会使全局命名空间变得困惑。这不是什么大事，但是当您在全局范围内调用某些内容时，它会导致对全局 namespace 进行更多的“扫描”。使用虚拟对象命名所有内容的另一个动机(例如 var namespace = {};)

对于 #2 - 在 HTML 中使用“onclick”处理程序将代码的实际实现与演示文稿混合在一起，这被认为有点“老掉牙”，而且在 JS 文件中更难看到该事件所在的位置绑定(bind)的、可读的代码是好的。

对于 #3，如果您只需要那个特定的处理程序，而不需要重用，它会很快并将您自己与 HTML 分离。如果您需要进行后续绑定(bind)，则必须跳过更多环节，因为匿名函数直接分配给处理程序并且不存在于代码中的其他任何地方。

如果您想要更复杂和动态的使用情况，您可以使用 jQuery.on 进行委托(delegate)事件绑定(bind)(同样使用匿名函数)。

查看我的快速演示 here使用委托(delegate)事件。

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;   
}