dom&事件流复习回顾

1.事件流，

三个阶段捕获，事件目标，冒泡

2.事件三个的绑定方式

a.标签属性绑定，按钮b.on+type 绑定 c.ele.addEventListener("click", fn, false) IE8 ele.attachEvent("onclick", fn) fn 内的this指向window

3.事件解除绑定

a/b. ele.onclick = nullc. ele.removeEventListener("click", fn, true) 跟绑定时候的参数完全一致，fn必须是同一个

4.阻止默认事件

a.标签属性绑定b.on这种方式绑定 return false,放置到函数末尾c.ele.addEventListener(type, fn, boolean) e.preventDefault()IE8 ele.attachEvent("onclick", fn) e.returnValue = false

5.阻止冒泡/阻止事件传播

a.标签属性绑定b.on这种方式绑定 e.cancelBubble = true;c. ele.addEventListener(type, fn, boolean)e.stopPropagation()冒泡：a.弹窗，点击蒙层消失 b.事件委托/代理

6. 事件对象e，

包含当前事件的信息，状态e || window.event e.type 事件类型e.target || e.srcElment 事件目标e.keyCode 键盘事件中按键的键值e.clientX/e.clientY 鼠标事件中，鼠标的视口坐标e.cancelBubble = true 取消冒泡e.stopPropagation()e.preventDefault()e.shiftKey 组合键按下为truee.ctrlKeye.altKeyDOM document object model

文档对象模型

1. 获取元素的方式

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

document.querySelector("div") 获取单个，找到第一个匹配的就返回，停止查找

document.querySelectorAll("#box .list")

2. 创建元素节点

var div = document.createElement("div") div.innerHTML = "链接"

3. 插入节点到文档

parentNode.appendChild(childNode) 添加到末尾parentNode.insertBefore(newNode, postionNode) 添加到那个元素前面

4. 元素属性操作

ele.getAttribute("class")ele.setAttribute("class", "active")ele.removeAttribute("class")

5. 复制/替换元素

ele.cloneNode(bol)parentNode.replaceChild(newChild, oldChild)

6. 删除元素

parentNode.removeChild(ele)ele.parentNode.removeChild(ele)ele.remove()案例：sina微博