JavaScript为事件句柄绑定监听函数实例详解

 更新时间:2015年12月15日 12:36:54   作者:bigwhiteshark  
这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • JS绘图Flot应用图形绘制异常解决方案

    JS绘图Flot应用图形绘制异常解决方案

    这篇文章主要介绍了JS绘图Flot应用图形绘制异常解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • JavaScript中的相等操作符使用详解

    JavaScript中的相等操作符使用详解

    JavaScript 中的相等操作符详解,包括 [] == []、[] == ![]、{} == !{}几个操作符,需要的朋友可以参考下
    2019-12-12
  • javascript 函数的暂停和恢复实例详解

    javascript 函数的暂停和恢复实例详解

    这篇文章主要介绍了javascript 函数的暂停和恢复,结合实例形式详细分析了javascript 函数的暂停和恢复相关原理、实现方法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • jquery和js显示和隐藏div的几种方法对比整理

    jquery和js显示和隐藏div的几种方法对比整理

    jQuery是基于JavaScript的一种框架。jQuery封装js和Ajax的功能,提供函数接口,简化js的操作。使用jquery来显示或者隐藏div真的很方便。
    2023-02-02
  • 微信小程序日期选择器实例代码

    微信小程序日期选择器实例代码

    本文通过一段实例代码给大家介绍了微信小程序日期选择器的实现思路,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • javascript中不提供sleep功能如何实现这个功能

    javascript中不提供sleep功能如何实现这个功能

    javascript中不提供sleep功能,而我们时长会用到这个功能,下面与大家分享个不错的解决方法,而且在不同的机器上的执行速度是一致的
    2014-05-05
  • js实现的光标位置工具函数示例

    js实现的光标位置工具函数示例

    这篇文章主要介绍了js实现的光标位置工具函数,结合实例形式分析了JavaScript操作textarea文本框光标位置及文本操作相关技巧,需要的朋友可以参考下
    2016-10-10
  • JSON字符串转JSON对象

    JSON字符串转JSON对象

    本文给大家分享的是如何使用javascript实现JSON字符串转JSON对象的方法,这里记录下来,有需要的小伙伴可以参考下。
    2015-07-07
  • js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

    js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

    这篇文章主要介绍了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法,涉及javascript针对页面元素及样式属性的相关操作技巧,需要的朋友可以参考下
    2015-08-08
  • JavaScript类型系统之Object详解

    JavaScript类型系统之Object详解

    对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象
    2016-01-01

最新评论