JavaScript实现为事件句柄绑定监听函数的方法分析


Posted in Javascript onNovember 14, 2017

本文实例讲述了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;
};

以上代码由是有 Dean EdwardsaddEvent/removeEven

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 );
}

另外,事件流可分为冒泡型事件和捕获型事件,HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。我们可以通过在绑定事件中加上"return false"来阻止它的默认行为。感兴趣的拼音可参考本站js之事件冒泡和事件捕获详细介绍上的相关介绍。

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
JavaScript函数绑定用法实例分析
Nov 14 #Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 #Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 #Javascript
JS中图片压缩的方法小结
Nov 14 #Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
Node.js使用Express.Router的方法
Nov 14 #Javascript
js精确的加减乘除实例
Nov 14 #Javascript
You might like
如何设置mysql允许外网访问
2013/06/04 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python hashlib模块用法实例分析
2018/06/12 Python
python 常用的基础函数
2018/07/10 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
初中女生自我鉴定
2013/12/19 职场文书
大课间活动制度
2014/01/18 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
补充协议书
2015/01/28 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
素质教育学习心得体会
2016/01/19 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
原生JS中应该禁止出现的写法
2021/05/05 Javascript
使用CSS连接数据库的方式
2022/02/28 HTML / CSS