Dom高级2021-11-12

注册事件的两种方式：

    <button>传统注册事件</button>
    <button>方法监听事件</button>
    <button>ie9 attacEvent</button>
     <script>
         var btns = document.querySelectorAll('button');
         //1. 传统注册事件
         //特点：注册事件的唯一性 同一个元素只能设置一个处理函数 最后的函数会覆盖前边的注册函数
         btns[0].onclick = function () {
             alert('hi~~');
         }
         btns[0].onclick = function () {
             alert('hao a you');
         }


         //2.方法监听事件  IE9之前不支持 可以用attachEvent()代替
         //w3c标准推荐方法  addEventListener()他是一个方法 
         //特点：同一个元素同一个事件可以注册多个监听器  按照注册顺序依次执行
         //addEventListener里的事件类型是字符串 必须加引号 并且不带on
         btns[1].addEventListener('click', function () {
             alert('第一次');
         })
         btns[1].addEventListener('click', function () {
             alert('第二次');
         })

         //3. attachEvent ie9以前的版本支持 几乎不用
         btns[2].attachEvent('onclick', function () {
             alert('11');
         })
     </script>

删除事件

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        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);
        }
        //3. 
        divs[2].attachEvent('onclick', fn1);
        function fun1 () {
            alert('33');
            divs[2].detachEvent('onclicl', fn1);
        }
    </script>

DOM事件流的三个阶段

    <div class="father">father
        <div class="son">son</div>
    </div>

    <script>
        //dom事件流 三个阶段
        //1. JS代码中只能执行捕获或者冒泡其中一个阶段
        //2. onclick和attachEvent(ie)只能得到冒泡阶段、
        //3. 捕获阶段 如果addEventListener 第三个参数true 处于捕获阶段 document->htm->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); //先弹出father 再弹出son
        
        //4. 冒泡阶段 如果addEventListener 第三个参数false 处于捕冒泡阶段 son->father->body->html->docment
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false); //先弹出son 再弹出father
        document.addEventListener('click', function () {
            alert('docment');
        })
    </script>

 事件对象

    <div>123</div>

    <script>
        var div = document.querySelector('div');
        //传统的点击事件
        div.onclick = function (e) {
            // console.log(e);
            // console.log(window.e);//ie678的写法
            //解决兼容性写法
            e = e || window.e;
        }

        // 方法监听事件e = e || window.e
            // div.addEventListener('click', function(e) {
            //     console.log(e);
            // })
            //1. event就是一个事件对象 写到我们监听函数的 小括号里的 当形参来看
            //2. 事件对象只有有了事件才会存在，他是系统给我们自动创建的 不需要我们传递参数
            //3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的：比如鼠标点击里边就包含里鼠标的相关信息(鼠标坐标)，如果是键盘事件里面包含键盘事件的相关信息(判断客户按下了哪个键)
            //4. 这个事件对象我们可以自己命名  比如event、evt、e
            //5. 这个时间也有兼容性问题 ie678通过window.evnet
            //兼容性写法： e = e || window.e;
    </script>

事件对象属性和方法 

    <div>123</div>
    <a href="https://www.baidu.com/">百度</a>
    <form action="https://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标准写法
        })
        //传统的注册方式
        a.onclick = function (e) {
            //普通浏览器  e.preventDefault();方法
            // e.preventDefault();
            //低版本浏览器 ie678   returnValue属性
            // e.returnValue;
            //我们可以利用return false也能组织默认行为 没有兼容性问题
            return false;//缺点：return后的代码不执行了 而且只限用传统的注册方式
        }
    </script>

事件对象阻止默认行为

    <div>123</div>
    <a href="https://www.baidu.com/">百度</a>
    <form action="https://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标准写法
        })
        //传统的注册方式
        a.onclick = function (e) {
            //普通浏览器  e.preventDefault();方法
            // e.preventDefault();
            //低版本浏览器 ie678   returnValue属性
            // e.returnValue;
            //我们可以利用return false也能组织默认行为 没有兼容性问题
            return false;//缺点：return后的代码不执行了 而且只限用传统的注册方式
        }
    </script>

