JavaScript事件

最新推荐文章于 2023-07-09 21:06:34 发布

《 L 》

最新推荐文章于 2023-07-09 21:06:34 发布

阅读量346

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52273362/article/details/126627803

版权

一、事件的绑定方式

1. 事件属性方式<div onclick = "fun()"></div>

2. 赋值式div.onclick = function(){}

3. 事件监听：兼容IE7、8，ele.attachEvent(事件类型，事件处理函数)，解决方法是在事件类型前加'on':div.addEventlistener('click',function(){})

三种方式的区别：

（1）事件赋值与事件监听相比于事件属性，实现了结构与行为分离

（2）事件赋值与事件监听：事件监听方式中后面的时间不会覆盖前面的事件（在事件源和事件类型相同的情况下）

4. 事件解绑：

（1）解绑赋值式绑定事件,例：btn.onclick = null

（2）解绑事件监听，例：btn.removeEventListener('click',事件处理函数名称)

事件赋值与事件监听案例：

<!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>Document</title>
</head>

<body>
    <button onclick="alert()">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        //获取按钮2
        var btn1 = document.querySelectorAll('button')[1]
        console.log(btn1);
        btn1.onclick = function () {
            alert('事件赋值1')
        }
        btn1.onclick = function () {//覆盖上面的事件1
            alert('事件赋值2')
        }

        //获取按钮3
        var btn2 = document.querySelectorAll('button')[2]
        function fun1() {
            alert('事件监听1')
        }
        function fun2() {
            alert('事件监听2')
        }

        //监听事件
        btn2.addEventListener('click', fun1)
        btn2.addEventListener('click', fun2)

        // btn2.removeEventListener('click', fun1)

    </script>
</body>

</html>

二、事件传播

1. 嵌套的元素，事件会传播

2. 事件传播方向问题

（1）事件冒泡：从事件目标对象开始-->window对象结束，由内向外传播的事件方式称为事件冒泡（默认的传播行为）

（2）事件捕获：由外向内传，window对象-->事件目标对象

3. 事件监听第三个参数设置true表示事件捕获，默认false表示事件冒泡

4. 阻止事件传播：e.stopPropagation(),兼容ie浏览器：e.cancelBubble = true

语法：e.stopPropagation?e.stopPropagation():e.cancelBubble = true

三、事件委托（事件代理）

1. 利用冒泡原理实现

2. 事件委托使用场景

（1）当要给多个元素循环绑定事件的时候可以考虑使用事件委托简化操作（不支持冒泡事件的不能使用，例如：焦点事件）

（2）优点：减少了事件绑定的数量；对后面动态创建的元素依然有效；解决动态添加的元素节点无法绑定事件的问题

（3）缺点：事件委托基于冒泡，对于不冒泡的事件不支持，层级过多，冒泡过程中可能被某层阻止；理论上委托导致浏览器频繁调用处理函数，虽然可能不需要处理，所以建议就近委托，比如在table上代理td，而不是document上代理td；把所有事件都用代理就可能出现事件误判，比如在document中代理了所有button的click事件，另外的人在引用js时不知道，造成click点击后触发两个事件。

四、阻止默认行为

1. 默认行为：比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么而不是直接跳转链接，那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件

2. 两个方法来阻止默认事件：

（1）e.preventDefault():非IE使用

（2）e.returnValue = false ：IE使用

综合起来使用就是：e.preventDefault ? e.preventDefault : e.returnValue = false;