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

我需要在元素中创建一个链接，然后用函数绑定它。在消息面板的示例关闭按钮。onclick - 匿名函数vs定义vs html onclick

哪种解决方案最好，为什么？我的意思是性能/标准。或者，也许还有别的一些东西，甚至更好：

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

来源

2015-09-07 roiwew

使用代码格式化为固定代码 – hoijui

。我第一次做到了，但是我添加了一些评论让帖子更加清楚它的崩溃。谢谢 – roiwew

对于＃1 - 添加更多命名函数混乱了全局命名空间。这不是一件大事，但当你全局调用某些东西时，它会导致更多的“扫描”全局名称空间。另一个使用虚拟对象命名空间的动机（例如var namespace = {};）

对于＃2 - 在HTML中使用“onclick”处理程序将代码的实际实现与您的演示文稿混合，位“旧帽子”，并且在你的JS文件中看到绑定该事件的更难，可读代码是很好的。

对于＃3，如果您只是想要特定的处理程序，而无需重复使用，它很快速并且可以将您自己从HTML中解耦。如果你需要做后续绑定，你必须跳过更多的箍环，因为匿名函数直接分配给处理程序，并且不会在代码中的其他任何地方生存。

如果你想要一个更复杂和动态的使用情况，你可以使用jQuery.on来进行委托事件绑定（再次使用匿名函数）。

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

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

来源

2015-09-07 12:41:24

在这种情况下，你的解决方案/代码是什么？在JS中创建一个元素，然后添加属性并添加它？那么会不会有html？ – roiwew

@ user2598863 - 查看我的编辑。 –

谢谢，但我得到了“关于”甚至是有约束力的想法。我在想你说我的追加方法是旧帽子。它需要通过脚本添加，因为所有脚本都不是html，而是用JS呈现。 – roiwew

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

回答

相关问题