JS DOM event

什么是event：

               浏览器自动触发的，或用户手动触发的页面状态的改变

事件处理函数：

                           当事件发生时，自动触发的函数——回调

如何绑定事件处理函数：3种

  1、在HTML中绑定：

               <ANY on事件名="js语句"

               问题：不符合内容与行为分离的原则，不便于维护和重用

  2、在JS中绑定:

                1、用on事件名：

                          elem.on事件名=function(){

                                 this -> 当前触发事件的.前的元素对象elem

                           }

                 问题：一个事件只能绑定一个事件处理函数

     解决：

                  2、用addEventListener：

                           elem.addEventListener("事件名",fn)

                           移除事件：elem.removeEventListener("事件名",fn)

   总结：如果一个事件只有一个处理函数，且不会被移除时，首选onXXX——简单

        如果一个事件需要同时触发多个处理函数，或处理函数可能被移除时，首先addEventListener——灵活

    其实addEventListener可以用匿名函数绑定

    问题：使用匿名函数绑定的事件监听无法移除

    解决：如果一个事件监听可能被移除，就必须使用有名的函数绑定

事件模型

DOM：3个节点

 1、捕获: 由外向内，逐级记录各级父元素已经绑定的事件处理函数

 2、目标触发: 优先触发目标元素上的事件处理函数

   目标元素(target): 最初实际触发事件的元素

 3、冒泡: 由外向内，按捕获阶段记录的反向，逐级触发父元素上的事件处理函数

事件对象

什么是事件对象：

       事件发生时自动创建的

       封装事件信息的对象 提供了操作事件的API

何时：2种

  1、获得事件信息

  2、修改事件的行为时

如何：

  获取：事件对象，默认作为事件处理函数的第一个参数传入。

    function 事件处理函数(e)

      //在触发事件时，参数e会自动收到事件对象

API：

 取消冒泡：e.stopPropagation()

 利用冒泡：

   优化：尽量少的绑定事件处理函数

     为什么：因为浏览器是用遍历方式查找事件监听并执行，所以事件监听的个数越多，导致页面响应速度慢

   如何: 如果多个平级子元素绑定相同的事件时，仅需要在父元素绑定一次，所有子元素公用即可！

     2个难题：

      1、如何获得最初触发事件的目标元素:

        问题：this不再指实际单击的子元素    而是指向公共父元素

        解决：e.target代替this

      2、目标元素一定是想要的吗

        问题：可能点在子元素，也可能点在父元素

        解决：利用冒泡的事件处理函数中，都要先判断目标元素是否想要，再决定是否触发事件。

  阻止默认行为：e.preventDefault()

    何时：只要默认行为不是想要的，就可取消

    如何：2个固定场景

      1、阻止a元素作为按钮时，向url末尾添加锚点地址

      2、配合submit按钮阻止表单提交

       表单的onsubmit事件会在以任何方式提交表单时自动触发。是表单提交的最后一关。专门用于表单中所有验证，决定最终能否提交

       总结：2中控制表单提交的方式

         1、type="button"  只有验证通过才form.submit()

         2、type="submit"          只要验证未通过就e.preventDefault();

         3、HTML5 拖拽API 也要用e.preventDefault()阻止浏览器自带的默认拖拽行为

  事件坐标：事件发生时，鼠标的坐标位置:

    3组坐标系：

    1、相对于屏幕左上角的坐标: e.screenX/screenY

    2、相对于文档显示区左上角: e.clientX/clientY

    3、相对于父元素左上角: e.offsetX/offsetY

页面滚动：

  事件：window.onscroll 在页面发生滚动时自动触发

  属性：滚动的距离: scrollTop

    body的顶部，超出文档显示区顶部的距离

    document.body.scrollTop