scriptjava事件两种注册事件点语法注册事件事件源注册事件移除事件 : 变量赋值原理，先销毁旧值，然后存入新

注册事件

两种注册事件

点语法注册事件

事件源.事件类型=事件处理函数
特点是不能注册同名事件否则会被覆盖
box.事件类型=function(){}

事件源注册事件

事件源.addEventListener('事件类型',事件处理函数(){})
注意点是这里的事件类型不用加'on'
特点是可以注册同名事件
box.addEventListener('事件类型',function(){})

移除事件移除事件 : 变量赋值原理，先销毁旧值，然后存入新值

细节：只能移除具名事件，无法移除匿名事件
语法: 事件源.removeEventListener('事件类型',事件处理函数)

let box = document.querySelector('#box');
 let fn = function(){
            alert('1-我是addEventListener语法注册的事件');
        };

        box.addEventListener('click', fn );
       //注册事件
        box.addEventListener('click',function(){
            alert('2-同名事件： 相同的事件类型');
        })
      //事件移除
        box.removeEventListener('click', fn );

阻止默认事件

js中有默认事件的标签： a标签与 form表单阻止默认事件行为 : e.preventDefault()
实际开发中用的最多的是阻止form表单默认提交(后期服务器课程使用频繁)

<a href="http://www.baidu.com">跳转到百度</a>
    <script>
       
        let a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            // 阻止默认行为 方法
            e.preventDefault()
        })
    </script>

事件对象介绍

事件对象：存储与事件触发相关信息(事件触发点，键盘信息)的对象
获取事件对象：给事件处理函数添加一个形参 event ev e

      id="box"
      style="width: 200px;
    height: 200px;background-color: red"
    ></div>
    <script>
      var box = document.querySelector('#box')
      //注册点击事件
      box.onclick = function (e) {  
        console.log(e)
        console.log('你点击了box')
      }
    </script>

事件对象常用属性

      id="box"
      style="width: 200px;
    height: 200px;background-color: red"
    ></div>
    <script>
      /* 
        事件对象常用属性：
            e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离
        */

      let box = document.querySelector('#box')
      //注册点击事件
      box.onclick = function (e) {
        console.log(e)
        //pageX/Y : 获取事件触发点 到 页面左上角距离（定位坐标系）
        console.log('pageX：' + e.pageX + ' pageY：' + e.pageY)
      }
    </script>

事件冒泡

      .father {
        width: 300px;
        height: 300px;
        background-color: red;
      }

      .son {
        width: 100px;
        height: 100px;
        background-color: cyan;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <script>
       /* 
        1.事件冒泡： 当触发子元素的事件时，该子元素的所有“父级元素” 的“同名事件”会依次触发 
            * 事件冒泡现象一直都存在，只是以前没有给父元素注册同名事件
            * 子元素 -> 父元素 -> body -> html -> document -> window        
        */

      let father = document.querySelector('.father')
      let son = document.querySelector('.son')
      
      //子元素
      son.onclick = function () {
        alert('我是son1')
      }

      //父元素
      father.onclick = function () {
        alert('我是father')
      }

      //body
      document.body.onclick = function () {
        alert('我是body')
      }

      //html
      document.documentElement.onclick = function () {
        alert('我是html')
      }

      //document
      document.onclick = function () {
        alert('我是document')
      }

      //window
      window.onclick = function () {
        alert('我是window')
      }
    </script>

事件委托(重点)

事件委托：给父元素注册事件,委托子元素来处理
事件委托原理：事件冒泡
事件委托注意点：不能使用this

      ul.onclick = function (e) {
        /* 
        this : 事件源。 这个事件给谁注册的。
        e.target : 事件触发源。 这个事件触发的源头，到底点击的哪一个子元素触发的这个点击事件。
        */
        alert(e.target.innerText)
      }

事件捕获 1.事件捕获：与事件冒泡完全相反。触发子元素的事件时，会先从最顶级父元素window一级一级往下触发。 window -> document -> html -> body -> 父元素 -> 子元素

    2.默认情况下注册的事件都是冒泡类型事件，只有唯一的一种语法可以注册捕获类型事件
addEventListener() ： 第三个参数为true

      let father = document.querySelector('.father')
      let son = document.querySelector('.son')

      //子元素
      son.addEventListener(
        'click',
        function () {
          alert('我是son1')
        },
        true
      ) //捕获

      //父元素
      father.addEventListener(
        'click',
        function () {
          alert('我是father')
        },
        true
      )

      //body
      document.body.addEventListener(
        'click',
        function (e) {
          alert('我是body')
        },
        true
      )

      //html
      document.documentElement.addEventListener(
        'click',
        function () {
          alert('我是html')
        },
        true
      )

      //document
      document.addEventListener(
        'click',
        function () {
          alert('我是document')
        },
        true
      )

      //window
      window.addEventListener(
        'click',
        function () {
          alert('我是window')
        },
        true
      )
    </script>

事件流三个阶段事件流三个阶段 : e.eventPhase 获取事件阶段

捕获阶段
目标阶段
冒泡阶段

阻止事件流动阻止事件流动: e.stopPropagation()

无论是冒泡还是捕捉都可以阻止（停止事件流）

温故而知新