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微博