JavaScript为事件句柄绑定监听函数实例详解


Posted in Javascript onDecember 15, 2015

本文实例讲述了JavaScript为事件句柄绑定监听函数的方法。分享给大家供大家参考,具体如下:

在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug。各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中:

1、传统的绑定方法:

elem.onclick = function( event ){
  alert(event.type + 'this.innerHTML');
};

a、传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正在处理事件的节点(如当前正在运行事件句柄的节点)。

b、一个元素的一个事件句柄只能注册一个函数,如果重复注册,会产生覆盖;而且,传统绑定方法只会在事件冒泡中运行。

2、W3C标准绑定方法:

var elem = document.getElementById('ID');
elem.addEventListener('click' ,
  function( event ){ 
   alert(event.type + ' ' + this.innerHTML + 1); 
  } , 
  false //冒泡阶段执行
);
elem.addEventListener('click' ,
  function( event ){ 
   alert(event.type + ' ' + this.innerHTML + 2); 
  } ,
  false
);

a、这种绑定方法同时支持时间处理的捕获和冒泡两个阶段;同一元素的同一事件句柄可以注册多个监听函数;而且,监听函数内部this指向当前元素。

b、但是流行的IE浏览器不支持这种注册方法。

3、IE事件句柄注册方法:

var elem = document.getElementById('a');
elem.attachEvent('onclick' ,
  function(){ 
   alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 1); 
  } 
);
elem.attachEvent('onclick' ,
  function(){ 
   alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 2); 
  }
);

a、这种绑定方法,可以为同一事件句柄注册多次。

b、IE的事件模型不支持事件捕获;监听函数体内的this指向的不是当前于元素,而且window.event.srcElement指向的是发生事件的节点,而不是当前节点,并且在IE的事件对象中也没有等价的DOM currentTarget属性。

4、跨浏览器的方法一:

function addEvent(element, type, handler) {
  if (!handler.$$guid) handler.$$guid = addEvent.guid++;
  if (!element.events) element.events = {};
  var handlers = element.events[type];
  if (!handlers) {
  handlers = element.events[type] = {};
  if (element["on" + type]) {
   handlers[0] = element["on" + type];
  }
  }
  handlers[handler.$$guid] = handler;
  element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
  if (element.events && element.events[type]) {
  delete element.events[type][handler.$$guid];
  }
};
function handleEvent(event) {
  var returnValue = true;
  event = event || fixEvent(window.event);
  var handlers = this.events[event.type];
  for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
  }
  return returnValue;
};
function fixEvent(event) {
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
};
fixEvent.preventDefault = function() {
  this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
};

5、跨浏览器的方法二:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
  obj['e'+type+fn] = fn;
  obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
  obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
  obj.detachEvent( 'on'+type, obj[type+fn] );
  obj[type+fn] = null;
  } else
  obj.removeEventListener( type, fn, false );
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 #Javascript
js简单网速测试方法完整实例
Dec 15 #Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 #Javascript
理解javascript闭包
Dec 15 #Javascript
jQuery检测滚动条是否到达底部
Dec 15 #Javascript
js实现根据身份证号自动生成出生日期
Dec 15 #Javascript
浅析javascript的return语句
Dec 15 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
学习自我鉴定
2014/02/01 职场文书
求职自荐信怎么写
2014/03/06 职场文书
社区文化建设方案
2014/05/02 职场文书
工程承诺书怎么写
2014/05/24 职场文书
文明好少年事迹材料
2014/08/19 职场文书
就业协议书
2014/09/12 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
大学组织委员竞选稿
2015/11/21 职场文书