登录
原创

javascript-事件对象

发布于 2021-07-16 阅读 133
  • 前端
  • JavaScript
原创

事件对象的获取

元素对象绑定事件时,在函数的小括号()里面写 e 或者 event evt,事件对象里面包含了改事件的各种信息:事件类型、触发事件元素、触发事件时鼠标位置等等、、、

eg:

ul.onclick = function(e) {
    console.log(e);
}

控制台打印结果:

image.png

注意:

  1. 事件对象是先有事件,然后写e获得事件对象,
  2. 不用传参,javascript本身定义好了e
  3. ie9以下不能识别e,需用 window.event 获取事件对象,兼容性可以用:e = e || window.event;

e.target 和 this 的区别

e.target- - -触发事件的元素
this- - -绑定事件的元素

兼容性:
e.target在ie9以下不能识别,ie9以下用e.srcElement;
e.currentTarget 相当于 this,但是ie9以下不能识别currentTarget ,this无兼容性问题

有时,触发事件的元素 和 绑定事件的元素 不一样,例如:父元素绑定了事件,子元素没有绑定事件,点击了子元素,根据时间事件冒泡,执行了父元素绑定的事件,此时,触发事件的元素 和 绑定事件的元素就不一样

事件对象常用属性和方法

阻止默认事件:e.preventDefault();

ie9以下不能识别preventDefault()方法,使用属性- - -e.returnValue;(这个属性ie9以上也不能识别)

还有一种方法:return false;这个没有兼容性,但是后面的代码不执行了,且只限于传统的事件注册方式

例如:点击链接,不跳转;点击按钮不提交、、、

示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止默认行为</title>
</head>

<body>
    <a href="https://www.baidu.com/">百度一下你就知道</a>
    <script>
        var a = document.querySelector('a');
        a.onclick = function(e) {
            e.preventDefault();
        }
    </script>
</body>

</html>

阻止事件冒泡:e.stopPropagation()

ie9以下不能识别stopPropagation()方法,需使用属性:e.cancelBubble = true;

评论区

零00
4粉丝

时光荏苒,我自清欢

0

0

0

举报