脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 事件绑定

javascript 处理事件绑定的一些兼容写法

 更新时间：2009年12月24日 13:23:45   作者：  
javascript 事件绑定的一些兼容写法整理非常不错，感谢
绑定事件
复制代码 代码如下:

var addEvent = function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj.attachEvent( "on"+type, function() {
obj["e"+type+fn]();
} );
}
};

另一个实现
复制代码 代码如下:

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
};
} else {
return function (el, type, fn) {
el.attachEvent('on' + type, function () {
return fn.call(el, window.event);
});
}
}
})();

绑定onpropertychange事件

onpropertychange是微软制造的一个事件，它在一个元素的属性发生变化的时候触发，常见的有文本的长度改变，样长改变等，FF大致和它相似的属性为oninput事件，不过它只针对textfield与textarea的value属性。safari，firefox，chrome与 opera都支持此属性。
复制代码 代码如下:

var addPropertyChangeEvent = function (obj,fn) {
if(window.ActiveXObject){
obj.onpropertychange = fn;
}else{
obj.addEventListener("input",fn,false);
}
}

移除事件
复制代码 代码如下:

var removeEvent = function( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj["e"+type+fn] );
obj["e"+type+fn] = null;
}
};

加载事件
复制代码 代码如下:

var loadEvent = function(fn) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}else {
window.onload = function() {
oldonload();
fn();
}
}
}

阻止事件
复制代码 代码如下:

var stopEvent = function(e){
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
}

如果仅仅是阻止事件冒泡
复制代码 代码如下:

var stopPropagation = function(e) {
e = e || window.event;
if (!+"\v1") {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}

取得事件源对象

相当于Prototype.js框架的Event.element(e)
复制代码 代码如下:

var getEvent = function(e){
e = e || window.event;
var target = event.srcElement ? event.srcElement : event.target;
return target
}

或者这个功能更强大，我在开发datagrid时开发出来的，详细用法见《一步步教你实现表格排序（第二部分）》。
复制代码 代码如下:

var getEvent = function(e) {
var e = e || window.event;
if (!e) {
var c = this.getEvent.caller;
while (c) {
e = c.arguments[0];
if (e && (Event == e.constructor || MouseEvent == e.constructor)) {
break;
}
c = c.caller;
}
}
var target = e.srcElement ? e.srcElement : e.target,
currentN = target.nodeName.toLowerCase(),
parentN = target.parentNode.nodeName.toLowerCase(),
grandN = target.parentNode.parentNode.nodeName.toLowerCase();
return [e,target,currentN,parentN,grandN];
}

最后附上DOM3.0事件的一览表
type Bubbling phase Cancelable Target node types DOM interface
DOMActivate Yes Yes Element UIEvent
DOMFocusIn Yes No Element UIEvent
DOMFocusOut Yes No Element UIEvent
focus No No Element UIEvent
blur No No Element UIEvent
textInput Yes Yes Element TextEvent
click Yes Yes Element MouseEvent
dblclick Yes Yes Element MouseEvent
mousedown Yes Yes Element MouseEvent
mouseup Yes Yes Element MouseEvent
mouseover Yes Yes Element MouseEvent
mousemove Yes Yes Element MouseEvent
mouseout Yes Yes Element MouseEvent
keydown Yes Yes Element KeyboardEvent
keyup Yes Yes Element KeyboardEvent
mousemultiwheel Yes Yes Document, Element MouseMultiWheelEvent
mousewheel Yes Yes Document, Element MouseWheelEvent
DOMSubtreeModified Yes No Document, DocumentFragment, Element, Attr MutationEvent
DOMNodeInserted Yes No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMNodeRemoved Yes No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMNodeRemovedFromDocument No No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMNodeInsertedIntoDocument No No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMAttrModified Yes No Element MutationEvent
DOMCharacterDataModified Yes No Text, Comment, CDATASection, ProcessingInstruction MutationEvent
DOMElementNameChanged Yes No Element MutationNameEvent
DOMAttributeNameChanged Yes No Element MutationNameEvent
load No No Document, Element Event
unload No No Document, Element Event
abort Yes No Element Event
error Yes No Element Event
select Yes No Element Event
change Yes No Element Event
submit Yes Yes Element Event
reset Yes Yes Element Event
resize Yes No Document, Element UIEvent
scroll Yes No Document, Element UIEvent
作者:Ruby's Louvre
您可能感兴趣的文章:

相关文章

  • 关于JS变量和作用域详解

    关于JS变量和作用域详解

    下面小编就为大家带来一篇关于JS变量和作用域详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS/Jquery判断对象为空的方法

    JS/Jquery判断对象为空的方法

    本文给大家分享的是JS/Jquery判断对象是不是空对象的方法，十分的简单实用，有需要的小伙伴可以参考下。
    2015-06-06
  • javascript检测flash插件是否被禁用的方法

    javascript检测flash插件是否被禁用的方法

    这篇文章主要介绍了javascript检测flash插件是否被禁用的方法,涉及JavaScript调用ActiveXObject组件操作flash插件的相关技巧,需要的朋友可以参考下
    2016-01-01
  • JavaScript函数的4种调用方法详解

    JavaScript函数的4种调用方法详解

    了解函数的调用过程有助于深入学习与分析JavaScript代码。本文是JavaScript高级这个系列中的第三篇文章，主要介绍JavaScript中函数的四种使用形式
    2014-04-04
  • ES6新特性三： Generator(生成器)函数详解

    ES6新特性三： Generator(生成器)函数详解

    这篇文章主要介绍了ES6新特性之Generator(生成器)函数,简单分析了Generator(生成器)函数的功能、定义、调用方法并结合实例形式给出了相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript ES6中类与模块化管理超详细讲解

    JavaScript ES6中类与模块化管理超详细讲解

    JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块，那么需要通过指定语法来引入要使用的模块，而且只能使用引入模块所暴露的内容
    2023-01-01
  • c#和Javascript操作同一json对象的实现代码

    c#和Javascript操作同一json对象的实现代码

    刚开始学Javascript，接触到json对象，json可以看作是用于客户端数据实体对象的载体。json对象一般都是通过ajax方式传送给服务层
    2012-01-01
  • 微信小程序多项选择器checkbox

    微信小程序多项选择器checkbox

    这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 深入浅析JavaScript的API设计原则

    深入浅析JavaScript的API设计原则

    这篇文章主要介绍了JavaScript的API设计原则，包括接口的流畅性，一致性，参数的处理，可扩展性，对错误的处理，可预见性，注释和文档的可读性，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

    KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

    这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论