事件委托

    <ul>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
    </ul>
    <script>
        // 事件委托的原理：
        // 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子结点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // alert('666'); 点li弹出666

            //e.target可以得到点击的对象
            //e.target.style.backgroundColor = 'pink'; //点击哪个li就变色

            //点击前清除所有的背景色
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].style.backgroundColor = '';
            }
            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>

鼠标事件对象 

    <style>
        body {
            height: 3000px;
        }
    </STyle>
</head>
<body>
    <script>
        //鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            //1. client 鼠标在可视区域的坐标(和滚动条无关)
            console.log(e.clientX);
            console.log(e.clientY);
            //2. page 鼠标在页面文档的坐标(和滚动条有关)
            console.log(e.pageX);
            console.log(e.pageY);
        })
    </script>

 跟随鼠标的天使

    <style>
    img {
        position: absolute;
        width: 50px;height: 50px;
    }
    </style>
</head>
<body>
    <img src="images/ts.jpg" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            //1. mousemove 只要鼠标移动1px 就会出发这个事件
            // console.log(1);
            //2.核心原理：每次移动鼠标，我们都会获得一个最新的鼠标坐标 把这个xy坐标作为哦图片的top left值 就可以移动图片了
            var x = e.pageX;
            var y = e.pageY;
            console.log('x的坐标是'+x,'y的坐标是'+y);    
            pic.style.left = x-25+'px';//-高度的一半25 为了让图在鼠标的中间位置
            pic.style.top = y-25+'px';
        });
    </script> 

 常用的键盘事件

    <script>
        //常用的键盘事件
        //1. keyup 按键弹起的时候触发
        // document.onkeyup = function () {
        //     console.log('我弹起了');
        // }
        document.addEventListener('keyup', function () {
            console.log('我弹起了');
        }) 
        //2. keydown 按键按下的时候触发   可以识别功能键
        document.addEventListener('keydown', function () {
            console.log('我按下了down');
        })         
        //3. keypress 按键按下的时候触发 不识别功能键
        document.addEventListener('keypress', function () {
            console.log('我按下了press');
        }) 

        //4.三个事件的执行顺序 keydown->keypress->keyup
    </script>

键盘事件对象-keyCode属性

    <script>
        //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        //1. keyup keydown 不区分字母大小写a和A得到都是65
        document.addEventListener('keyup' ,function (e) {
            console.log('keyup'+e.keyCode); /* 键盘输入a和A得到都是65 */
        })

        //2. keypress 区分字母大小写
        document.addEventListener('keypress' , function (e) {
            console.log('keypress'+e.keyCode);//输入a是97 A是65
        })
    </script>

模拟京东案输入框案例

    <input type="text">
    <script>
        //核心思路：检测用户是否按了S键，如果按下 就把光标定到搜索框里
        //使用键盘事件对象里边的keyCode 判断用户按下的是否是s
        //搜索框获得焦点：使用js里边的focus()方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function (e) {
            ///用keyup 不同keydown :keyup抬起才触发  keydown会把s也放入搜索框内
            if (e.keyCode == 83) {
                search.focus();
            }
        })
    </script>

京东快递单号查询案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .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 {
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent ;
        }
    </style>
</head>
<body>
    <div class="search">
        <div class="con">
            123
        </div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>

    <script>
        //快递单号输入内容时，上面的大号字体盒子(con) 显示(这里的子号更大)
        //表单检测用户输入：给表单添加键盘事件
        //同时把快递单号里面的值(value) 获取过来赋值给con盒子 (innerHTML)作为内容
        //如果快递单号为空 则隐藏大号字体盒子(con)盒子
         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.innerHTML = this.value;
            }
         })
    </script>
</body>
</html>