javascript 兼容W3c和IE的添加(取消)事件监听方法

事件作为javascript本身的一个必备功能,在目前javascript的使用中是无处不在的,基本要只要写到javascrpt,就会用到javascript事件。下面就说说javascript中的添加事件监听和取消事件监听的方法,当然也要做到兼容W3c和IE。下面是兼容的代码:

[javascript] view plain copy

  1. //添加事件监听兼容函数
  2. function addHandler(target, eventType, handler){
  3. if(target.addEventListener){//主流浏览器
  4. addHandler = function(target, eventType, handler){
  5. target.addEventListener(eventType, handler, false);
  6. };
  7. }else{//IE
  8. addHandler = function(target, eventType, handler){
  9. target.attachEvent("on"+eventType, handler);
  10. };
  11. }
  12. //执行新的函数
  13. addHandler(target, eventType, handler);
  14. }
  15. //删除事件监听兼容函数
  16. function removeHandler(target, eventType, handler){
  17. if(target.removeEventListener){//主流浏览器
  18. removeHandler = function(target, eventType, handler){
  19. target.removeEventListener(eventType, handler, false);
  20. }
  21. }else{//IE
  22. removeHandler = function(target, eventType, handler){
  23. target.detachEvent("on"+eventType, handler);
  24. }
  25. }
  26. //执行新的函数
  27. removeHandler(target, eventType, handler);
  28. }

上面这段代码是对监听事件函数做了优化的,延迟加载事件监听函数,这样就不用每次都对添加或删除事件进行判断了,只在第一次添加或删除监听事件的时候进行判断,会大大提高监听事件的执行效率。

时间: 2024-10-24 14:56:49

javascript 兼容W3c和IE的添加(取消)事件监听方法的相关文章

javascript面向对象--观察者模式(为对象添加事件监听功能)

正文开始之前,有这么一个需求: >背景:宁静的夜晚,一天晚上,狗蛋(主人)睡得正香,侠盗高飞(小偷)突然造访. >事件:高飞正准备下手的时候,不料被旺财(狗)发现了,于是旺财叫了起来,狗蛋醒了,高飞逃走了. 分析需求后,可以发现有三个对象: 高飞(小偷) 旺财(狗) 狗蛋(主人) 创建对象的构造函数以及原型方法 //人的构造函数 function Person(name){ this.name=name; //首次创建实例时,为Person的原型添加共有的方法 if(!Person.proto

JavaScript的事件监听、捕获和冒泡

在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element.addEventListener(type, listener[, useCapture]); //IE6~8不支持 element.attachEvent('on' + type, listener)     //支持IE6~10,IE11不支持 element['on' + type] = fu

javascript事件监听与事件委托

事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id="div1"> <div id="div2"

js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件 第二:IE中监听函数 var oDiv; function fnClick(){ alert("click

(12)JavaScript之[事件][事件监听]

事件 1 /** 2 * 事件: 3 * onload 和 onunload 事件在用户进入或离开页面时被触发 4 * 5 * onchange事件常结合对输入字段的验证来使用 6 * onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 7 * 8 * onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分.首先当点击鼠标按钮时, 9 * 会触发 onmousedown 事件,当释放鼠标

Javascript 的事件监听函数和移除事件监听函数

<html> <head></head> <body> <div id="hello">hello world</div> <script> //w3c中使用addEventListener()函数监听事件,IE中使用attachEvent()函数监听事件 //w3c中使用 removeEventListener ()函数移除事件监听,IE中使用detachEvent()函数来移除事件监听 var do

使用HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)

之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(f

html学习 - javascript事件监听以及addEventListener参数分析

事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:addEventListener. 这里解释一下一个网页的嵌套关系:最外层:window 包含:document 包含:html 包含: body 包含:div等等... addEventListener监听方法 按钮监听事件响应 首先我们需要获取一个按钮的handle,获取的方法很简单,代码如下: v

[转]添加事件监听

我们在制作网页时,常常要制作一些js控件.各js控件虽然制作出来后,但有时要在一起使用时,调用到同样的事件就会引起冲突. 如editselectunit和editselectrole控件同时使用到了document的onclick事件.此时,如果在这两个事件的<script language='javascript'></script>处分别编写如下document.onclick = function() { alert('unit');}; documnet.onclick=f