首頁猿問為什么在HTML中使用onclic...

為什么在HTML中使用onclick()是一種糟糕的做法？

JavaScript Html/CSS

慕桂英546537 2019-05-31 10:56:25

為什么在HTML中使用onclick()是一種糟糕的做法？我多次聽說使用JavaScript事件，例如onClick()，在HTML中是一種不好的實踐，因為它不利于語義。我想知道缺點是什么，以及如何修復下面的代碼？<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

查看完整描述

3 回答

蝴蝶刀刀

TA貢獻1801條經驗獲得超8個贊

如果您正在使用jQuery，那么：

HTML：

 <a id="openMap" href="/map/">link</a>

聯署材料：

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });});

這樣做的好處是沒有JS仍然工作，或者如果用戶中間單擊鏈接。

這也意味著我可以通過再次將以下內容重寫來處理通用彈出窗口：

HTML：

 <a class="popup" href="/map/">link</a>

聯署材料：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });});

這將允許您添加一個彈出窗口到任何鏈接，只要給它彈出類。

這一想法還可以進一步推廣，如下所示：

HTML：

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

聯署材料：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });});

現在，我可以使用相同的代碼在我的整個網站上的許多彈出窗口，而不必編寫大量的點擊材料！可重用性太好了！

這也意味著，如果稍后我決定彈出窗口是錯誤的做法，(他們是！)如果我想用一個Lightbox樣式的模態窗口來代替它們，我可以更改：

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

到

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

我在整個網站上的彈出窗口現在都完全不同了。我甚至可以做特征檢測來決定在彈出窗口上做什么，或者存儲用戶偏好以允許或不允許他們。隨著內聯點擊，這需要一個巨大的復制和粘貼努力。

反對回復 2019-05-31

www說

TA貢獻1775條經驗獲得超8個贊

這是不好的，有幾個原因：

它混合了代碼和標記。
用這種方式編寫的代碼經過
eval
并在全局范圍內運行。

最簡單的方法是添加一個name歸因于<a>元素，則可以執行以下操作：

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;};

雖然現代的最佳實踐是使用id而不是名字，并使用addEventListener()而不是使用onclick因為這允許您將多個函數綁定到單個事件。

反對回復 2019-05-31

3 回答
0 關注
2725 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為什么在HTML中使用onclick()是一種糟糕的做法？

為什么在HTML中使用onclick()是一種糟糕的做法？

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么在HTML中使用onclick()是一種糟糕的做法？

為什么在HTML中使用onclick()是一種糟糕的做法？

3 回答

相關問題推薦

添加回答

為什么在HTML中使用onclick()是一種糟糕的做法？

為什么在HTML中使用onclick()是一種糟糕的做法？