Question

假设我正在编写一个Web应用程序，并且我想在一个函数中添加某些行为，因为它已在多个地方声明，而不会覆盖函数的旧行为。

以下是一些简化代码（请注意 window.onmousedown 功能

var createMenu = function(){
    var menu = document.createElement('ul');
    /* add things to the menu */
    window.onmousedown = function(e){
         menu.style.background = "red";
    }
}

var createSidebar = function(){
    var sidebar = document.createElement('div');
    /* add things to the sidebar */
    window.onmousedown = function(e){
         sidebar.id = "clicked";
    }
}

var createMenu();
var createSidebar();

在这种情况下，window.onmousedown不会执行它本来要做的两件事 - 它在createSidebar中的定义将覆盖createMenu中的定义。有没有一种标准的方法来实现一种行为，其中windows.onmousedown将保留这两种行为？

Answer 1

使用addEventListener()添加您的活动。它允许您为元素上的事件注册多个事件处理程序。忘记您在示例中使用的旧事件模型。

对于IE8及更早版本，您必须使用attachEvent()。

Advanced event registration models on Quirksmode

Answer 2

这不是最佳做法，但您可以这样做：

var createMenu = function(){
    var menu = document.createElement('ul');
    /* add things to the menu */
    window.onmousedown = function(e){
         menu.style.background = "red";
    }
}

var createSidebar = function(){
    var sidebar = document.createElement('div');
    var oldonmousedown = window.onmousedown;
    /* add things to the sidebar */
    window.onmousedown = function(e){
         sidebar.id = "clicked";
         oldonmousedown()
    }
}

var createMenu();
var createSidebar();

但你应该在bažmegakapa's answer中使用addEventListener()或attachEvent()

在JavaScript中向函数添加行为？

2 个答案: