节点，事件

DOM节点

        就是组成页面的任何一个内容（结构，元素，注释...）

        现在说的节点包含但不限于元素（标签）

        常见的四种节点

                元素节点：每一个标签

                文本节点：页面上每一段文本（包含换行和空格）

                属性节点：书写在标签上的每一个属性

                        注意：属性节点不会独立出现，也不会和任何其他节点产生父子集关系

                注释节点：页面上的每一段注释（包含换行和空格）

        获取节点

                获取元素节点

                        就是指获取元素

                常规获取

                                document . getElementByTagName()

                                document . getElementById()

                                document . getElementByClassName()

                                document . getElementByName()

                                querSelector()

                                querSelectorAll()

        非常规获取

                HTML: document . ddocumentElement

                head: document . head

                body : document . body

        获取节点

                childNodes

                        语法：父元素 . childNodes

                        返回值：是一个伪数组，里面是所有的节点

                children

                        语法：父节点 . children

                        返回值：父节点内部的元素节点，伪数组

                firstChild

                        语法：父节点 . firstChild

                        返回值：父节点内第一个节点

                firstElementChild

                        语法：父元素 . firstElementChild

                        返回值：父节点这种第一个元素节点

                lastChild

                        语法：父节点 . lastChild

                        返回值：父节点内最后一个节点

                lastElementChild

                        语法：父元素 . lastElementChild

                        返回值：父节点这种最后一个元素节点

                previousSibling

                        语法：节点 . previousSibling

                        返回值：就是该节点的上一个兄弟节点

                previousElementSibling

                        语法：节点 . previousElementSibling

                        返回值：就是该节点的上一个元素节点

                nextSibling

                        语法：节点 . nextSibling

                        返回值:就是该节点的下一个兄弟节点

                nextElementSibling

                        语法：节点 . nextElementSibling

                        返回值：就是该节点的下一个兄弟元素节点

                parentNode

                        语法：节点 . parentNode

                        返回值：该节点的父节点

                parentElement

                        语法：节点 . parentElement

                        返回值：该元素的父元素节点

                attributes

                        语法：节点 . attributes

                        返回值：就是该元素上的所有属性

        节点操作

        常见的操作

                创建节点

                创建元素节点

                        语法：document . createElement(" 你要创建的标签 ")

                创建文本节点

                        语法：document . careateTextNode("文本内容")

                插入节点

                        吧一个节点插入另一个节点的内部

                        常用方法

                                appendChild（）

                                        语法：父节点 . appendChild(要插入的节点)

                                        插入位置：父节点的最后

                                insertBefore（）

                                        语法：父节点 . insertBefore（要插入的节点，谁的前面）

                替换节点

                就是用一个节点吧另一个节点替换掉

                        replaceChild（）

                                语法：父节点 . replaceChild(换上节点，换下节点)

                删除节点

                        removeChild（）

                                语法：父节点 . removeChild(要删除的节点)

                        remove（）

                                语法：要删除的节点 . remove()

                克隆节点

                        常用方法

                        clondNode（）

                                语法：要克隆的节点 . cloneNode(参数)

                                参数：默认值是flase，表示不克隆后代元素

                                        选填是true，表示克隆后代元素

节点属性

常见的节点属性

        语法：节点 . nodeType

        nodeType

                返回值：是一个数字

                        元素节点：1

                        属性节点：2

                        文本节点：3

                        注释节点：8

        nodeName

                返回值

                        元素节点：大写标签名

                        属性节点：属性名

                        文本节点：#

                        注释节点：#

        nodeValue

                返回值：

                        元素节点：null

                        属性节点：属性值

                        文本节点：文本内容

                        注释节点：注释内容

事件

        指用户对某事物由于某种行为所产生的操作

两种情况

        程序员：给某种事物绑定某种行为，不执行

        用户：让这个行为发生，这个时候会触发这个行为

事件三要素

        事件源：就是把事件绑定给的那个元素

        事件类型：行为 （click，）

        事件处理程序（事件处理函数）：就是行为发生以后要执行的函数

        注意：每一个事件都有三要素

事件绑定

        DOM 0 级事件绑定

                语法：事件源 . on事件类型 = 事件处理程序

                注意：这样的绑定方式给同一个事件源只能绑定一次同类型事件，如果多次绑定，后面的把前面的覆盖

        DOM 2 级事件绑定（事件监听 / 事件侦听器）

                语法：事件源 . addEventListener(' 事件类型 '，事件处理程序)

                注意：可以给同一个事件源绑定多个同类型事件

顺序绑定，顺序执行

事件解绑

        DOM 0 级解绑

                语法：事件源 . on事件类型 = null / undefined

                意义：就是当我们行为触发以后没有要执行的代码

                        就相当于解绑时间

        DOM 2 级事件解绑

                语法：事件源 . removeEvenListener(事件类型，事件处理函数)

                注意：如果想要解绑，事件处理程序需要单独定义，绑定和解绑的函数要是同一个函数

