Javascript的事件机制

1、DOM0级事件绑定机制：

        第1种：在HTML中绑定事件采用onclick、onmouseover......形式；

        第2种：在JavaScript文件中，利用元素节点的onxxx设置匿名函数为元素绑定事件。

          例如：【HTML】     <div class="box"></div>

                 【JavaScript】  let boxNode=document.querySelector(“.box”);

          ​​​                                 boxNode.οnclick=function(){

                                                  this.style.backgroundColor=“#3385ff”;

                                            }

2、DOM2级事件绑定机制：添加事件监听器—addEventListener();

      语法格式：元素节点.addEventListener("事件",function(){

                                //节点的执行语句
                        })

      例如：鼠标经过box时添加边框

                 let boxNode=document.querySelector(".box");

                 boxNode.addEventListener("mouseover",function(){

                        this.style.border="solid 1px #3385ff";

                })

3、事件委托机制：将事件绑定在所有元素的公共父元素上。

     真正触发事件的对象：event.target

     例如：元素中有六张图片，鼠标经过图片时改变图片的宽度。

             【HTML】<div class="pic">

                                        <img src="images/01.jpg" />

                                        ......

                              </div>

            【JavaScript】let picNode=document.querySelector(".pic");

                                    picNode.addEventListener("mouseover",function(){

                                        if(event.target.tagName.toLowerCase()==="img"){

                                                event.target.style.width="200px";

                                        }

                                    })

4、事件的传递(冒泡传递|捕获传递)

      从内部元素向父元素逐层传递的过程被称为“事件的冒泡传递”；

      从父元素向内部元素逐层传递的过程被称为“事件的捕获传递”。

      语法格式：元素节点.addEventListener("事件",function(){

                                //节点的执行语句
                        },false|true)

                       默认值为false,事件为冒泡传递        当取值为true时，事件为捕获传递

      让事件停止传递：使用事件对象event的stopPropagation()方法来停止事件的传递

                     【HTML】<div class="first">

                                            <div class="second">

                                                <div class="third"></div>

                                            </div>

                                      </div>

                     【JavaScript】thirdNode.addEventListener("click",function(event){

                                                      event.stopPropagation();

                                                      window.alert("我是THIRD对象")        //我是THIRD对象

                                                })

   若没有"事件停止"则为冒泡传递输出我是THIRD对象 → 我是SECOND对象 → 我是FIRST对象。

当进行事件委托时，公共父元素若没有绑定的事件(例：focus绑定在<div>上)，则需要将事件的传递机制设置为捕获传递才能顺利的完成事件的绑定。

一、元素节点的关联属性

        firstElementChild:返回元素节点中的第一个元素节点。

        lastElementChild:返回元素节点中的最后一个元素节点。

        children:返回元素节点中所有的子元素节点。

        parentElement:返回元素节点的父元素节点。

        previousElementSibling:返回元素节点上面的同级元素节点。

        nextElementSibling:返回元素节点下面的同级元素节点。

二、JavaScript事件

        1、鼠标事件：

                click:鼠标单击事件

                dblclick:鼠标双击事件

                mouseover:鼠标经过        mouseout:鼠标离开

                mousemove:鼠标移动事件

                mouseup:鼠标单击过程中弹起鼠标按键时触发该事件

                mousedown:鼠标单击过程中按下鼠标按键时触发该事件

                focus:获得焦点        blur:释放焦点

        2、键盘事件：

                keypress:当按下键盘上的可打印字符按键时触发该事件；

                        event.keyCode返回按下按键的ASCII码

                                    例：测试按键的ASCII码。

                                    document.body.addEventListener(“keypress”,function(event){

                                                console.log(event.keyCode);

                                    })

                keyup:按键盘时，弹起任意按键时触发该事件；

                keydown:按键盘时，按下任意按键时触发该事件；

        3、表单事件:

                change:当用户修改文本框中的内容后，再释放焦点才触发该事件；

                input：当表单元素的内容发生变化时触发该事件(所有表单通用，且在事件委托时能

                够实现事件的冒泡传递);

       4、 浏览器事件：

                scroll:滚动事件(该事件中，可以使用window.pageXOffset、window.pageYOffset

                返回滚动操作的水平距离、垂直距离)；

                resize:缩放事件(当浏览器窗口发生大小变化时触发该事件

                                             window.innerWidth,返回浏览器客户区的宽度

                                             window.innerHeight,返回浏览器客户区的高度)

三、元素节点的自定义方法

        HTML5技术规定，可以使用data-为元素节点设置自定义属性。

                (自定义属性名必须以data-开头，后接1个或多个短横线连接的任意单词)；

        JS：语法格式：元素节点.dataset.自定义属性名（获取当前对象的自定义属性取值）

                        自定义属性名是将data-去掉，从第二个单词开始驼峰式命名；

        例如：【HTML】  <div class=“dot” data-dot-index=“1”></div>

                   【JS】 event.target.dataset.dotIndex

四、计时器

        window.setInterval()方法实现每隔固定时间执行指定代码的功能；

        语法格式：let 计时器变量=window.setInterval(function(){

                                //每隔固定时间执行的代码

                        },duration)

        参数：duration，以ms（毫秒）为单位指定执行的代码所间隔的时间长度。

        关闭计时器的语法格式：window.clearInterval(计时器变量);