单词小记

event       事件
node        节点
next        下一个
sibling     兄弟姐妹
previous    从前的
prevent     防止
propagation 传播

1. 节点操作

1.1 节点关系

父级，子级，兄弟
1.父级关系
    子级节点.parentNode
    获取子级最近的上一个父节点，没有父节点返回null
2.子级关系
    父级节点.childNodes
        特点：会返回所有子节点，包括元素节点和文本节点（空格换行等）
    父级节点.children
        特点：只返回元素节点
        
        * 获取具体子节点（第一个/最后一个）
            parentNode.children[]
            parentNode.firstElementChild
            parentNode.lastElementChild
3.兄弟关系
    下一个节点
        node.nextElementSibling          
    上一个节点
        node.previousElementSibling

1.2 创建节点

var a = document.creatElement("标签名")

1.3 添加节点

parentNode.appendChild(child(比如上面的a节点))

1.4 删除节点

node.removeChild(child) 从node节点删除一个子节点，返回删除的节点

1.5 创建元素的三种方式

document.write()
element.innerHTML()
document.createElement()

2. 事件高级

2.1 注册事件

1.获取事件源(五种，get.../query...)
2.两种注册事件
    1.传统模式 注册事件
        element.onclick(on开头的事件类型)=function(){}(事件处理函数)
        特点：
            同一个元素同一个事件只能设置一个处理函数，
            设置多个，后面函数会覆盖前面的元素
    2.监听注册方式 注册事件
        element.addEventListener(type,listener,useCapyure)
        type: 事件类型字符串，如click，mouseover，不要加on
        listener：事件处理函数
        useCapture：默认false，事件冒泡执行，从内到外
        特点：
            同一个元素同一事件可以注册多个监听器
            按注册顺序依次执行

2.2 删除事件

1.传统模式 删除事件
    element.onclick=null
2.监听模式 删除事件
    element.removeEventListener(type,listener名)

3. DOM事件流

(获取元素阶段)捕获阶段-》当前目标阶段-》冒泡阶段(事件执行顺序)

3.1 事件冒泡

从内向外执行，事件开始由具体元素，逐级向上传播到DOM最顶层节点

3.2 事件捕获

从外向内执行，事件由DOM顶层节点，逐级向下传播到具体元素

3.3 事件对象

事件发生后，跟事件相关的一系列数据就会放到这个对象中
比如鼠标事件中，谁绑定了这个事件，鼠标的位置
在事件处理函数中声明一个形参（e）用来接收事件对象
e.target和this的区别
this是事件绑定的元素
e.target是事件触发的元素

3.4 阻止默认行为

e.preventDefault();

3.5 阻止事件冒泡

e.stopPropagation();

3.6 事件委托

概念及原理：
    给父元素注册事件，不给子元素注册事件，利用当子元素触发时，冒泡到父元素，从而操作相应的子元素
作用：
    只操作一次DOM，提高程序性能
    动态创建的子元素也拥有事件

4.常用鼠标事件

e.clientX/Y         鼠标在可视区的x,y坐标          
e.pageX/Y           鼠标在整个页面文档的x，y坐标
e.screenX/Y         鼠标在电脑屏幕的坐标
element.offset left/top,
width/hight