首页 > 编程 > JavaScript > 正文

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

2019-11-21 00:52:35
字体:
来源:转载
供稿:网友
绑定事件
复制代码 代码如下:

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事件的一览表
typeBubbling phaseCancelableTarget node typesDOM interface
DOMActivateYesYesElementUIEvent
DOMFocusInYesNoElementUIEvent
DOMFocusOutYesNoElementUIEvent
focusNoNoElementUIEvent
blurNoNoElementUIEvent
textInputYesYesElementTextEvent
clickYesYesElementMouseEvent
dblclickYesYesElementMouseEvent
mousedownYesYesElementMouseEvent
mouseupYesYesElementMouseEvent
mouseoverYesYesElementMouseEvent
mousemoveYesYesElementMouseEvent
mouseoutYesYesElementMouseEvent
keydownYesYesElementKeyboardEvent
keyupYesYesElementKeyboardEvent
mousemultiwheelYesYesDocument, ElementMouseMultiWheelEvent
mousewheelYesYesDocument, ElementMouseWheelEvent
DOMSubtreeModifiedYesNoDocument, DocumentFragment, Element, AttrMutationEvent
DOMNodeInsertedYesNoElement, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstructionMutationEvent
DOMNodeRemovedYesNoElement, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstructionMutationEvent
DOMNodeRemovedFromDocumentNoNoElement, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstructionMutationEvent
DOMNodeInsertedIntoDocumentNoNoElement, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstructionMutationEvent
DOMAttrModifiedYesNoElementMutationEvent
DOMCharacterDataModifiedYesNoText, Comment, CDATASection, ProcessingInstructionMutationEvent
DOMElementNameChangedYesNoElementMutationNameEvent
DOMAttributeNameChangedYesNoElementMutationNameEvent
loadNoNoDocument, ElementEvent
unloadNoNoDocument, ElementEvent
abortYesNoElementEvent
errorYesNoElementEvent
selectYesNoElementEvent
changeYesNoElementEvent
submitYesYesElementEvent
resetYesYesElementEvent
resizeYesNoDocument, ElementUIEvent
scrollYesNoDocument, ElementUIEvent
作者:Ruby's Louvre
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表