事件对象

一、获取事件对象

1.事件对象是什么

也是个对象，这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点击在哪个位置等信息。

2.如何获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event、ev、e

元素.addEventListener('click',function(e){
    
})

二、事件常用属性

部分常用属性

type：获取当前的事件类型

<div>点击点击</div>
    <script>
      // 获取按钮
      const btn = document.querySelector('div');

      btn.addEventListener('click', function (event) {
         console.log(event.type); // 输出当前的事件类型  少用
      });
    </script>

clientX/clientY：获取光标相对于浏览器可视窗口左上角的位置

<div>点击点击</div>
    <script>
      // 获取按钮
      const btn = document.querySelector('div');

      btn.addEventListener('mousemove', function (event) {
	  console.log(event.clientX,event.clientY ); // 返回 鼠标的位置-参照物 页面的左上角即可
      });
    </script>

offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

<div>点击点击</div>
    <script>
      // 获取按钮
      const btn = document.querySelector('div');

      btn.addEventListener('mousemove', function (event) {
      console.log(event.offsetX,event.offsetY);// 返回鼠标的坐标，参照物 是被点击的元素的左上角
      });
    </script>

key：用户按下的键盘的值，现在不提倡用keyCode

元素.addEventListener('keyup',function(e){
            if(e.key==="Enter"){
                元素.click()
            }
        })

事件流

一、事件流和两个阶段

1.什么是事件流

事件流是指事件完整执行过程中的流动过程

2.事件流分为哪两阶段

事件流分为捕获阶段和冒泡阶段，简单来说，捕获阶段是父到子，冒泡阶段是子到父

二、事件捕获和事件冒泡

1.事件冒泡

当一个元素事件被触发时，同样的事件会在该元素的所有祖先元素中一次触发，这一过程称为冒泡。简单来说，当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。

事件冒泡是默认存在的。

<body>
    <div class="a">
        爷爷
        <div class="b">爸爸
            <div class="c">儿子</div>
        </div>
    </div>
    <script>
        const a = document.querySelector('.a')
        const b = document.querySelector('.b')
        const c = document.querySelector('.c')
        
        a.addEventListener('click',function(){
            console.log('a')
        })
        b.addEventListener('click',function(){
            console.log('b')
        })
        c.addEventListener('click',function(){
            console.log('c')
        })
    </script>

点击儿子div，控制台依次打印c、b、a

2.事件捕获

从DOM的根元素开始去执行对应的事件（从外到里）；事件捕获需要对应代码才能看到效果

DOM.addEventlistener(事件类型,function(){},是否使用捕获机制)

addEventlistener第三个参数传入true代表是捕获阶段触发（很少用）；若传入false代表冒泡阶段触发，默认是false，可以不写

<body>
    <div class="a">
        爷爷
        <div class="b">爸爸
            <div class="c">儿子</div>
        </div>
    </div>
    <script>
        const a = document.querySelector('.a')
        const b = document.querySelector('.b')
        const c = document.querySelector('.c')

        //默认是冒泡阶段 false 可以省略不写 要想改为捕获阶段 在事件最后添加true
        a.addEventListener('click',function(){
            console.log('a')
        },true)
        b.addEventListener('click',function(){
            console.log('b')
        },true)
        c.addEventListener('click',function(){
            console.log('c')
       })
    </script>

点击儿子div，控制台打印次序为a、b、c

三、阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素；
若想把事件限制在当前元素内，就需要阻止事件流动；
阻止事件流动需要拿到事件对象
语法：

事件对象.stopPropagation()

此方法可以阻断事件流动传播，不光在事件冒泡阶段有效，捕获阶段也有效。

阻止标签默认行为

如链接点击不跳转，表单域不提交

语法：

event.preventDefault()

例如：

    <a href="http://www.baidu.com">百度</a>

    <form >
      <button type="button">点击我 就会自动刷新</button>
      <!-- <input type="button" value="点击我"> -->
    </form>
    <!-- <button>刷新</button> -->
    <script>
      /* 
      1 a标签的点击跳转
      2 form表单中button点击刷新行为
        1 阻止默认行为 - form表单 有一个 submit 事件 理解提交表单的触发-点击按钮的时候触发
        2 给button按钮 添加一个 type="button" 属性 
        3 换成 input标签 type="button"
        4 把button 移出form表单的区域 
       */
      const a=document.querySelector("a");
      const form=document.querySelector("form");
      const button=document.querySelector("button");
      a.addEventListener("click",function (event) {
        console.log("a标签的点击触发啦");
        // 阻止a标签的默认行为，让他不要跳转
        event.preventDefault();
      })

      // form.addEventListener("submit",function (event) {
      //   // 不要让页面再刷新
      //   event.preventDefault();
      // })

      // button.addEventListener("click",function (event) {
      //   event.preventDefault();  // 不要让页面再刷新
      // })
    </script>

事件委托

一、什么是事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点:

给父级元素添加事件（可以提高性能）

原理：

事件委托其实是利用事件冒泡的特点，给父级元素添加事件，子元素可以触发

实现：

事件对象.target 可以获得真正的触发事件的元素

      // 事件委托
      //  本来想要给li标签绑定事件实现业务
      //  把事件绑定写在 父元素上  把li标签应该要做的事情 委托给父元素来做！ 
      const ul=document.querySelector("ul");
      ul.addEventListener("click",function (event) {
        //  event.target 有可能是ul标签，有可能是li标签，还有可能是 a标签        event.target.style.backgroundColor="red";
        // event.target 你当前点击的是哪个标签（点击最深最底层的那个标签即可）
        // console.log(event.target);// 获取到被点击的li标签 
      })

事件对象、事件流、事件委托