绑定事件

1. ele.onclick = function() {}
   同一元素只能绑定一个点击事件，后续绑定会替代先前绑定的事件。
   行间绑定：<div onclick="console.log('a')"></div>
2. ele.addEventListener(事件, 方法, false)

ele.addEventListener("click", function(){
  console.log("点击")
}, false)

如果一个元素绑定了两个相同的事件，前提是匿名函数，则都会绑定成功依次执行。

//eg1: 
ele.addEventListener("click", function(){
  console.log("a")
}, false)
ele.addEventListener("click", function(){
  console.log("b")
}, false)
// 依次执行，打印出a和b

//eg2: 
ele.addEventListener("click", demo, false)
function demo() {
  console.log("a")
}
ele.addEventListener("click", demo, false)
// 只打印出a

3. ele.attachEvent("on" + 事件, 方法) IE浏览器独有

ele.attachEvent("onclick", function(){
  console.log("点击")
})

运行环境

1. ele.onxxx = function(event) {}
2. obj.addEventListener(type, fn, false)
   两个事件的this，都指向dom元素本身。
3. obj.attachEvent("on" + type, fn)
   IE独有的事件this指向window

解除绑定

1. ele.onxxx = false / null
2. ele.removeEventListener(type, fn, false)
3. ele.detachEvent('on'+type, fn)

若绑定匿名函数，则无法解除

事件处理模型 —— 事件冒泡、捕获

事件冒泡

定义：结构上嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上，由子到父）

事件捕获

定义：结构上嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件原元素）。（自顶向下，由父到子）

触发顺序：先捕获，后冒泡

focus, blur, change, submit, reset, select 等事件没有冒泡功能。

取消冒泡

1. W3C标准 event.stopPropagation();但不支持IE9以下版本；
2. IE event.cancelBubble = true;

阻止默认事件

1. return false
2. event.preventDefault() W3C标准，IE9以下不兼容
3. event.returnValue = false 兼容IE

行间取消a标签默认事件 <a href="javascript:void(0)"></a>

事件对象

event || window.event 用于IE

事件源对象：

1. event.target 火狐
2. event.srcElement IE
3. 这俩chrome都有

兼容性写法

ele.onclick = function(e) {
  var event = e || window.event;
  var target = event.target || event.srcElement;
}

事件委托

利用事件冒泡和事件源对象进行处理
优点：

1. 性能：不需要循环所有的元素一个个绑定事件
2. 灵活：当有新的子元素时不需要重新绑定事件

//10个li分别添加点击事件
let ul = document.getElementsByTagName("ul")[0]
ul.addEventListener("click", function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;
    console.log(target.innerText)
}, false);

事件分类

鼠标事件

click 点击事件，只能监听鼠标左键
mousedown 鼠标按下
mouseup 鼠标抬起
contextmenu 鼠标右键
mouseover 当鼠标进去元素区域触发
mouseout 当鼠标离开元素区域触发
onmouseenter 当鼠标进去元素区域触发
onmouseleave 当鼠标离开元素区域触发

判断鼠标哪个键点击：e.button
e.button == 0 鼠标左键
e.button == 1 鼠标滚轮
e.button == 2 鼠标右键
触发的事件只有mouseup或者mousedown

键盘事件

keydown 按下
keyup 抬起
keypress

keydown>keypress>keyup

keydown keypress区别：
keydown 可以响应任何键盘按键，keypress 只可以相应字符类键盘按键
keypress 返回ASCII码，可以转换成相应字符。String.fromCharCode()

移动端事件

touchstart 手指按下
touchend 手指抬起
touchmove 手指移动

文本类操作事件

input 内容有变化就会触发
change 只要和input事件发生了改变时，失去焦点就触发。
focus 获取焦点
blur 失去焦点

窗体类操作事件

scroll 当滚动条滚动触发