javaScript代码：事件对象event/e

最新推荐文章于 2021-08-16 10:43:29 发布

八千部下

最新推荐文章于 2021-08-16 10:43:29 发布

阅读量222

点赞数

分类专栏： JS学习前端

本文链接：https://blog.csdn.net/caicai89tu/article/details/51902415

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JS学习

4 篇文章 0 订阅

订阅专栏

通过该代码，介绍两种常见的事件对象属性target和type，两种常见的事件对象方法stopPropagation()和preventDefault()。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>

<body>
    <div id="div">
        <button id="btn1" onclick="demo()">按钮</button>
        <a id="aid" href="http://www.baidu.com">百度</a>
    </div>

    <script>
        document.getElementById("btn1").addEventListener("click", showType);
        document.getElementById("div").addEventListener("click", showDiv);//只点击了button，但是因为时间冒泡机制，还是会执行div的事件
        document.getElementById("aid").addEventListener("click", showA);
        function showType(event) {
            //alert(event.Type); //获取事件的属性
            alert(event.target); //获取事件的target
            //event.stopPropagation(); //这句话可以阻止事件冒泡，如点击button不再执行关于div的事件
        }
        function showDiv() {
            alert("div");
        }
        function showA(event) {
            event.stopPropagation();
            event.preventDefault(); //阻止事件的默认行为，比如此处可以阻止<a>元素的自动跳转到百度
        }
    </script>
</body>
</html>