Javascript 函数覆盖

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

使用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中是否可能出现类似的情况

看看。您可以删除旧的事件函数，然后用新的事件函数替换它

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

window.onresize = function() {
  var test = document.getElementById("div");
  if (window.innerWidth > 500) {
    try{
    test.removeEventListener("click",two);
    } catch{}
    test.addEventListener("click",one,false);
  } 
  else {
    try{
    test.removeEventListener("click",one);
    } catch{}
    test.addEventListener("click",two,false);
  }
}

看。您可以删除旧的事件函数，然后用新的事件函数替换它

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

window.onresize = function() {
  var test = document.getElementById("div");
  if (window.innerWidth > 500) {
    try{
    test.removeEventListener("click",two);
    } catch{}
    test.addEventListener("click",one,false);
  } 
  else {
    try{
    test.removeEventListener("click",one);
    } catch{}
    test.addEventListener("click",two,false);
  }
}

---

在这种情况下，我将使用非常有效但鲜为人知的方法。可以接受属性为

handleEvent

的对象作为事件处理程序。在这种情况下，很容易覆盖处理程序函数，将其设置为完全不同的函数，而不必一次又一次地干扰

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;
    }
}

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

---

演示：

在这种情况下，我将使用非常有效但鲜为人知的方法。可以接受属性为

handleEvent

的对象作为事件处理程序。在这种情况下，很容易覆盖处理程序函数，将其设置为完全不同的函数，而不必一次又一次地干扰

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;
    }
}

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

---

演示：

只要有对原始处理程序函数的引用，就可以调用它，然后像平常一样添加自己的侦听器

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'）；
按钮。addEventListener（'click'，函数（事件）
{
test.removeEventListener（'click'，one'）；
test.addEventListener（'click'，function（）
{
警报（“第二”）；
});
event.target.parentNode.removeChild（event.target）；
});
功能一（）
{
警报（“第一”）；
}
var test=document.getElementById（'test'）；
test.addEventListener（'click'，one）
#测试
{
背景：#CCC；
边框：实心1px#666；
填充物：5px；
}
单击“我交换事件侦听器”
只要您有对原始处理程序函数的引用，就可以调用它，然后像正常情况一样添加您自己的侦听器

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'）；
按钮。addEventListener（'click'，函数（事件）
{
test.removeEventListener（'click'，one'）；
test.addEventListener（'click'，function（）
{
警报（“第二”）；
});
event.target.parentNode.removeChild（event.target）；
});
功能一（）
{
警报（“第一”）；
}
var test=document.getElementById（'test'）；
test.addEventListener（'click'，one）
#测试
{
背景：#CCC；
边框：实心1px#666；
填充物：5px；
}
单击我Exchange事件侦听器
我将使用闭包引用当前设置为事件处理程序的函数：


var onResize=函数（）{
//引用当前处理程序
var-curr；
//删除/添加事件处理程序
功能交换（当前、复制）{
var test=document.getElementById（'div'）；
test.removeEventListener（'click'，curr'）；
test.addEventListener（'click'，repl）；
}
//“调整大小”事件处理程序将
//分配给“onResize”变量
返回函数（）{
如果（window.innerWidth>500）{
如果（当前！==一）交换（当前，一）；
curr=1；
} 
否则{
如果（当前！==2）交换（当前，2）；
curr=2；
}
};
}(); // 生活
addEventListener（'resize'，onResize）；
//开始时运行“onResize”
//设置以下处理程序之一
onResize（）；
函数一（）{alert（'first'）；}
函数二（）{alert（'second'）；}
div
我将使用闭包引用当前设置为事件处理程序的函数：


var onResize=函数（）{
//引用当前处理程序
var-curr；
//删除/添加事件处理程序
功能交换（当前、复制）{
var test=document.getElementById（'div'）；
test.removeEventListener（'click'，curr'）；
test.addEventListener（'click'，repl）；
}
//“调整大小”事件处理程序将
//分配给“onResize”变量
返回函数（）{
如果（window.innerWidth>500）{
如果（当前！==一）交换（当前，一）；
curr=1；
} 
否则{
如果（当前！==2）交换（当前，2）；
curr=2；
}
};
}(); // 生活
addEventListener（'resize'，onResize）；
//开始时运行“onResize”
//设置以下处理程序之一
onResize（）；
函数一（）{alert（'first'）；}
函数二（）{alert（'second'）；}
div
。还有。。还有，这太棒了！但是，当我想将一个参数传递给两个函数时，我应该如何修改它呢？例如，像这样
handlers.handleEvent=function（e）{one（arg1，arg2）；}问题是我使用for循环将具有不同参数的函数传递给更多元素。这太棒了！但是，当我想将一个参数传递给两个函数时，我应该如何修改它呢？例如，像这样
handlers.handleEvent=function（e）{one（arg1，arg2）；}问题在于我使用for循环将具有不同参数的函数传递给更多元素。