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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值