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中的对象和数组的应用技巧
Jan 07 Javascript
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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
php5中类的学习
2008/03/28 PHP
php 动态多文件上传
2009/01/18 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
js函数调用的方式
2014/05/06 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
详解vuex的简单todolist例子
2019/07/14 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python字典快速保存于读取的方法
2018/03/23 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
通过代码实例了解Python异常本质
2020/09/16 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
外国人来华邀请函
2015/01/31 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL