重拾JS-20-DOM（part4）

---

事件高级学习：

• 注册事件（绑定事件）

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

传统注册方式：

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

方法监听注册方式：

• W3C标准 推荐使用
• addEvenListener()它是一个方法
• IE9之前不支持，可使用attachEvent()代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按照注册顺序依次执行

    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btn = document.querySelectorAll('button');

        btn[0].onclick = function() {
            alert('我是第一个')
        }
        btn[0].onclick = function() {
            alert('我是第二个')
        }
        btn[1].addEventListener('click', function() {
            alert('woshidiyi')
        })
        btn[1].addEventListener('click', function() {
            alert('woshidier')
        })
    </script>

 

• 删除事件（解绑事件）

传统删除事件方式：eventarget.οnclick=null

方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture)

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var div = document.querySelectorAll('div');
        div[0].onclick = function() {
            alert('111');
            //传统方式删除事件
            div[0].onclick = null;
        }
        div[1].addEventListener('click', fn);

        function fn() {
            alert('222');
            // 2. removeEventListener 删除事件
            div[1].removeEventListener('click', fn);
        }
    </script>

 

• DOM事件流

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

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

注意事项：

• JS代码中只能执行捕获或者冒泡其中的一个阶段
• onclick和attachEvent只能得到冒泡阶段
• addEventListener(type,listener[,useCapture)第三个参数是true的时候，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认是false），表示在事件冒泡阶段调用事件处理程序

代码验证:

   <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> 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);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  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>

 

• 事件对象

   1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
   2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
   3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
   4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
   5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

代码演示：

    <div>11</div>
    <script>
        // var div = document.querySelector('div');
        // div.onclick = function(e) {
        //     console.log(e);
        // }
        var div1 = addEventListener('click', fn);
        function fn(e) {
            console.log(e);
        }
    </script>

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

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

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // 我们给ul 绑定了事件  那么this 就指向ul  
            console.log(this);
            // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
            console.log(e.target);

        })
    </script>

返回事件类型和事件对象阻止默认行为：

  <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })
            // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>

阻止事件冒泡：

    <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>

 

• 事件委托（代理丶委派）

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

事件委托的作用：只操作一次DOM，提高了程序的性能

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', fn);

        function fn(e) {
            alert('冒泡到了啊')
            console.log(e.target);
            e.target.style.backgroundColor = 'pink'
        }
    </script>

 

• 常用的鼠标事件

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

        })
    </script>

    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>

案例：跟随鼠标图片

    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';


        });
    </script>

 

• 常用的键盘事件

    <script>
        document.addEventListener('keydown', function() {
            console.log('我按下了keydown');
        })
        document.addEventListener('keypress', function() {
            console.log('我按下了keypress');
        })
        document.addEventListener('keyup', function() {
                console.log('我按下了keyup');
            })
            //三个事件的执行顺序  keydown -- keypress -- keyup
    </script>

keyCode属性：返回该键的ASCALL值

注意：onkeydown和onkeyup不区分大小写，onkeypress区分字母大小写。

在实际开发中，我们更多地使用keydown和keyup，它能识别所有按键（包括功能键）

Keypress不识别功能键，但是keyCode属性能区别大小写，返回不同的ASALL值

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

        })
    </script>

案例：模拟京东按键输入

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

案例：京东快递查询订单

   <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>