Dom与事件笔记（兼容性的问题就不列举那么多了）

<!-- 关于dom 详细总结 -->

 

<!-- 

    一，dom操作获取节点

        1，document.getEementById();

        2, document.getElementByTagName();

        3, document.getElementByClassName();

        4, document.querySelector();

        5, document.querySelectorAll();

        6, Node节点来获取

 -->

 <!-- 

     二 dom 的增删改查

       1 ， 增加

                 appendChild（）

                 insertBefore（）

       2 ， 创建

                 document.write();

                 innerHTML

                 creatElement

       3,   删除 

                 removeChild（）

                 

       4，  改 

                属性来改   src  href  title

                内容       innerHTML  innerText

                表单       value  type  disable

                样式       style  classname

  -->

 

  <!-- 

      三 事件

            1 注册事件

                    传统：element.on事件

                    监听的方法：element.addEventListener('事件'，fn ， true/false)  

                    ie678 ： element.attchEvent；

            2 销毁事件

                    传统 ： element.事件 = null;

                    方法监听：element.removeEventListener('事件'，fn)

                    ie678 ：element.datachEvent('事件'，fn)；

            3 事件类型 

                    mouseEvent 

                            onclick

                            onmouseover   会有事件冒泡行为 鼠标经过子元素是会再触发一次事件

                            onmouseout

　　　　　　　   onmouseenter

　　　　　　　　onmouseleave  不会有事件冒泡行为　　　　

                            onfocus

                            onblur

                            onmousemove

                            onmouseup

                            onmousedown

                            contextmenu

                    KeyboardEvent

                            keyup

                            keypress  不识别功能键  识别大小写

                            keydown   是被功能键    不区分大小写

　　　　　　滚动事件

　　　　　　　　scroll

　　　　　  change事件

　　　　　　　　change

            4 事件对象

                    mouseEvent object

                            event.target 触发事件的元素 （this返回绑定事件的元素）

                            event.type   得到事件

                            event.preventdefault() 阻止事件默认行为  可与contextmenu事件组合使用静止修改文档内容

                            event.stopPropagation() 阻止冒泡

                            event.clientX 鼠标距离可视区X轴距离

                            event.clientY 鼠标举了可视区Y轴距离

                            event.pageX   鼠标距离页面文档X轴距离

                            event.pageY   鼠标距离页面文档Y轴距离 

                            event.screenX 鼠标距离屏幕x轴距离

                            event.screenY 鼠标距离屏幕Y轴距离

                            

                    KeyboardEvent object

                            keyCode   可获取某个按键的ASCII编码

                             

            5 事件冒泡与事件捕获及事件委托

                    冒泡：  通过事件对象的stopPropagation方法来阻止；

                    捕获：

                    事件委托：将事件侦听器绑定父元素，通过事件冒泡机制来实现子元素对事件的触发

 

　　　6 三种事件注册对于捕获与冒泡的兼容性

　　　　　　1 element.addEventListener（'事件'，fn，true/false）  第三个参数为true为捕获阶段执行，为false在冒泡阶段执行

　　　　　　2 element.on'事件'  与 element.attachEvent('事件'，fn)  只有冒泡行为

   -->