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张牌，你想放弃本机拖放支持并使用别的东西。在那种场景中你更愿意使用？我个人会接受这个功能......

Answer 2

据我所知（这可能是错误的 - 这对您的争议没有帮助）addEventListener方法更有效 - 如果稍微有点根本没有任何区别。这是因为onmouseup内联方法只是addEventListener的快捷方式。换句话说，它是指向相同函数的简写，并且无论如何都要在后台写入addEventListener代码。但在一般实践中，在我看来，为了便于阅读和调试，将逻辑与结构分开是更好的。

onmouseup或addEventListener

2 个答案: