Question

有没有办法在函数中覆盖函数或事件处理？

使用addEventListener，我们可以在元素上拥有尽可能多的事件处理程序

var test=document.getElementById("div");
test.addEventListener("click",function(){alert("im first");},false);
test.addEventListener("click",function(){alert("im second");},false); // alerts "im first" and after that "im second"

但是如果我们想要覆盖函数/事件，例如基于客户端宽度，例如像这样的

function one() {
    alert("first");
}

function two() {
    alert("second");
}

window.onresize = function() {
    var test = document.getElementById("div");
    if (window.innerWidth > 500) {
        test.onclick = one
    } else {
        test.onclick = two;
    }
}

在javascript中有可能是这样的吗？

Answer 1

在这种情况下，我会使用非常有效但很少知道的方法。 addEventListener可以接受具有属性handleEvent的对象作为事件处理程序。在这种情况下，很容易覆盖处理函数，将其设置为null完全不同的函数，而不会一次又一次地弄乱removeEventListener和addEventListener。

在你的情况下：

var test = document.getElementById("div");

var handlers = {
    handleEvent: function () {
        alert("im first");
    }
};

test.addEventListener("click", handlers, false);

function one() {
    alert("first");
}

function two() {
    alert("second");
}

window.onresize = function() {
    if (window.innerWidth > 500) {
        handlers.handleEvent = one;
    } else {
        handlers.handleEvent = two;
    }
}

检查下面的演示，调整窗格大小以查看它如何根据视口宽度动态选取不同的处理程序。

演示： http://jsfiddle.net/dfsq/t4wrjkLa/

Answer 2

只要您有对原始处理函数的引用，就可以在其上调用removeEventListener，并像平常一样添加您自己的侦听器。

function one()
{
    alert('first');
}
var test = document.getElementById('test');
test.addEventListener('click', one);
// Later in your code
function two()
{
    alert('second');
}
test.removeEventListener('click', one);
test.addEventListener('click', two);

演示：

var button = document.getElementById('button');
button.addEventListener('click', function(event)
{
    test.removeEventListener('click', one);
    test.addEventListener('click', function()
    {
        alert('second');
    });
    event.target.parentNode.removeChild(event.target);
});

function one()
{
    alert('first');
}
var test = document.getElementById('test');
test.addEventListener('click', one);

#test
{
    background: #CCC;
    border: solid 1px #666;
    padding: 5px;
}

<div id="test">Click me</div> <button id="button">Exchange event listeners</button>

Answer 3

看看this。您可以删除旧事件函数，然后将其替换为新事件函数

<body>

Answer 4

我会使用闭包来引用当前设置为事件处理程序的函数：

＆＃13;

var onResize = function () {
    // references the current handler
    var curr;
    // removes/adds event handlers
    function swap (curr, repl) {
        var test = document.getElementById('div');
        test.removeEventListener('click', curr);
        test.addEventListener('click', repl);
    }
    // the "resize" event handler which will be
    // assigned to the "onResize" variable
    return function () {
        if (window.innerWidth > 500) {
            if (curr !== one) swap(curr, one);
            curr = one;
        } 
        else {
            if (curr !== two) swap(curr, two);
            curr = two;
        }
    };
}(); // IIFE

window.addEventListener('resize', onResize);

// run "onResize" at starting to
// set up one of the below handlers
onResize();
function one () { alert('first'); } 
function two () { alert('second'); }

＆＃13;

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

＆＃13;

功能覆盖

4 个答案: