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

回答

相關問題