webApi08

---

小概

本章的学习内容 ：阻止a标签默认跳转，addEventListener方法（removeEventListener方法），事件冒泡详解，事件捕获，事件类型，键盘事件及获取按键，DOM案例练习

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.阻止a标签默认跳转

1.在html中，有些标签有自己的默认事件。
2.a标签有两个默认的特点。
(1)自带点击跳转事件
(2)自带hover小手样式 : 提醒用户可以点击
3.阻止a标签默认跳转 ： 有些情况下，希望a标签只保留hover小手特点，而不默认跳转。关闭默认特点1，保留默认特点2
方式一： 设置a标签的href属性为伪链接
方式二： 在a标签的点击事件里面 return false;

     <!-- 
        javascript : 告诉a标签，不要跳转而是帮我执行js代码
        void(0) : 空函数，什么事都不做的函数
      -->
    //1.
    <a href="javascript:void(0);" target="_blank">链接1</a>
    //2.
            document.querySelector('#link').onclick = function(){
            alert(666);
            //阻止a标签默认跳转
            return false;
        };

应用场景:页面换肤，淘宝地区选择

2. addEventListener

注册事件两种方式
1.点语法注册事件 ： 事件源.事件类型 = 事件处理函数
* box.onclick = function(){}
* 特点： 不能注册‘同名’事件, 后者覆盖前者
2.addEventListener() : 注册同名事件
* box.addEventListener(‘click’,function(){},false)
//第一个参数：事件类型字符串， 不要on
//第二个参数：事件处理函数
//第三个参数：布尔类型 true:捕获 false:冒泡(默认值)
* 特点：注册同名事件,不会覆盖，而是依次触发
*/

        let box = document.querySelector('.box');
        //1.点语法注册事件本质： 对象的方法赋值
        // box.onclick = function(){
        //     alert('1-不管是什么路，只要你坚持往下走，就一定会到达终点');
        // };

        // box.onclick = function(){
        //     alert('2-不负春华，青春无悔');
        // };


        //2.addEventListener() : 注册同名事件
        //第一个参数：事件类型字符串， 不要on
        //第二个参数：事件处理函数
        //第三个参数：布尔类型  true:捕获  false:冒泡(默认值)
        box.addEventListener('click',function(){
            alert('1-js从入门到精通');
        });

        box.addEventListener('click',function(){
            alert('2-我爱你们');
        });

