js中event事件对象的兼容问题以及坐标属性-(clientX clientY;pageX,pageY,offsetX,offsetY)
这些天好好研究了下事件这部分的知识,个人觉得基础决定了高度。所有这段时间虽然没有工作,但是能够静下心来好好研究一下基础的东西还是不错的。心情也很不错的。所以呐,今天总结了下事件当中event属性。
1,首先我们来说一下event属性的兼容问题,在标准浏览器下我们直接传event就好。但是在非标准浏览器下,没有这个属性我们要用window.event;所有呐一旦我们用到event属性的时候一定要注意兼容问题。
2,event事件源的兼容问题:我们知道我们给哪个元素绑定了事件,那么这个事件就是事件源,那么,当我们用事件委托来实现一些功能的时候,我们必须要知道我们的事件源。在标准浏览器下我们用event.target来指定。在非标准浏览器下,我们用event.srcElement;
var oDiv = document.getElementById("box"); oDiv.onclick = function (e) { e = e || window.event; //e.target或者e.srcElement:事件源。 e.pageY = e.pageY || (document.documentElement.scrollTop); e.target = e.target || e.srcElement; e.preventDefault ? e.preventDefault() : e.returnValue = false;
//当然我们阻止时间冒泡还有一个方法,在事件的绑定函数中return false; e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; }
3,以上代码还有一些其他的兼容问题.例如取消事件的默认行为preventDefault-标准,returnValue = false-非标准。阻止事件的冒泡传递:stopPropagation-标准,cancelBubble-非标准。这些大家就自动扩展吧。还有一个e.stopImmediatePropagation,取消相同类型事件的所有监听函数的传播-意思就是我们用addEventListener给cilck事件绑定多个处理函数,当我们用了这个属性那么,所有的处理函数的冒泡传递被阻止。
4,接下里我们说一下clientX,cilentY:相对于浏览器的可视窗口的x,y坐标。offsetX,offsetY:相对于事件源的x,y坐标,个人感觉这两个是最常用的。以下是借鉴网上的图片。