JavaScript Event事件对象

最新推荐文章于 2024-05-30 15:07:12 发布

blankです

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量277

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_47782618/article/details/124433501

版权

1. Event对象属性

1.1 Event.currentTarget和Event.target

Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。

Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。

事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象。

<head>
    <style>
        #myDiv{
            background-color: red; 
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <button id="myButton">button</button>
    </div>
    <script>
        myDiv = document.getElementById("myDiv");
        myButton = document.getElementById("myButton");
        // 事件冒泡流，先button后div
        myDiv.onclick = function(e){
            console.log(e.currentTarget);    // <div id="myDiv">…</div>
            console.log(e.target);    // <button id="myButton">button</button>
        };
        myButton.onclick = function(e){
            console.log(e.currentTarget);    // <button id="myButton">button</button>
            console.log(e.target);    // <button id="myButton">button</button>
        };
    </script>
</body>

使用target属性获得并操作元素的属性：

<body>
    <p id="myP">myP</p>
    <script>
        var myP = document.getElementById("myP");
        myP.onclick = function(e){
            e.target.innerHTML = "myNewP";
            e.target.style.color = "red";
        };
    </script>
</body>

1.2 Event.type

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读。

<body>
    <button id="myButton">button</button>
    <script>
        myButton = document.getElementById("myButton");
        myButton.onclick = function(e){
            console.log(e.type);    // click
        };
    </script>
</body>

2. Event对象方法

2.1 Event.preventDefault()

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

<body>
    <a href="www.baidu.com" id="myA">跳转</a>
    <script>
        myA = document.getElementById("myA");
        myA.onclick = function(e){
            e.preventDefault(); // 阻止默认事件
        };
    </script>
</body>

2.2 Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

2.2.1 防止事件冒泡流

<head>
    <style>
        #myDiv{
            background-color: red; 
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <button id="myButton">button</button>
    </div>
    <script>
        myDiv = document.getElementById("myDiv");
        myButton = document.getElementById("myButton");
        myDiv.onclick = function(e){
            console.log("myDiv");
        };
        myButton.onclick = function(e){
            console.log("myButton");
            e.stopPropagation();    // 阻止事件冒泡
        };
    </script>
</body>

2.2.2 防止事件捕获流

<head>
    <style>
        #myDiv{
            background-color: red; 
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <button id="myButton">button</button>
    </div>
    <script>
        myDiv = document.getElementById("myDiv");
        myButton = document.getElementById("myButton");
        myDiv.addEventListener('click',function(e){
            console.log("myDiv");
            e.stopPropagation();    // 防止事件捕获
        },true);
        myButton.addEventListener('click',function(e){
            console.log("myButton");
        },true);
    </script>
</body>