onmouseup或addEventListener

Question

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

当我使用此方法捕获鼠标up事件时：

<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张卡，并且您希望放弃本地拖放支持，并使用其他东西。在那种情况下，你更愿意使用哪一种？就我个人而言，我会承担这个任务..。

Answer 2

据我所知(而且这可能是错误的--这无助于解决您的争议) addEventListener方法效率更高--如果稍微有点小到根本不起作用的话。这是因为onmouseup内联方法只是addEventListener的一个快捷方式。换句话说，指向相同函数的是速记，并且无论如何都会在后台编写addEventListener代码。但在实践中，我认为，为了便于阅读和调试，最好将逻辑与结构分开。