首页 > 编程语言 > 详细

Javascript 事件对象

时间:2019-09-25 17:57:37      阅读:93      评论:0      收藏:0      [点我收藏+]

定义 :当注册一个事件的时候,系统会生成一个对象来记录事件触发时的一些信息,比如鼠标坐标,按键信息

document.querySelector('#box').onclick = function(e) {
    //IE8不需要传递参数,直接用window.event获取
   //最新的谷歌和火狐也支持window.event
    var e = e || window.event;
    console.log(event);
}

1.点击位置的坐标信息

e.offsetX/e.offsetY:距离当前元素边框的距离
e.clientX/e.clientY:距离浏览器边框的可视距离
e.pageX/e.pageY:距离浏览器边框的距离(加上被滚动条隐藏的距离)
e.screenX/e.screenY:距离屏幕边框的距离
技术分享图片

2.获取触发事件的元素

这个元素就是最内层的元素
标准浏览器 e.target
IE8浏览器 e.srcElement (最新的标准浏览器也支持这个)

//兼容写法
document.querySelector('#box').onclick = function(e) {
    //IE8不需要传递参数,直接用window.event获取
    var e = e || window.event;
    var target = e.target || e.srcElement;
}

3.阻止默认事件

标准浏览器 e.preventDefault();
IE8浏览器 e.returnValue = false; (最新的谷歌火狐浏览器也支持这个,IE8以上不支持,奇葩)

<body>
    <a href="http://www.baidu.com/">百度一下</a>
</body>
<script>
window.onload = function(){
    var a = document.querySelector('a');
    a.onclick = function(e){
        e = e || window.event
        if (e.preventDefault) {
            //iE8没有这个属性,有这个属性的都是更高级的浏览器
            e.preventDefault();//阻止默认
        } else {
            //IE8
            e.returnValue = false;//阻止默认
        }
    }    
}
</script>

4.阻止冒泡

标准浏览器 e.stopPropagation()
IE8浏览器 e.cancelBubble=true; (最新的标准浏览器也支持这个)

<body>
    <div>
        <p>我是p标签</p>
    </div>
</body>
<script>
window.onload = function(){
    var div = document.querySelector('div')
    div.onclick=function(){
        console.log('点击了div标签')
    }
    var p = document.querySelector('p')
    p.onclick = function(e){
        console.log('点击了p标签')
        e = e || window.event
        // 通过e.preventDefault来判断是否是高级的浏览器
        if (e.preventDefault) {
            e.stopPropagation(); //阻止冒泡
        } else {
            //IE8
            e.cancelBubble = true; //阻止冒泡
        }
    }    
}
</script>

5.return false

return false可以阻止默认事件,但不能阻止冒泡

<body>
    <div>
        <a href="http://www.baidu.com/">百度一下</a>
    </div>
</body>
<script>
window.onload = function(){
    var div = document.querySelector('div')
    div.onclick=function(){
        console.log('点击了div')
    }
    var a = document.querySelector('a')
    a.onclick = function(e){
        return false
    }    
}
</script>

点击 "百度一下" ,页面不会跳转,说明默认行为被终止了。但是控制台还是会打印 "点击了div" 说明不能阻止冒泡

注意:如果是用addEventListener添加事件监听,不能使用return false来阻止默认事件。要用e.preventDefault()

var a = document.querySelector('a')
a.addEventListener('click',function(e){
    e = e || window.event
    return false // 不能阻止a链接跳转
})
var a = document.querySelector('a')
a.addEventListener('click',function(e){
    e = e || window.event
    e.preventDefault()
})

6.html中的事件对象

html中的事件对象触发的函数包含一个event参数,可通过event直接访问事件对象

<button onclick="func(event)" id="btn">点我</button>
function func(event){
    console.log(event.target);
}

Javascript 事件对象

原文:https://www.cnblogs.com/OrochiZ-/p/11585851.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!