`

JS通用事件绑定和移除程序

    博客分类:
  • js
js 
阅读更多

 

首先判断是否可使用DOM2级方法,然后判断是否可使用IE方法,最后只能使用DOM0级方法

 

  <script type="text/javascript">
  var EventUtil = {
    addhandler: function(element, type, handler){
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
      } else {
        elemnet["on" + type] = handler;
      }
    },
    removeHandler: function(){
      if (element.addEventListener) {
        element.removeEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.detachEvent("on" + type, handler);
      } else {
        elemnet["on" + type] = null;
      }
    
    }
  };
  </script>

 

2014-05-08 追加

学习thc1987的代码,改进如下(其实是原封不动抄过来的)

addEvent : function(oTarget,sEventType,fn){
		if(oTarget.addEventListener){
			this.addEvent = function(oTarget,sEventType,fn) {
				oTarget.addEventListener(sEventType,fn,false);
			}
		}else if(oTarget.attachEvent){
			this.addEvent = function(oTarget,sEventType,fn) {
				oTarget.attachEvent("on" + sEventType,fn);
			}
		}else{
			this.addEvent = function(oTarget,sEventType,fn) {
				oTarget["on" + sEventType] = fn;
			}
		}
		// 调用新函数
		this.addEvent(oTarget,sEventType,fn);
	}

 

分享到:
评论

相关推荐

    JQ 事件绑定

    在前端开发中,jQuery(简称JQ)库是广泛使用的工具,它极大地简化了JavaScript操作,特别是在DOM元素的选择、操作和事件处理方面。本篇文章将深入探讨JQ中的事件绑定机制。 事件绑定是网页交互的核心,它允许用户...

    JQuery绑定事件

    在实际开发中,我们还需要了解如何移除事件绑定。这可以通过`.off()`方法实现,例如: ```javascript $('#myElement').off('click'); ``` 这会移除ID为`myElement`元素的所有点击事件监听器。 此外,jQuery还提供了...

    javascript 添加和移除函数的通用方法

    以上就是关于如何在JavaScript中添加和移除事件监听器的通用方法的详细介绍。掌握了这些方法,无论是在IE浏览器还是W3C标准浏览器中,都能够有效地处理事件,保证程序的兼容性和稳定性。此外,对于特殊事件的处理,...

    通用JS事件写法实现代码

    通过上述分析可以看出,通用的JS事件处理方法不仅能够简化代码编写过程,还能够提高代码的可维护性和可扩展性。在实际开发中,还需要注意浏览器兼容性问题,并根据项目需求选择合适的事件绑定方式。此外,合理管理...

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    为了兼容W3C标准和IE浏览器,开发者们通常会创建一些通用的函数来添加和移除事件监听器。以下是一个示例函数,用于添加事件监听: ```javascript function addListener(element, eventName, handler) { if ...

    javascript中传统事件与现代事件

    同样地,它首先判断浏览器是否支持removeEventListener方法,如果支持,则直接使用removeEventListener来移除事件处理函数。如果浏览器不支持removeEventListener,则通过遍历事件处理函数数组,并删除匹配的函数来...

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    本文将详细讲解如何通过JavaScript实现跨浏览器的事件绑定和解绑函数,以便在各种浏览器中保持兼容性。 首先,让我们关注添加事件绑定的过程。在Internet Explorer(IE)中,事件绑定是通过`attachEvent`方法实现的...

    C# 中的委托和事件究竟有何不同

    1. 隐藏性:事件的发布者隐藏了具体的委托实例,外部对象只能订阅(添加事件处理程序)或取消订阅(移除事件处理程序),而不能直接调用事件。 2. 双向数据流:事件通常涉及数据从发布者流向订阅者,但订阅者无法...

    jQuery中绑定事件bind() on() live() one()的异同

    当绑定的事件处理器被执行一次之后,该处理器会自动被移除,这有助于防止事件处理器的重复绑定和潜在的内存泄漏问题。one() 方法在 jQuery 1.4 中首次引入,并且在新版本的 jQuery 中依然有效。 在实际开发中,我们...

    进大厂必须掌握的React.js 面试题整理收藏(强顶).pdf

    React.js 是一个流行的JavaScript库,用于构建用户界面,特别是单页应用程序。对于想进入大型科技公司的开发者来说,熟练掌握React.js是必不可少的。以下是一些关键的React面试知识点: 1. **React事件机制**: - ...

    Windows 8应用程序开发-JavaScript(数据)绑定

    在Windows 8应用程序开发中,JavaScript(数据)绑定是一个关键概念,它允许UI元素与后台数据模型进行直接关联,从而实现动态更新。本教程将深入探讨如何使用WinJS框架进行数据绑定,以便在Windows 8应用中创建更...

    详解javascript跨浏览器事件处理程序

    2. `removeHandler` 方法:同样,它会根据浏览器类型使用`removeEventListener`或`detachEvent`来移除事件处理器。通过`fid`(函数ID)来找到并移除正确的事件处理器。 在示例中,`bindFn1`和`bindFn2`是两个事件...

    Web前端开发技术-Jquery事件操作.pptx

    解绑事件通常使用`off()`方法,它可以移除通过`on()`方法添加的事件处理程序。如果你想完全移除特定元素的所有事件,可以使用`$("element").off()`,或者指定要移除的事件类型,如`$("element").off("click")`。 ...

    Per.js v3.0-源码.zip

    2. **事件处理**:Per.js提供了方便的事件绑定和解绑方法,使得在DOM元素上添加和移除事件监听器变得更加简单,同时避免了内存泄漏的问题。 3. **动画支持**:通过内置的动画模块,Per.js可以实现平滑的CSS属性过渡...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    在IE中,事件处理主要依赖于`attachEvent`和`detachEvent`方法,这两个方法分别用于添加和移除事件监听器。而Firefox和其他基于W3C标准的浏览器则使用`addEventListener`和`removeEventListener`方法来处理事件绑定...

    JavaScript积累

    3. **事件绑定与触发**:`element.addEventListener`和`element.removeEventListener`用于添加和移除事件监听器,`element.dispatchEvent`用于手动触发事件。 4. **动画效果**:通过改变CSS样式或使用`...

    微信小程序实现长按拖拽排序 左滑删除DragSort-master-master.zip

    微信小程序是一种轻量级的应用形式,由页面(Page)、模型(Model)、样式(Style)和事件(Event)组成。在实现长按拖拽排序和左滑删除时,我们需要关注事件处理和界面更新这两部分。 1. **长按拖拽排序**: - **...

    微信小程序 自定义头部导航栏 navigationStyle

    4. **交互效果**:可以利用JS(微信小程序中的js)来添加交互效果,如按钮的点击动画、下拉刷新时的导航栏变化等。 5. **响应式设计**:确保导航栏在不同设备和屏幕尺寸下的表现良好,考虑横屏和竖屏、不同分辨率的...

    详细解读JavaScript的跨浏览器事件处理

    DOM0级事件处理方式通过直接赋值和清空函数来添加和移除事件处理器。DOM2级事件处理方式则通过addEventListener和removeEventListener来添加和移除监听器,而IE浏览器则使用attachEvent和detachEvent。 ### 总结 ...

Global site tag (gtag.js) - Google Analytics