【前端】JavaScript-事件高级

目录

一、事件高级

注册事件（绑定事件）

1.传统注册方式

2.方法监听注册事件

删除事件（解绑事件）

1.删除事件的方式

DOM事件流

事件对象

阻止事件冒泡

事件委托（代理、委派）

常用的鼠标事件

鼠标事件对象

常用的键盘事件

---

一、事件高级

注册事件（绑定事件）

给元素添加事件。称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

1.传统注册方式

利用on开头的事件

特点：注册事件的唯一性，即同一个元素同一个事件只设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

2.方法监听注册事件

• W3C标准推荐方式
• addEvent.listener()它是一个方法
• IE9之前的IE不支持此方法，可使用attachEvent()代替

 特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。

语法：

        目标对象.addEventListener(type,listener[,useCapture]) //将指定的监听器注册到eventTarget上，当该对象触发指定的事件时，就会执行事件处理函数

该方法接收三个参数：

type：事件类型字符串，比如click、mouseover，注意这里不要带on

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认是false。

实例：

        var btns = document.querySelectorAll('button')
        btns[1].addEventListener('click', function () {
            alert(22);
        })

删除事件（解绑事件）

1.删除事件的方式

        var divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
            alert(11);
            //1.传统方式删除事件
            divs[0].onclick = null;
        }
        //2.removeEventListener删除事件
        divs[1].addEventListener('click', fn);//里面的fn不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
• 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

注意：

1. JS代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick和attachEvent只能得到冒泡阶段
3. addEventListener(type,listener[,useCapture])第三个参数如果时true，表示在事件捕获阶段调用事件处理程序；如果时false（不写默认就是false），表示事件冒泡阶段调用事件处理程序。
4. 实际开发中更关注事件冒泡。
5. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

事件对象

       //事件对象
        var div = document.querySelector('div');
        //1.传统事件       
        div.onclick = function (event) {
            console.log(event);
        }
        div.addEventListener('click', function (event) {
            console.log(event);
        })

1. event就是一个事件对象，写到我们侦听函数的小括号里面。当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象是我们事件的一系列相关数据的集合，跟事件相关的
4. 这个事件对象我们可以自己命名，比如event、evt、e
5. 事件对象有兼容性问题，ie678事件对象必须写window.event兼容性写法 e=e||window.event

事件对象的常见属性和方法：

        //常见事件对象的属性和方法
        //1.e.target返回的是触发事件的对象(元素)  this返回的是绑定事件的对象（元素）
        //区别：e.target点击了哪个元素就返回哪个元素，this哪个元素绑定了这个点击事件，就返回谁
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);
        })

阻止事件冒泡

组织事件冒泡的两种方式：

• 标准写法：利用事件对象里面的stopPropagation()方法
• 非标准写法：IE6-8利用事件对象e.cancelBubble=true;

事件委托（代理、委派）

原理：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

作用：

只操作了一次DOM，提高了程序的性能。

实例：

    <ul>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
    </ul>
    <script>
        //事件委托
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            //alert('知否知否，应是绿肥红瘦')
            e.target.style.backgroundColor = 'skyblue';
        }, true)
    </script>

常用的鼠标事件

1.禁止鼠标右键

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })

2.禁止鼠标选中（selectstart开始选中）

        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。 

常用的键盘事件

 

注意：

1. keyup和keydown不区分字母大小写a和A都是65
2. keypress区分字母大小写，但是不识别功能键