addEventListener()方法适用于一个元素绑定多个同名事件，点语法注册事件原理是赋值，所以前面的会被后面事件覆盖；addEventListener(‘事件类型’，处理函数,false(ture)）事件类型不用on开头，第三个参数默认false表示冒泡事件，true表示捕获事件、

2.2 事件移除

• 点语法移除事件：事件源.事件类型 = null；

removeEventListener() : 移除事件
* box.removeEventListener(‘click’,function(){},false)
//第一个参数：事件类型字符串， 不要on
//第二个参数：事件处理函数
//第三个参数：布尔类型 true:捕获 false:冒泡(默认值)
* 注意点： 只能移除具名事件函数，不能移除匿名事件函数

        box.addEventListener('click',function(){
            alert('1-js从入门到精通');
        });

        let fn = function(){
            alert('2-我爱你们');
        };

        box.addEventListener('click',fn );   //具名函数事件 fn就是事件函数名

        //移除事件
        //注意点： 不能移除匿名函数，只能移除具名函数
        box.removeEventListener('click',fn);

3. 事件冒泡

3.1 事件冒泡介绍

1.事件冒泡 ： 当触发一个元素的事件的时候，这个元素‘所有的父级元素’的‘同名事件’会被依次触发
* 事件冒泡一直都存在，只是以前没有给父级元素注册同名事件而已
* 元素 -> 父元素 -> body -> html -> document -> window -> null

3.2 事件冒泡的好处

事件冒泡好处：当父元素中所有的子元素都要注册‘同名事件’，则只需要给父元素注册即可。
* 注意点: 如果给父元素注册点击事件
this: 指向父元素
e.target : 指向子元素，事件触发源（触发冒泡的源头子元素）

如果父元素中的多个子元素都需要一个相同的事件，可以给父元素添加事件，然后通过子元素的事件冒泡，获取事件触发源（e.target）、

    <ul>
        <li>我是marry</li>
        <li>我是marry</li>
        <li>我是marry</li>
        <li>我是marry</li>
        <li>我是marry</li>
    </ul>
  js----------------
	    let ul = document.querySelector('ul');
    ul.onclick = function(e){
        //this : ul
        //e.target : 事件触发源  ，触发这个事件的子元素（触发冒泡的源头）
        alert(e.target.innerText);
        console.log(e);
    };

3.3 事件冒泡的影响

• 需求冲突，如果子元素父元素都有同一个触发事件，事件存在影响和冲突。（子元素事件触发父元素事件）
• 解决方法 ：阻止事件冒泡 e.stopProPagation();

        //2.1 点击link ： 显示登录框login 和  bg背景阴影
        link.onclick = function(e){
            login.style.display = 'block';
            bg.style.display = 'block';

            //阻止事件冒泡
            e.stopPropagation();
        };
        //点击document隐藏login和 bg背景阴影
        document.onclick = function(){
            login.style.display = 'none';
            bg.style.display = 'none';
        };

        //2.2 点击closeBtn ： 隐藏登录框login 和  bg背景阴影
        closeBtn.onclick = function(){
            login.style.display = 'none';
            bg.style.display = 'none';
        };

3.4 事件捕获

.事件捕捉 ： 当触发一个元素的事件的时候，先触发最顶级父元素‘同名事件’，然后一级一级往下触发
* 事件捕捉与事件冒泡是两个完全相反的过程
* window -> document -> html -> body -> 父元素 -> 元素
1. 只有addEventListener()且第三个参数为true才可以注册捕获事件，其他一切方式都是默认冒泡。
2. 阻止冒泡的方法也可以阻止捕获

用的比较少，了解即可

4. 事件三个阶段

事件流三个阶段 : e.eventPhase
1-捕获阶段
2-目标阶段
3-冒泡阶段

如果一个元素既有事件捕捉(addEventListener(‘click’,function(){},true）) 又有父元素事件冒泡，还有元素自身的事件，则先执行事件捕捉–>目标阶段–>事件冒泡

   let box = document.querySelector('#box');
    let btn = document.querySelector('#btn');
    let son = document.querySelector('#son');

    btn.addEventListener('click',function(e){
        alert('我是小按钮'+e.eventPhase)
        
    },false);//第三

    box.addEventListener('click',function(e){
        alert('我是box'+e.eventPhase)
        
    },false);  //第四

    document.body.addEventListener('click',function(e){
        alert('我是body'+e.eventPhase)
        
    },false);  // 第五

    document.documentElement.addEventListener('click',function(e){
        alert('我是html'+e.eventPhase)
        
    },true);  // 第二

    window.addEventListener('click',function(e){
        alert('我是window'+e.eventPhase)
        
    },true);  //第一
    

5. 事件类型

事件类型e.type ： 获取触发这个事件所属的类型
应用场景： 不同的事件，需要触发相同的函数

        let box = document.querySelector('.box');

        let fn = function(e){
            console.log( e.type ); 
            console.log(666);
        };

        box.onclick = fn;
        box.onmouseover = fn;

6. 键盘事件

1. 键盘事件
   onkeydown : 键盘按下
   onkeypress: 作用与onkeydown一致。
   * 唯一的区别是onkeypress可以区分大小写+过滤特殊按键
   onkeyup : 键盘松开

获取键盘按键

2. 获取键盘按键
   e.keyCode : 获取键盘的ASCII码
   * 键盘码ASCII码： 键盘每一个按键对应一个编号，编号称之为ASCII码
   * ASCII码转string: String.fromCharCode(ascii码)

window.onkeypress || window.onkeydown ，监听网页所有按键。
String.fromCharCode(ascii码)ASCLL码转String;
e.keycode:获取按键的ASCLL码值

7. DOM综合案例

• 百度搜索栏
• 表格处理

总结

如果喝不上清晨的粥，那就帮我倒满深夜的酒