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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
javascript 日期常用的方法
Nov 11 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue 实现双向绑定的四种方法
Mar 16 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
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php图片缩放实现方法
2014/02/20 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python中list列表的高级函数
2016/05/17 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python3实现磁盘空间监控
2018/06/21 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python3 mmh3安装及使用方法
2019/10/09 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
高中美术教学反思
2014/01/19 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
房地产项目策划书
2014/02/05 职场文书
药品业务员岗位职责
2014/04/17 职场文书
酒会邀请函
2015/01/31 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis