javascript事件

Posted 2020-06-21

事件，本来挺简单的，但是在javascript确是个麻烦的事情。最重要的原因是兼容性。首先我们看看javascript事件有哪些兼容性问题，以及如何处理这些兼容性。

事件的兼容性一览

• addEventListener(type, eventHandle, useCapture)、attachEvent(“on”+ type, eventHandler) // w3c

      removeEventListener(type, eventHandle, useCapture) 、detachEvent(“on”+ type, eventHandle) // IE

tip: addEventListener中第三个参数为true时，捕获时触发，false时候为冒泡时触发。

function addEvent(elem, type, eventHandle, useBubble){
	if(elem.addEventListener){
		elem.addEventListener(type, eventHandle, useBubble);
	}else if(elem.attachEvent){
		elem.attachEvent(“on”+type, eventHandle);
	}
}

function removeEvent(elem, type, eventHandle, useCapture){
	if(elem.removeEventListener){
		elem.removeEventListener(type, eventHandle, useCapture);
	}else if(elem.detachEvent){
		elem.detachEvent(type, eventHandle);
	}
}

• target、srcElement

IE9以下不支持event.target

function filter(event){
	if(!event.target){
		event.target = event.srcElement || document;
	}
}

• keyCode、which、charCode的兼容性

在IE下：
>> 支持keyCode
>> 不支持which和charCode,二者值为 undefined
在Firefox下：
>> 支持keyCode，除功能键外，其他键值始终为 0
>> 支持which和charCode，二者的值相同
在Opera下：
>> 支持keyCode和which，二者的值相同
>> 不支持charCode，值为 undefined

兼容处理：

function filter(event){
        if(event.which == null){

                event.charCode != null ? event.charCode : event.keyCode;

        }
        return event.which;

}

• pageX、pageY

兼容处理：

function filter(event){
	var eventDoc = event.target.ownerDocument || document;
	var doc = eventDoc.documentElement;
	bar body = eventDoc.body;
	event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
	event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop) + (doc && doc.clientTop || body && body.clientTop);
}

• relatedTarget、fromElement、toElement相关元素

DOM通过event对象的releatedTarget属性获取相关元素信息。这个属性只针对mouseover/mouseenter和mouseout才包含值。

IE不支持releatedTarget,但是支持fromElement或者toElement。

function filter(event){
	if(!event.relatedTarget && event.fromElement){
		event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
	}
}