JavaScript---DOM---高级事件---1.8

注册事件（绑定事件）

给元素添加事件称为注册事件或绑定事件。注册事件有两种方式：传统方式、方法监听注册方式。

传统注册方式：

利用on开头的事件onclick：

<button onclick="alert(hi~)"></button> 
btn.onclick = function() {}

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

方法监听注册方式：

addEventListener()： w3c标准  推荐方式
（IE9之前的IE不支持此方法，可使用attachEvent()代替）

btns[1].addEventListener('click',function(){
})

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

该方法接收三个参数：

• type：事件类型是字符串，比如click、mouseover，注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值(默认false)。学完DOM事件流后再进一步学习

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

删除事件（解绑事件）

传统注册方式：

eventTarget.onclick = null;

<div>1</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert(11);
        divs[0].onclick = null;
</script>

方法监听注册方式：

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

<div>1</div>
<script>
    divs[0].addEventListener('click',fn);// 里面的fn 不需要调用加小括号
    function fn() {
        alert(22);
        divs[0].removeEventListener('click',fn);
    }
</script>

DOM事件流

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

比如我们给一个div注册了点击事件，DOM事件流分为3个阶段：

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

        

注意

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

事件对象

什么是事件对象

• 官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。event就是一个事件对象，写到我们侦听函数的小括号里面，当形参来看。
• 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
• 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。
• 这个事件对象可以自己命名，比如event、evt、e等等。

<div>123</div>
<script>
    var div = document.querySelector('div');
    // 传统方式
    // div.onclick = function(event) {
    //     console.log(event);
    // }
    // 事件监听方法
    div.addEventListener('click', function(event){
        console.log(event);
    })
</script>

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

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

<a href="https://www.baidu.com/">百度</a>
<script>
    var a = document.querySelector('a');
    a.addEventListener('click', function(e){
        e.preventDefault();
    })
    a.onclick = function(e) {
        e.preventDefault();
        // return false;//return 后面的代码不会执行,只限于传统注册方式
    }
</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);
    var father = document.querySelector('.father');
    father.addEventListener('click',function() {
        alert('father');
    },false);
    document.addEventListener('click',function() {
        alert('document');
    })
</script>

事件委托（代理、委派）

事件冒泡本身的特性会带来坏处，也会带来好处，需要我们灵活掌握。程序中也有如此场景：

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

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

事件委托的原理

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

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

<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e) {
        // alert('知否知否，应该有弹框在手');
        e.target.style.backgroundColor = 'pink';
    })
</script>

事件委托的作用

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

常用的鼠标事件

禁止鼠标右键菜单

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

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

禁止鼠标选中(selectstart开始选中)

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

鼠标事件对象

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

<style>
    body {height: 2000px;}
</style>
<script>
    // 鼠标事件对象 MouseEvent
    document.addEventListener('click',function(e) {
        // 1.client 鼠标在可视区的x和y坐标
        console.log(e.clientX);
        console.log(e.clientY);
        // 2.page 鼠标在页面 文档的x和y坐标
        console.log(e.pageX);
        console.log(e.pageY);
        // 3.screen 鼠标在电脑屏幕的×和y坐标
        console.log(e.screenX);
        console.log(e.screenY);
    });
</script>

案例：跟随鼠标移动的小天使

• 鼠标不断的移动，使用鼠标移动事件：mousemove。
• 在页面中移动，给document注册事件。
• 图片要移动距离，而目不占位置，使用绝对定位即可。
• 核心原理：每次鼠标移动，都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片。

<style>
    img { width: 100px; height: 80px; position: absolute; }
</style>

<img src="images/angle.gif" alt="">
<script>
    var pic = document.querySelector('img');
    // mousemove只要我们鼠标移动 1px 就会触发这个事件
    document.addEventListener('mousemove',function(e) {
        var x = e.pageX;
        var y = e.pageY;
        console.log('x坐标是'+ x,'y坐标是'+ y);
        // 千万不要忘记给left和top添加 px单位
        pic.style.left = x - 50 + 'px';
        pic.style.top = y - 40 + 'px';
        // pic.style.cursor = 'none';
    }); 
</script>

 

常用的键盘事件

<script>
    // document.onkeyup = function() {
    //     alert('我弹起来了~');
    // }
    document.addEventListener('keyup',function() {
        console.log('我弹起来了~');
    })
    document.addEventListener('keydown',function() {
        console.log('我按下了down~');
    })
    document.addEventListener('keypress',function() {
        console.log('我按下了press~');
    })
</script>

注意：

• 如果使用addEventListener不需要加on。
• 三个事件的执行顺序是：keydown - keypress - keyup。

keyCode属性

注意：

• onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
• 在实际开发中，我们更多使用keydown和keyup，它能识别所有的键（包括功能键）。
• Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。

<script>
    // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function(e) {
        console.log('up' + e.keyCode);
        //我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
        if (e.keyCode === 65) {
            alert('您按下的a键');
        } else {
            alert('您没有按下a键');
        }
    });
    document.addEventListener('keypress', function(e) {
        console.log('press' + e.keyCode);
    })
</script>

案例：模拟京东按键输入内容

• 核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面。
• 使用键盘事件对象里面的keyCode判断用户按下的是否是s键。
• 搜索框获得焦点：使用js里面的focus()方法。

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

案例：模拟京东快递单号查询

当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。

• 快递单号输入内容时，上面的大号字体盒子(con)显示（这里面的字号更大）。
• 表单检测用户输入：给表单添加键盘事件。
• 同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容。
• 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子。
• keydown和keypress在文本框内的特点：事件触发时，文字还没有落入文本框中。
• keyup事件触发时，文字已经落入文本框中。
• 当我们失去焦点，就隐藏这个con盒子
• 当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

<style>
    * {padding: 0;margin: 0;}
    .search {position: relative;width: 178px;margin: 100px;}
    .con {display: none;position:absolute;top:-40px;width:171px;
          border:1px solid rgba(0,0,0,.2);
          box-shadow:0 2px 4px rgba(0,0,0,.2);
          padding:5px 0;font-size:18px;line-height:20px;color:#333;
    }
    .con::before {content:'';width:0;height:0;position:absolute;
          top:28px;left:18px;border:8px solid #000;
          border-style:solid dashed dashed;
          border-color:#fff transparent transparent;
    }
</style>

<div class="search">
    <div class="con">123</div>
    <input type="text" class="jd" placeholder="请输入您的快递单号">
</div>
<script>
    var con = document.querySelector('.con');
    var jd_input = document.querySelector('.jd');
    jd_input.addEventListener('keyup', function() {
        if(this.value == '') {
            con.style.display = 'none';
        } else {
            con.style.display = 'block';
            con.innerText = this.value;
        }
    })
    jd_input.addEventListener('blur',function() {
        con.style.display = 'none';
    })
    jd_input.addEventListener('focus',function() {
        if(this.value !== '') {
            con.style.display = 'block';
        }
    })
</script>