JS事件监听器

转载 2015年11月19日 10:54:36

js事件监听是学习js过程中必然要学习和掌握的。下面是js事件监听的代码
function addEventHandler(target, type, func) {
    if (target.addEventListener)
        target.addEventListener(type, func, false);
    else if (target.attachEvent)
        target.attachEvent("on" + type, func);
    else target["on" + type] = func;
}

有人问我,为什么我要用事件监听呢?因为我在target后面加一个.onclick或者.onmouseover 等等的事

件,各个浏览器都是完全兼容的啊。下面几点就说明我们为什么要使用事件监听器。
第一:当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就

是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而是用事件监听则不会有覆盖的现象,

每个绑定的事件都会被执行。但是IE家族先执行后绑定的方法,也就是逆绑定顺序执行方法,其他浏览器

按绑定次数顺序执行方法。

第二:也是最重要的一点,采用事件监听给对象绑定方法后,可以解除相应的绑定,写法如下
function removeEventHandler(target, type, func) {
    if (target.removeEventListener)
        target.removeEventListener(type, func, false);
    else if (target.detachEvent)
        target.detachEvent("on" + type, func);
    else delete target["on" + type];
}


第三:解除绑定事件的时候一定要用函数的句柄,把整个函数写上是无法解除绑定的。看实例:
错误的写法:
addEventHandler(Button1, "click", function() { alert("3"); } );
removeEventHandler(Button1, "click", function() { alert("3"); });

正确的写法:
function test(){alert("3");}
addEventHandler(Button1, "click", test );
removeEventHandler(Button1, "click", test);

下面为整个HTML代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.0-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript事件监听</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
function addEventHandler(target, type, func) {
    if (target.addEventListener)
        target.addEventListener(type, func, false);
    else if (target.attachEvent)
        target.attachEvent("on" + type, func);
    else target["on" + type] = func;
}

function removeEventHandler(target, type, func) {
    if (target.removeEventListener)
        target.removeEventListener(type, func, false);
    else if (target.detachEvent)
        target.detachEvent("on" + type, func);
    else delete target["on" + type];
}

var Button1 = document.getElementById("Button1");
var test1 = function() { alert(1); };
function test2() {alert("2")}
addEventHandler(Button1,"click",test1);
addEventHandler(Button1,"click",test2 );
addEventHandler(Button1,"click", function() { alert("3"); } );
addEventHandler(Button1,"click", function() { alert("4"); } );

removeEventHandler(Button1,"click",test1);
removeEventHandler(Button1,"click",test2);
removeEventHandler(Button1,"click",function() { alert("3"); });
</script>
</body>
</html>

node.js + MongoDB + AngularJS - 4 事件、监听器、定时器、回调

node.js通过其强大的事件驱动模型提供了可扩展性和性能。了解事件模型至关重要,因为它可能迫使你改变设计应用程序的思维。1. 了解Node.js事件模型Node.js应用程序在一个单线程的事件驱动模...

js事件的监听器的使用

js事件的监听器的使用 1、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。...

js事件监听器用法实例详解

js事件监听器用法实例详解

JS事件监听器

js事件监听是学习js过程中必然要学习和掌握的。下面是js事件监听的代码 function addEventHandler(target, type, func) {     if (target...

JS事件的监听器的使用

1、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象,每个绑...

事件监听器

  • 2013年12月17日 00:04
  • 713KB
  • 下载

spring学习笔记(16)趣谈spring 事件机制[2]:多监听器流水线式顺序处理

上一篇我们使用到的ApplicationListener是无序的,结合异步调度它能满足了我们的大部分应用场景,但现在我们来个另类的需求,我们来模拟一条作业调度流水线,它不能异步,必须按照先后次序执行不...

JList事件监听器的实现例子

  • 2016年09月01日 15:17
  • 5KB
  • 下载

java事件监听器

  • 2012年02月02日 09:38
  • 285KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS事件监听器
举报原因:
原因补充:

(最多只允许输入30个字)