事件

dom2事件-捕获阶段(window->html->body->button)-到达阶段(刚好到button上)-冒泡阶段(button->body-html->window) this 代表目标现在元素

事件绑定
addEventListener('click',function(){console.log(this)},true||false) 可以写多次不会重复 true捕获阶段调用 false冒泡阶段处理 默认false 添加事件监听器 相当于执行函数
removeEventListener('click',hander,false) 移除事件类型

ie
attachEvent('button''onclick',function(e){console.log(this)}) 绑定事件 只能发生在冒泡阶段 这里的this代表window
detachEvent('button','onclick',handler) 解除绑定

事件兼容写法
button.addEventListener('click',function(){console.log(this.innerText)}) 获取我点击的目标html或者其他
button.addEventListener('click',function(e){console.log(e.target)}) 事件真实的触发元素是什么

事件对象上的属性和方法
button.addEventListener('click',function(){e.stopPropagation()}) 取消事件冒泡 停止传播
link.addEventListener('click',function(){e.preventDefault()}) 阻止默认事件 如forem表单的验证 a链接的跳转
getEvent
get.Target

ie低版本
attachEvent(on + click，事件处理程序)没有true和false 会在全局变量内运行 this 代表window 多个事件方法的时候是没有规律的
detachEvent 解除绑定

常见事件类型
click 单击
dbclick 双击

mouseenter 鼠标放置碰到元素的时候 成对出现 对子元素不生效 推荐
mouseleave 鼠标离开元素的时候 成对出现 对子元素不生效 推荐

mouseover 鼠标放置碰到元素的时候 成对出现
mouseout 鼠标离开元素的时候 成对出现

focus 获取焦点的时候 input
blur 失去焦点的时候 input

keyup 键盘松开的时候 input
change 内容发生改变的时候 input 是一个blur 然后判断内容是不是发生了变化
submit 当form表单提交的时候 比如注册验证
scroll 当窗口滚动的时候
load 加载的时候 如图片加载
error 出现错误时
keypress 回车

this.classList.add("class") 自己添加一个class 推荐
this.classList.remove("class") 自己删除一个class
[].indexof.call(tabs,this)

事件封装 全版本通用
function(node,type,handler) {

}

var node = document.getElementsByclassName(".box")[0]

node['eclickfunction(){xxx}'] = function(e){
console.log(e)
console.log(this)
}

node["clickfunction(){xxx}"] = function(){
node"eclickFunction(){xxx}"
}

node.attachEvent("on" = click,node["click" + handler])

事件代理-事件冒泡的使用
使用场景：页面上一些新增元素需要绑定事件

实现一个点击和添加 todolist
var liNodes = document.querySelectorAll(".container")
var showNode = document.querySelector("#show")
var addNode = document.querySelector("#btn")
var addIpt = document.querySelector("#add-ipt")
var container = document.querySelector(".container ul")

container.addEventListener("click",function (e) {
var target = e.target
if (target.tagName.toLowerCase() === "li") {
showNode.innerText = target.innerText
}
})
addNode.addEventListener("click",function () {
var node = document.createElement("li")
node.innerText = addIpt.value
container.appendChild(node)
})