JavaScript中的事件

云淡风轻的博客
157 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

什么是事件

在js听事件表示用户与浏览器和网页的交互

通过给事件绑定回调函数, 当事件发生后, 回调函数就会被调用, 完成用户交互

绑定事件的方式

第一种通过元素属性绑定事件

在标签上设置属性来绑定事件, 如绑定onclick事件

同一个事件只能指定一个回调函数

第二种通过DOM对象绑定事件

在js代码中, 通过获取dom对象, 给dom对象的事件指定回调函数来完成绑定

同一个事件只能指定一个回调函数

第三种通过addEventListener绑定事件

在js代码中, 通过获取dom对象, 通过addEventListener方法给事件绑定回调函数

并且可能通过removeEventListener移除事件

同一个事件只能指定多个回调函数

    <script>

        function btnClick() {
            alert('tag attr click');
        }
        window.onload = function() {
            function click3() {
                alert('dom attr click');
            }

            document.getElementById('btnClick2').onclick = click3;

            function click1() {
                alert('addEventListener click1');
            }

            function click2() {
                alert('addEventListener click2');
            }

            // 添加事件
            document.getElementById('btnClick3').addEventListener('click', click1)

            // 添加事件
            document.getElementById('btnClick3').addEventListener('click', click2)

            // 移除事件
            document.getElementById('btnClick3').removeEventListener('click', click1);

        }
    </script>
</head>
<body>
    <button onclick="btnClick()">点一下</button>
    <button id="btnClick2">点一下2</button>
    <button id="btnClick3">点一下3</button>
</body>

事件对象

Event, 在给事件绑定回调函数时, 这个回调函数都会有一个参数, 也就是event对象

通过这个对象我们可以获取事件的一些信息, 也可以访问事件的一些方法

target: 绑定这个事件的元素

type: 事件的类型, 如click, mousemove

stopPropagation(): 调用事件的这个方法, 可以取消事件的冒泡, 也就是只有捕获阶段和目标阶段, 没有冒泡阶段了

preventDefault(): 调用事件的这个方法, 可以取消一些默认行为

事件的传播

事件处理的三个阶段

  1. 捕获阶段, 从window对象开始, 查看哪个元素绑定了该事件
  2. 目标阶段, 查找到目标元素, 执行绑定的响应函数
  3. 冒泡阶段, 与捕获阶段相反, 在这个过程中如果元素绑定了事件, 则会被执行

stopPropagation取消事件冒泡

    <div id="container">
        <button id="btnClick4">查看事件对象</button>
    </div>

            document.getElementById('container').onclick = function(e){
                alert('container click');
            }

            // document.getElementById('container').onmousemove = function(e){
            //     alert('container mousemove');
            // }

            document.getElementById('btnClick4').onclick = function(e){
                alert('btnClick4 click')
                e.stopPropagation();
            }

preventDefault取消默认行为

如我们点击a标签时, 默认会跳转到href所指向的地址, 如果调用preventDefault该方法, 则不会进行跳转

<a href="http://www.baidu.com" id="baidu">百度一下</a>
document.getElementById('baidu').onclick = function(e) {
    e.preventDefault();
    console.log('a click');
}
avatar
文章
阅读
粉丝