JavaScript基础学习之DOM—事件高级

注册事件（绑定事件）

        1、传统注册方式

                   利用on开头的事件，如btn.οnclick=functon(){}

                   特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数

         2、方法监听注册方式

                    addEventListener()

                    特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。

eventTarget.addEventListener(type, listener[, userCapture]) //type:事件类型字符串，如click 、mouseover，注意要加单引号； listener：事件处理函数，事件发生时，会调用该监听函数

删除时间（解绑事件）

eventTarget.onclick=null; //传统注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);  //方法监听注册方式

DOM事件流

        事件流描述的是从页面中接收事件的顺序。

        事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流  。

        DOM事件流的三个阶段

             1、JS代码中只能执行捕获或者冒泡其中的一个阶段。

              2、onclick 和attachEvent只能得到冒泡阶段。

              3、addEventListener(type，listener[,usecapture])第三个参数如果是true，表示在事件捕
                   获阶段调用事件处理程序;如果是 false (不写默认就是false )，表示在事件冒泡阶段调                       用事件处理程序。

                4、在实际中更关注事件冒泡。    onblur、onfocus、onmouseenter、onmouseleave没                   有冒泡。

事件对象

                event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。这个event【function后面的括号里】是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数).        

                e.target    指向我们点击的对象，即谁触发了事件

                this：  谁绑定了事件

阻止默认行为

        阻止默认行为（事件），如让链接不跳转，提交按钮不提交

e.preventDefault();

阻止事件冒泡：

e.stopPropagation();   //
e.cancelBubble=true;    //低版本浏览器

事件委托（代理、委派）

        原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

案例:给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击li，事件会冒泡到ul上ul有注册事件，就会触发事件监听器。

常用键盘事件

        onkeyup   //某个键盘被松开

        onkeydown      //某个键盘按键被按下

        onkeypress   //某个键盘按键被按下   但不能识别功能键

        键盘事件的事件对象中的属性KeyCode可以返回该键的ASCLL码值，onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。