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与CSS复习(《精通javascript》)
Jun 29 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
js单词形式的运算符
May 06 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
PHP笔试题
2012/02/22 面试题
行政人员岗位职责
2013/12/08 职场文书
消防安全汇报材料
2014/02/08 职场文书
规划编制实施方案
2014/03/15 职场文书
妇联主席先进事迹
2014/05/18 职场文书
初中信息技术教学计划
2015/01/22 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
导游词之井冈山
2019/11/20 职场文书