Dom——高级事件

高级事件

一、注册事件（绑定事件）

1. 传统注册事件有唯一性，只能设置一个函数，后注册的函数会覆盖新的函数
2. 方法监听注册方式：.addEventListener(type，listener[,useCapture])
   （1）里面的事件类型是字符串，必加引号，而且不带on
   （2）同一个元素，同一个事件可以添加多个侦听器
   ①type：事件类型字符串，如click、mouseover，注意不带on
   ②listener：事件处理函数，事件发生时会调用该监听函数
   ③useCapture：可选参数，是个布尔值，默认为false。

二、删除事件（解绑事件）

1.传统删除事件在函数内部加上div.onclick = null即可
2.注册事件删除：removeEventListener(type,函数)函数不需要添加小括号

<div>1</div>
<script>
    var div1 = document.querySelector('div');
    div1.addEventListener = ('click', fn)

    function fn() {
        alert('hi~');
        div1.removeEventListener('click', fn);
    }
</script>

三、DOM事件流——事件的传播过程

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

※注意
①js代码只能执行捕获或冒泡其中一个阶段
②onclick和attachEvent只能得到冒泡阶段
③addEventListener第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序
④实际开发中很少使用事件捕获，更关注事件冒泡
⑤有些时间没有冒泡，如onblur、ommouseover、ommouseseleave

四、事件对象

div.onclick = function(event){}
（1）概念：event即事件对象写到侦听函数的小括号内，当形参看
（2）使用方法：

1. 事件对象有了事件才存在，他是系统给我们自动创建的，不需要我们传递参数，并依次传递给事件监听器
2. 事件对象是我们事件一系列相关数据的集合，跟事件相关的信息
3. 这个事件对象我们可以自己命名，如event、evt、e等等

（3）常见属性和方法

1. e.target：返回的是触发事件的元素，this返回的是绑定事件的元素。
2. e.type：返回事件类型，如click，mouseover，不带on
3. e.preventDefault()：阻止默认事件，如不让链接跳转

<a href="https://www.baidu.com/">百度</a>
<script>
    var aa = document.querySelector('a');
    aa.addEventListener('click', function(e) {
        e.preventDefault();
    })
</script>

4. e.stopPropagation()：阻止冒泡

<div>me</div>
<script>
    var me = document.querySelector('div');
    me.addEventListener('click', function(e) {
        alert('我弹出来啦');
        e.stopPropagation();
    });
    document.addEventListener('click', function(e) {
        alert('我也弹出来啦');
    });
</script>

五、事件委托

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

<ul>
    <li>点我有弹窗</li>
    <li>点我有弹窗</li>
    <li>点我有弹窗</li>
    <li>点我有弹窗</li>
    <li>点我有弹窗</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        alert('我弹出来啦');
        // e.target可以获取被点击的对象，因此可以利用它来设置单独样式
        e.target.style.backgroundColor = 'red';
        // 如果想要实现一个变色其他不变可复习排他思想
    })
</script>

六、常用的鼠标事件

（1）

1. contextmenu：禁用右键菜单
2. selectstart：禁止鼠标选中
3. mousemove：鼠标移动事件

（2）鼠标事件对象 MouseEvent

1. clientX、clientY：相对于浏览器窗口可视区的坐标
2. pageX、pageY：相对于文档边缘的坐标
3. screenX、screenY：鼠标在电脑屏幕的坐标

七、常用键盘事件

（1）三个事件执行顺序：keydown-keypress-keyup

1. keyup：键盘弹起时触发，不区分字母大小写
2. keydown：按键按下时触发，不区分字母大小写
3. keypress：按键按下时触发（不识别功能键，如：ctrl、shift等），区分字母大小写

（2）keyCode：ASCII码值，判断用户按的是哪个键

案例

图片跟随鼠标

考察知识点：鼠标移动事件mousemove

核心思想

1. 利用鼠标事件mousemove实时获得鼠标的位置
2. 设置两个变量，x和y，把鼠标的实时坐标赋值给x、y
3. 为图片设置相对定位（没有绝对定位则以整个浏览器来定位，相对定位不占位置），y和x分别赋给top和left

注意：在把x和y的值赋给top和left时，要在后面以拼接字符串的方式加上单位px。否则没有效果。

代码

html部分

<img src="image/箭头.png" alt="">

css部分

<style>
    img {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

javascript部分

<script>
    var jian = document.querySelector('img');
    document.addEventListener('mousemove', function(e) {
        // 只要鼠标移动1px，就会触发mousemove事件
        // 我们需要每次移动鼠标，实时获取鼠标的坐标，并赋给img的top和left
        var x = e.pageX;
        var y = e.pageY;
        jian.style.left = x + 'px';
        // top值和left值都有单位（如：top：2px），因此这里同需要拼接字符串的形式加上单位才能正常运作
        jian.style.top = y + 'px';
        // 想要实现图片居中只要在x和y后面减去图片一半大小数字即可
    })
</script>

快递单号查询

考察知识点：键盘事件

核心思想

1. 输入内容时，上面的字体盒子（con）显示（字体更大）
2. 表单检测用户输入：添加键盘事件
3. 把单号的值获取赋给字体盒子
4. 单号为空则字体盒子隐藏

代码

html部分

<div class="bg">
    <div class="con"></div>
    <input type="text" placeholder="123">
</div>

css部分

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    .bg {
        position: relative;
        width: 300px;
        margin: 100px auto;
    }
    
    .con {
        display: none;
        width: 200px;
        height: 30px;
        line-height: 30px;
        font-size: 25px;
        border: 1px solid #ccc;
    }
    
    .con::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 29px;
        left: 15px;
        border: 8px solid #ccc;
        border-style: solid dashed dashed;
        border-color: #ccc transparent transparent;
    }
    
    input {
        position: absolute;
        top: 36px;
        left: 0;
        width: 200px;
        outline: none;
        border: 1px solid #999;
    }
</style>

javascript部分

<script>
    var con = document.querySelector('.con');
    var ipt = document.querySelector('input');
    ipt.addEventListener('keyup', function(e) {
            // 当表单不为空，则显示上方盒子，并把值赋给盒子
            if (ipt.value != '') {
                con.style.display = 'block';
                var v = ipt.value;
                con.innerHTML = v;
            } else {
                con.style.display = 'none';
            }
        })
        // 如果表单失去焦点，则盒子隐藏
    ipt.addEventListener('blur', function(e) {
        con.style.display = 'none';
    })
</script>

效果

默认情况下上方不显示

失去焦点也不显示

京东按键输入

考察知识点：键盘事件

核心思想

1. 判断用户是否按下s键，如果按下，则定位到搜索里
2. 用keycode判断按下的那个键
3. 搜索框获得焦点，focus()方法

代码

html部分

<input type="text" placeholder="手机">

javascript部分

<script>
    var ipt = document.querySelector('input');
    document.addEventListener('keyup', function(e) {
        // 这里keyup和keydown都可以，但是keydown是按下时触发，会把s输入进input里，用keyup会更好
        if (e.keyCode == 83) {
            ipt.focus();
        }
    })
</script>