javascript二——事件

注册事件（绑定事件）

概述：

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

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

传统注册方式	方法监听注册方式
利用on开头的事件，如onclick	w3c标准 推荐方式
	addEventListener() 它是一个方法
btn.onclick = function(){}	IE9 之前的IE不支持此方法，可用attachEvent()代替
特点：注册事件的唯一性	特点：同一个元素同一个事件可以注册多个监听器
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数	按注册顺序依次执行

addEventListener 事件监听方式

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

该方法接收三个参数：

• type:事件类型字符串，比如click,mouseover,注意这里的不带on
• **listener:**事件处理函数，事件发生时，会调用该监听函数
• **useCapture:**可选参数，是一个布尔值，默认false,学完DOM事件流后再深入

    <button>传统注册</button>
    <button>方法监听注册</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1.传统
        btns[0].onclick = function() {
                alert('我是传统');
            }
            //2.事件监听注册
        btns[1].addEventListener('click', function() {
                alert('我是事件监听');
            }) //同一元素可加多个
        btns[1].addEventListener('click', function() {
            alert('66');
        })
    </script>

删除事件（解绑事件）

删除事件的方式

传统注册方式

eventTarget.οnclick=null;

方法监听注册方式

eventTarget.removeEventListener(type,listener[,useCapture]);

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

        function fn() {
            alert(22);
            //方法监听注册方式删除
            divs[1].removeEventListener('click', fn);
        }
    </script>

---

DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件:

DOM事件流分为3个阶段：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1eorxow-1648139745083)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220324152116957.png)]

1. JS代码只能执行捕获或者冒泡其中的一个阶段
2. onclick 和 attachEvent(ie) 只能得到冒泡阶段
3. 捕获阶段 如果addEventListener 第三个参数时true 那么则处于捕获阶段
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //事件捕获
        // body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);

        //冒泡阶段
        //son -> father -> body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

---

事件对象

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(event) {
            console.log(event);
        }
        div.addEventListener('click', function(e) {
                console.log(e);
            })
            //1.event 就是一个事件对象 写到我们监听函数的()里 当形参来看
            //2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
            //3.事件对象是事件的一系列相关数据的集合 跟事件相关的。例如鼠标点击里面就包含了鼠标的相关信息。
            //如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了哪个键
    </script>

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

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准 ie6-8使用
e.type	返回事件的类型 比如 click mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准 ie6-8使用
e.returnValue	该方法阻止默认事件(默认行为) 非标准 ie6-8使用 比如不让链接跳转
e.preventDefault()	该方法阻止默认事件(默认行为) 标准 比如不让链接跳转
e.stopPropagation()	阻止冒泡 标准

e.target 和 this 的区别：

e.target 点击了哪个元素，就返回那个元素

this 哪个元素绑定了这个点击事件，那么就返回谁

    <div>123</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //e.target 返回的是触发事件的对象（元素）
        //this 返回的是绑定事件的对象（元素）
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })
    </script>

事件阻止默认行为

    <div>123</div>
    <a href="http://felikschen.vcn.ink/">我的主页</a>
    <form action="http://felikschen.vcn.ink/">
        <input type="submit" name="sub" value="提交">
    </form>
    <script>
        //阻止默认行为：链接不跳转 或 提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault(); //DOM 标准写法
        })
    </script>

---

阻止事件冒泡

两种方式

事件冒泡∶开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

阻止事件冒泡

• 标准写法：利用事件对象里面的stopPropagation()方法

    <div class="father">
        <div class="son">son盒子</div>
    </div>
<script>
    	var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation();
        }, false);
</script>

• 非标准写法，兼容IE678 e.cancelBubble = true;

---

事件委托（代理、委派）

事件委托也称为事件代理，在jQuery里面称为事件委派。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景∶
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如?
**解决方案:**∶快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势︰快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。

 <ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。

事件委托的原理

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

以上案例:给ul注册点击事件，然后利用事件对象的target 来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

委托的作用

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

    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('feliks');
            for (var i = 0; i < ul.children.length; i++) {
                this.children[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'pink';
        })
    </script>

---

常用的鼠标事件

1. 禁止鼠标右键菜单

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

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

2. 禁止鼠标选中(select start 开始选中)

    我是一段不愿意被分享的文字
    <script>
        //1.禁止右键
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
        //2.禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>

---

鼠标事件对象

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

    <script>
        //鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            //1. client 相对于可视区域
            console.log(e.clientX);
            console.log(e.clientY);
            //2. page 相对于文档页面的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            //3.screen 相对于文档页面的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

跟随鼠标

<style>
    img {
        position: absolute;
    }
</style>

<body>
    <img src="../../images/睁眼.png" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // console.log(e);
            //核心原理：每次移动鼠标，获得最新的鼠标坐标，把这个x,y作为图片的left和top即可
            var x = e.pageX;
            var y = e.pageY;
            //记得加 单位px
            pic.style.left = x + 'px';
            pic.style.top = y + 'px';
        })
    </script>

常用的键盘事件

键盘事件	触发条件
onkeyup	某个键被松开时触发
onkeydown	某个键被按下时触发 可识别功能键
onkeypress	某个键被按下时触发 但是它不识别功能键 如ctrl shift箭头等

    <script>
        //1.keyup 键盘弹起触发
        document.addEventListener('keyup', function() {
                console.log('我弹起了');
            })
            //2.onkeydown 键盘按下触发
        document.addEventListener('keydown', function() {
                console.log('我按下了');
            })
            //press
        document.addEventListener('keypress', function() {
            console.log('我按下了press');
        })
    </script>

执行顺序：

keydown–>keypress–>keyup

    <script>
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('keyup' + e.keyCode);
            //1. keyup 和 keydown事件不区分字母大小写
            //2. keypress 区分
            if (e.keyCode == 65) {
                alert('a');
            }
        })
        document.addEventListener('keypress', function(e) {
            console.log('press' + e.keyCode);
        })
    </script>

按键输入内容案例

核心思路∶

1. 检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面

2. 使用键盘事件对象里面的keyCode判断用户按下的是否是s键

3. 搜索框获得焦点:使用js 里面的 focus)方法

    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode == 83) {
                search.focus();
            }
        })
    </script>

---

快递单号查询案例

1. 快递单号输入内容时，上面的大号字体盒子( con )显示(这里面的文字
2. 同时把快递单号里面的值( value )获取过来赋值给con盒子( innerText )做为内容
3. 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
4. 注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入到文本框中
5. keyup事件触发的时候，文字已经落入文本框里面了

<style>
    .con {
        display: none;
    }
</style>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入快递单号" class="jd">
    </div>
    <script>
        //
        var con = document.querySelector('.con');
        var jd_ipt = document.querySelector('.jd');
        jd_ipt.addEventListener('keyup', function() {
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerHTML = this.value;
                }
            })
            //失去焦点，隐藏盒子
        jd_ipt.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            //获得焦点，隐藏盒子
        jd_ipt.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>