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>
相关推荐
添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同
冒泡事件 js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的“冒泡”应该说是交换更加准确;js里面的“冒泡事件”才是...
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先...
通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML元素之内来使用)。今天的事件,它已是...
不同的浏览器中的事件监听机制是不同的,以onKeyPress事件为例。
PS:这种方式和Java GUI中的事件监听机制很像,都是需要注册监听,然后再处理监听,只不过实现的方式不同而已。 二、事件驱动原理 事件源:产生事件的地方(html元素) 事件:点击/鼠标操作/键盘操作等等 事件对象...
学习 Node.js 一定要理解的...事件驱动机制的最简单形式,是在 Node.js 中十分流行的回调函数,例如 fs.readFile。 在回调函数这种形式中,事件每被触发一次,回调就会被触发一次。 我们先来探索下这个最基本的方式。
本文将详细介绍nodeJS事件机制与events事件模块的使用方
这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来...深入了解事件机制在我们遇到较困难问题时候十分有帮助所谓事件,就是网页发生的一些瞬间(比如点击、滑动),在这些瞬间我们使用事件监听器(回调
leaflet工具类,绘制点、线、面、文本、高亮、地图监听、地图加载、事件机制
前几天在《JavaScript高级程序设计》里学到了自定义事件方法,觉得很多复杂的逻辑都可以根据事件模型来解耦,通过事件监听机制来很直观的画出各个功能间的依赖关系。 昨天看书在看面向对象程序设计章节时又看到其中...
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边... 通常,在js中监听事件的方法共有三种,分别是: ele.addEventListener(type,listener,
一、背景知识介绍 通常为DOM元素增加事件有以下几种... 2,事件监听机制,这种形式采用的做法是根据DOM事件机制,分为DOM标准事件模型addEventListener和IE事件模型attchEvent。 代码类似如下: 代码如下: var addEve
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听。 举例来说: angular.module('myapp',[]) ....
本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法。分享给大家供大家参考,具体如下: 观察者模式又叫做发布订阅模式,它定义了一种一...在JavaScript中事件监听机制就可以理解为一种观察者模式。
在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的。 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞...