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 相关文章推荐
jQuery 美元符冲突的解决方法
Mar 28 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
javascript每日必学之多态
Feb 23 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python3.0 字典key排序
2008/12/24 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
劳动之星获奖感言
2014/02/01 职场文书
高中军训感言400字
2014/02/24 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
陪护人员误工证明
2015/06/24 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript