3

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

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

<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 的人。所以为了解决一点争议，哪种捕获鼠标事件的方法更快？

干杯，
奥斯卡

4

2 回答 2

5

它们同样快，或者如果不是那么近，那么无论哪种方式都无关紧要。目标是可读性。

假设您有一个纸牌游戏，并且您想使用新的 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 张卡，并且您想放弃原生拖放支持并使用其他东西。在那种情况下，您更愿意使用哪个？我个人会接受这个功能......

于 2013-07-15T18:26:07.477 回答
1

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

于 2013-07-15T18:14:10.627 回答