js 学习进阶（事件高级 pink老师教学笔记）

js进阶上篇

注册事件

给元素添加事件，称为注册事件或绑定事件

传统方式

btn.onclick = function(){
    }
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

1. w3c推荐方式
2. addEventListener()它是一个方法
3. IE9之前的IE不支持此方法，可使用attachEvent()代替
4. 同一个元素同一个事件可以注册多个监听器
5. 按注册顺序依次执行
   

<script>
bnts.addEventListener('click',function(){
    
alert(22);
})
//事件类型是字符串，必定加引号，而且不带On
<script/>

了解即可，不提倡使用

删除事件

var divs = document.querySelectorAll('div');
divs[0].onclick = function(){
    
	alert(11);
	divs[0].onclick = null;//传统方式删除事件
}
//2. removeEventListener 删除事件 函数不能采用匿名方式
divs[1].addEventListener('click',fn)
function fn(){
    
	alert(22);
	divs[1].removeEventListener('click',fn);
}

DOM事件流

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

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

事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里（event），它有很多属性和方法
绑定事件，触发事件后，比如按下，鼠标移动等等，这些相关的信息就会存在event中，是不需要传进去的

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

target和this区别
e.target 返回的是触发事件的对象（元素）
this 返回的是绑定事件的对象（元素）
ul绑定事件，点击li时，用this则会一直得到ul，用e.target返回的则是li(点击事件对象-即谁被点击啦)
可能会遇到currentTarget,与this类似，只是也有兼容性问题

阻止默认行为

阻止冒泡

e.stopPropagation();
e.cancelBubble = true;
son->father->document;如果son添加了阻止事件冒泡，则点击son，father和document不会有反应，但此时，如果点击的是father,但document还是会有反应的

事件委托

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

以上案例：给ul注册点击事件，然后点击里面的li的时候，当前的li可以用event.target得到，并且点击li，事件会冒泡到ul上， ul有注册事件，就会触发事件监听器。

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

   <!-- 事件委托 -->
    <ul>
        <li>我被点击啦，我变色了</li>
        <li>我被点击啦，我变色了</li>
        <li>我被点击啦，我变色了</li>
        <li>我被点击啦，我变色了</li>
    </ul>
    <script>
    //事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
    
        //排他思想，其他先全去除颜色
            for (var i = 0; i < this.children.length; i++) {
    
                this.children[i].style.backgroundColor = ''
            }
            //e.target这个可以得到我们点击的对象，让我们点击的对象变色
            e.target.style.backgroundColor = 'pink'
        })

    </script>

常用的鼠标事件

禁止选中文字和禁止右键菜单

鼠标事件对象

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

clientY:始终是相对于浏览器可视区的，也就是说，当页面向下滑动很多时，向下滑动的总距离不会被包含在clientY里。

pageY:向下滑动的总距离是会被包含在pageY里。

案例：跟随鼠标的天使

• 鼠标不断的移动，使用鼠标移动事件 mousemove
• 在页面中移动，给document注册事件
• 图片要移动距离，而且不占位置，我们使用绝对定位即可
• 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，我们把这个x和Y作为图片的top和left值就可以移动图片
• 千万不要忘记加px单位

   <!-- 图片跟随鼠标移动 -->
    <img src="./1.jpg" style="width: 50px;height: 50px;position: absolute;">
    <script>
        var pic = document.querySelector('img')
        document.addEventListener('mousemove', function (e) {
    
            pic.style.top = e.clientY + 'px';
            pic.style.left = e.clientX + 'px';
        })
    </script>

常用的键盘事件

1. onkeypress 不识别功能键，比如左右箭头，ctrl，shift
2. 三个事件的执行顺序是：keydown–keypress–keyup

键盘事件对象

keycode返回键盘的ASCII值

1. keyup和keydown事件不区分字母大小写 a和A都是65
2. keypress是区分大小写的(keyCode)

案例：京东输入内容案例

案例分析

1. 核心思路：检测用户是否按下了s键，如果按下了S键，就把光标定位到搜索框里
2. 利用键盘事件对象里面的keyCode判断用户按下的是否是S键

  <!-- 模拟京东按键输入内容案例 -->
    <input type="text">
    <script>
        //监听按下s键
        //注意是keyup，不然获取焦点的同时也会写入s
        var input = document.querySelector('input');
        var inp = document.onkeyup = function (e) {
    
            console.log(e.keyCode)
            if (e.keyCode == 83) {
    
                input.value = ''
                input.focus()

            }
        }
    </script>

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

案例分析

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

 <style>
        #large {
    
            width: 200px;
            height: 30px;
            border: 1px solid rgb(158, 155, 155);
            margin-bottom: 10px;
            font-style: 18px;
            line-height: 30px;
            box-shadow: 0 2px 0.5px rgb(158, 155, 155);
        }
		<!--小箭头-->
        #large::before {
    
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 31px;
            left: 18px;
            border: 8px solid black;
            border-style: solid dashed dashed;
            border-color: white transparent transparent;
        }

  <!-- 模拟京东快递单号查询 -->
    <div style="width: 200px;height: 50px;margin:500px auto">
        <div id="all" style="position: relative;display: none;">
            <div id="large">
            </div>
        </div>
        <input type="text" style="width: 200px;height: 20px;" placeholder="请输入您的快递单号">
    </div>
    <script>
        var input = document.querySelector('input')
        var div = document.querySelector('#large')
        var all = document.querySelector('#all')
        input.addEventListener('keyup', function (e) {
    
            all.style.display = 'block';
            div.innerHTML = this.value
        })
        input.addEventListener('blur', function () {
    
            all.style.display = 'none';
        })
        input.addEventListener('focus', function () {
    
            if (this.value != '') {
    
                all.style.display = 'block';
            }
        })
    </script>
    </style>