事件高级

事件高级

---

前言

一、注册事件？

1.1注册事件概述

给元素添加事件，成为注册事件或者绑定事件
传统方法和方法监听注册方式

• 传统方法
  传统的注册方式：具有注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖注册的处理函数

• 方法监听注册
  addEvenlistener 事件监听方式
  eventTarget.addEventListener(type , listener [, useCaptuer])
eventTarget.addEventListener() 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定事件时，就会执行事件处理函数

❤ 该方法接受的三个参数
type: 事件类型字符串、比如click mouseover ,注意这里不用带on
listener: 事件处理函数，事件发生时，会调用该监听函数
useCapture: 可选参数，是一个布尔值，默认是false。

• 删除事件/解绑事件
  删除事件 removeEventListener（）

<button>夕颜</button>
    <button>666</button>
    <script>
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function() {
            alert('你太帅了');
        }
        //事件侦听处理程序 addEventListener
        //里面的事件类型是字符串 必定加引号  而且不带On
        //同一个元素 同以一个事件类型可以添加多个监听器（事件处理程序）
        // btns[1].addEventListener('click',function() {
        //     alert(666);
        // })
        // btns[1].addEventListener('click',function() {
        //     alert('你好帅啊');
        // })

        btns[1].addEventListener('click',fn)  // 里面的fn  不需要调用加小括号
        function fn() {
            alert('你也帅');
        }

        // 删除事件  removeEventListener
        function fn() {
            alert('你也帅');
            btns[1].removeEventListener('click',fn);
        }
    </script>

二、DOM事件流

事件流描述从页面接受事件的顺序
事件发生的时会给元素节点之间按照特定顺序传播，这个传播过程即DOM事件流。
比如我们给 <Div></Div> 注册事件有三个阶段

• 1.捕获阶段
• 2.处于目标阶段
• 3.冒泡阶段

JS代码只能执行冒泡或者捕获其中的一个阶段
onclick只能得到冒泡阶段
捕获阶段 如果 addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> 元素
第三个参数是 false 或者为空 那么则处于冒泡阶段 元素 -> body -> html -> ducument
有些事件是没有冒泡的，比如 onblur,onfous,onmouseenter,onmouseleave. -->

123

2.常见的事件对象以及方法

事件对象属性方法	说明
e.target	点击了那个元素 就返回那个元素。
e.type	返回事件的类型 比如click,mouseover , 不带on
e.srcElement	返回触发事件的对象
e.cancelBubble	该属性阻止冒泡
e.returnValue	该属性阻止默认事件（默认行为） 比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为） 比如不让链接跳转 dom标准写法
e.stopPropagation	阻止冒泡规则 ，停止冒泡行为

<div>123 </div>
        <ul>
            <li>夕颜</li>
            <li>夕颜</li>
            <li>夕颜</li>
        </ul>
    <script>
// e.target 返回的是触发事件对象（元素）  this返回的是绑定事件的对象（元素）
        // 区别 e.target 点击了那个元素 就返回那个元素。
var div = document.querySelector('div');
        div.addEventListener('click',function(e) {
         console.log(e.target);
        } )
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e){
           console.log(this);  返回绑定的事件ul
           console.log(e.target);  //返回点击的li
        })
    </script>

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

事件委托

<!-- 事件委托原理： 不是给每个子节点单独设置监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点 -->
    <!-- 以上案例：给ul注册点击事件，然后利用事件对象的target属性来找到当前点击的li 因为点击li 事件会冒泡到ul上，ul有注册事件 ，就会触发事件监听器。 -->
    <!-- 事件委托作用：  只操作了一次DOM -->
<ul>
        <li>1</li>
        <li>12</li>
        <li>123</li>
        <li>1234</li>
        <li>12345</li>
    </ul>
    <script>
        // 事件委托原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            alert('123');
            e.target.style.backgroundColor = 'red';
        })
    </script>

• 常见的鼠标对象

<script>
        // 1.contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        // 2.禁止选中文字 selectstart 
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })  
 
          // 鼠标事件对象MouseEvent 
          document.addEventListener('click',function(e){
            // 1.client 鼠标在可视区里面的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

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

            //3.screen 鼠标在电脑屏幕的坐标
            console.log(e.screenX);
            console.log(e.screenY);
            console.log('---------------------');
          })
     </script>

案例

❤CSS设置

<style>
        /* body {
            position:relative;
        } */
        img {
            position: absolute;
        }
    </style>

❤HTML设置

```javascript
<!-- 鼠标不断移动，使用鼠标移动事件 ： mousemove
  在页面中移动，给docunment注册事件
  图片要移动距离，而且不占用位置，我们使用绝对定位即可
  核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标，把这个坐标的x和y作为图片的top和left值就可以移动图片 -->
 <img src="images/angel.gif" alt="">

❤JS设置

<script>
    
    var  img = document.querySelector('img') ;
    document.addEventListener('mousemove',function(e){
        // 1.mousemove 只要我们移动1px 就会触发这个事件
        // 2.核心原理 ：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个坐标的x和y作为图片的top和left值就可以移动图片
        var x = e.pageX;
        var y = e.pageY;
        console.log(x);
        img.style.left = x -36+ 'px';
        img.style.top = y -40 + 'px';
       
    })
 </script>

---

• 常见的键盘对象
  事件除了鼠标还能用键盘触发
  onkeyup 某个键盘按键被送松开时触发
  onkeydown 某个键盘按键被按下时触发
  onkeypress 某个键盘按键被按下时触发 但是她不能识别功能键 比如 shift ctrl 等
  如果使用addEventListener不需要加on
  三个事件的执行顺序是 keydown----keypress-----keyup

<script>
        document.addEventListener('keyup',function(e){
            console.log(e.key);  //输出按下的是哪个键
        })
        
    </script>

案例-模拟京东按键输入内容
核心思路：用户按下s键就把光标自动定位到搜索框

<style>
        /* body {
            position:relative;
        } */
        
    </style>
</head>
<body>
    <input type="text">
   
    <script>
        var ipt = document.querySelector('input')
        document.addEventListener('keyup',function(e){
            if (e.key == 's')
            ipt.focus();
        })
       
    </script>

总结

<<--------------------------------------------DOM到这就全部结束------------------------------->>
下一个篇章更新BOM