事件类型

        我们对事件类型进行分类

                鼠标事件

                键盘事件

                表单事件

                触摸事件

                浏览器事件

                拖拽事件

                其他事件

        鼠标事件

                借助于鼠标来触发的事件

                        click：鼠标左键单击行为

                        dblclick：鼠标左键双击行为

                        contextmenu：鼠标右键单击行为

                        mouseover：鼠标进入事件

                        mouseout：鼠标离开事件

                                特点：进入后代元素中也会触发这个事件

                        mouseenter：鼠标进入事件

                        mouseleave：鼠标离开事件

                                特点：不会在后代元素身上触发事件

                        mousemove：鼠标移动事件

                        mousedown：鼠标按下事件

                        mouseup：鼠标抬起事件

        键盘事件

                由键盘上的按键触发的事件

                        keydown：键盘按下事件

                        keyup：键盘抬起事件

                        keypress：键盘的键入事件

                        这个事件可以绑定给任何按键，但是只有能键入内容的按键才能触发

        表单事件

                常用方法

                        focus：获取焦点事件（聚焦）

                        blur：失去焦点事件（失焦）

                        input：随着输入和删除实时触发

                        submit：表单提交事件

                                这个事件要添加给form标签

                        reset：表单重置事件

                        change：内容发生改变以后触发事件

        触摸事件

                添加给可以触摸改变的设备

                常用方法

                        touchstart：就是在接触到屏幕时触发

                        touchmove：在移动时触发这个事件

                        touchend：离开屏幕一瞬间触发这个事件

        拖拽事件

                在浏览器中内容被拖拽

                一个拖拽时间可能关联两个元素

        拖拽元素

        拖放元素

        拖拽元素

        拖拽前提是这个元素可以被拖拽

                属性：draggable = "true"，使之可以被拖动

        拖拽事件

                dragstart：开始拖拽的一瞬间开始触发

                drag：开始移动的时候触发这个事件

                dragend：释放的一瞬间触发

        拖放元素

                dragenter：进入要存放的元素的时候触发（光标进入时）

                dragleave：就是在元素离开时触发（光标离开时）

                drop：在元素移动时触发

        注意：需要在这个事件触发之前需要一个事件，这个事件叫做dragover

        需要在这个事件中阻止默认行为

                retrn flase

事件对象

        当事件发生以后，对本次事件的信息的一个详细记录

        当事件触发后，专门用来记录本次事件的详细信息的东西

获取事件对象

        就是在事件处理函数中的小括号中传递一个参数即可

        这个参数就是我们的事件对象

        一般这个参数叫做：e，ev，event

事件对象的信息之鼠标事件

        就是这个信息在事件对象内部

        想要获取到这个信息，前提一定要有事件对象，最前提有事件行为触发

        鼠标事件中

                最相关的是鼠标坐标点

                三组获取坐标点方法

                       client

                        offset

                        page

        client一组

                语法：获取x轴：事件对象 . clientX

                        获取y轴：事件对象 . clientY

                返回值：就是一组坐标点

                注意：返回的这组坐标点是相对于浏览器窗口左上角的距离

        offset一组

                语法：获取x轴：事件对象 . offsetX

                        获取y轴：事件对象 . offsetY

                返回值：就是一组坐标点

                注意：相对与当前元素左上角的距离

        page一组

                语法：获取x轴：事件对象 . pageX

                        获取y轴：事件对象 . pageY

                返回值：就是一组坐标点

                注意：相对与文档流左上角的距离

事件对象内信息之键盘事件

        按下的是哪个按键（按键的值）

        键盘上每一个按键都有一个值

        获取按键值

                语法：事件对象 . keyCode

                返回值：按键的值

        组合按键

                altKey：

                shiftKey：

                ctrlKey：

                metaKey（win系统的是win键，os系统的是command键）

        返回值都是一个布尔值

                ture表示按下

                false表示没有按下

事件传播

        当事件发生以后，该行为沿着结构父级向上传播，直到window

        如果我们的上级中也有同类型的事件，就会触发

事件流

        就是事件执行的过程

        三个过程

                事件捕获：就是从window到准备触发事件的目标元素的过程

                事件目标：就是准确触发事件的某个元素

                事件冒泡：就是

        从准确触发事件的那个目标到window的过程

        标准浏览器

                默认在冒泡阶段执行

                可以在捕获阶段执行，但需要执行一些操做

        ie浏览器：

                只能在冒泡阶段执行

                如何在捕获阶段执行

                必须在标准浏览器中

                需要DOM2级事件绑定

        需要传递第三个参数，默认是false，表示在冒泡阶段执行

                选填是true，表示在捕获阶段执行

阻止事件冒泡

        就是有的时候不需要这个行为继续向上传播，这个时候就需要阻止这个行为向上传播

        又因为我们的事件是默认在冒泡阶段执行

        所以我们把这个阻止事件传播也一般叫做阻止事件冒泡

        如何阻止事件冒泡

                标准浏览器

                        语法：事件对象 . stopPropagation()

        ie低版本

                ​​​​​​​        ​​​​​​​        

        阻止默认行为

                第一种方式

                        标准浏览器：

                                语法：事件对象 . prevntDefault()

                ie低版本

                        语法：事件对象 . returnValue = false

                兼容性问题

                        try {} catch（）{}

        第二种方式

                return false

        这种方式可以阻止默认行为，但是需要写在所有代码的末尾

事件委托

        就是本应该添加在自己身上的事件，添加在结构上级

        采用就近原则，委托给父级

        找到一个公共的父级

        原理

利用事件冒泡，因为事件冒泡直接到window

事件委托

        语法：事件对象 . target