javascript - onmouseup 或 addEventListener

Question

我有一个问题，我还没有找到答案。

当我使用此方法捕获鼠标松开事件时:

<div onmouseup="/*Script to be executed*/"></div>

这是否比这种新方法更有效:

<div id="Id"></div>

<script type="text/javascript">

document.getElementById("Id").addEventListener("mouseup", function () { /*Code to be executed here.*/ });

</script>

还是不行？

我认识的每个人都使用 addEventListener，而我是唯一一个使用 onmouseup 的人。因此，为了解决一点争议，哪种捕获鼠标松开事件的方法更快？

干杯，
奥斯卡

Answer 1

它们同样快，或者即使速度不同，它们也非常接近，无论哪种方式都无关紧要。目标是可读性。

假设您有一个纸牌游戏，您想要使用新的 html5 拖放 API 在屏幕上四处拖动纸牌。

你可以这样写:

<div id="card_1" ondragstart='function(this);' ondragenter='function(this);' ondragover='function(this);' ondragleave='function(this);' class='card'></div>

或者你可以这样写:

function initialize_event_listeners(){
    var cards = document.getElementsByClassName('card');
    for(var i = 0; i < cards.length; i++){
        cards[i].addEventListener('dragstart', function, false);
        cards[i].addEventListener('dragenter', function, false);
        cards[i].addEventListener('dragover', function, false);
        cards[i].addEventListener('dragleave', function, false);
    }
}

现在假设您有 10 张卡片，并且您想放弃 native 拖放支持并使用其他东西。在那种情况下你更愿意使用哪个？就我个人而言，我会接受这个功能......