复习JS事件及DOM

Posted 2020-09-25 张晋铭

[JS中的事件分类]

1、鼠标事件：

       click/dbclick/mousedown/mousemove/mouseout/mouseover/mouseup

 

 2、键盘事件

       keydown:键盘按下去触发

       keypress:键盘按下并松开的瞬间

       keyup:键盘抬起时触发

 

 [注意事项：(了解)]

       ①执行顺序：keydown-keypress-keyup

       ②长按时，会循环不断执行keydown-keypress

       ③有keydown事件时，不一定有keyup事件(事件触发过程，鼠标移开，就不触发 )

       ④keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)

       ⑤keypress区分大小写，keydown和keyup不区分

       ⑥keydown/keyup区分主键盘和小键盘，keypress不区分；

 

 [确定键盘触发按键]

      ①在触发函数中传入参数e，代表按键事件

      ②通过e.keyCode,确定按键Ascii码值，进而确定按键；

      ③所有浏览器系统的写法(一般不必要)；

 

 var evn=e||event;//取到键盘事件

 var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码

 

 

[JS中的事件流]

 

 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；

 DOM0模型，均为事件冒泡；

 IE中使用.attachEvent()添加的事件，均为冒泡；

 其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；

 

 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；

 只有使用.addEventListener添加事件，并设置第三个参数为true时，才进行捕获；

 

 ↓  当前元素 ↑

 ↓  ↑

 冒  父元素   捕

 ↓  ↑

 泡 爷爷元素 获

 ↓  ↑

  DOM根节点

 

 3、阻断事件冒泡：

 IE浏览器中：将e.cancelBubble属性设为true；

 其他浏览器：调用e.stopPropagation();方法

 兼容写法：function myParagraphEventHandler(e) {

                                         e = e || window.event;

                                              if (e.stopPropagation) {

                                                  e.stopPropagation(); //IE以外

                                               } else {

                                                   e.cancelBubble = true; //IE

                                                         }

                                              }

 

 3、阻止默认事件：

 IE浏览器中：将e.returnValue属性设为false；

 其他浏览器：调用e.preventDefault();方法

 兼容写法：function eventHandler(e) {

                                         e = e || window.event;

                                        // 防止默认行为

                                                if (e.preventDefault) {

                                        e.preventDefault(); //IE以外

                                                 } else {

                                        e.returnValue = false; //IE

                                                  }

                                            }

 

 

【DOM树节点】

    DOM节点分为三大类：元素节点、文本节点、属性节点

 

    文本节点、属性节点，为元素节点的两个子节点；

 

    通过getElement系列方法，可以去到元素节点。

 

 

【查看节点】

     1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；

     2、getElementsByName：通过Name取到一个数组，包含1到多个节点；

使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length

 

【查看和设置属性节点】

    1、查看属性节点： getAttribute("属性名");

    2、设置属性节点： setAttribute("属性名","属性值");

 

 

【JS修改样式总结】

    1、.className : 为元素设置一个新的class名字；

    div1.className = "class1";

 

    2、.style : 为元素设置一个新的样式，注意驼峰命名法；

    div1.style.backgroundColor = "red";

 

    3、.style.cssText : 为元素同时修改多个样式；

    div1.style.cssText = "width:100px;height100px;";

 

【查看节点】

    1、tagName属性：获取节点的标签名；

    2、innerhtml:设置或者获取节点内部的所有HTML代码；

    3、innerText:设置或者获取节点内部的所有文字；