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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
vue登录路由验证的实现
Dec 13 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
世界上第一台立体声收音机
2021/03/01 无线电
PHP 的 __FILE__ 常量
2007/01/15 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP中echo和print的区别
2014/08/28 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python程序文件扩展名知识点详解
2020/02/27 Python
python中shell执行知识点
2020/05/06 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
《童年》教学反思
2014/02/18 职场文书
项目合作意向书模板
2014/07/29 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
怎样写家长意见
2015/06/04 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