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坐标，个人感觉这两个是最常用的。以下是借鉴网上的图片。

 

转载于:https://www.cnblogs.com/hjdjs/p/6519396.html