JS事件

事件-交互
触发-反馈

事件绑定的四种方法

1. 句柄绑定事件

<div onclick='fn'>1</div>
<div onclick='function(){}'>1</div>

2. ele.οnclick=fn()；
3. ele.addEventListener(click,fn,事件处理模型：Boolean【false:冒泡，true:捕获】)
4. ele.attachEvent(click,fn)

绑定事件方法	this指向	是否可绑定多个处理程序	兼容性
onclick	元素自身	只能绑定一个	兼容性好
addEventListener	元素自身	可绑定多个	IE9+
attachEvent	window	可绑定多个	IE独有

循环中的事件绑定

html结构

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

• 这样绑定事件的话，每次输出都是4

• 绑定事件如果放到循环中，还用到 i 的话考虑用闭包,可以达到我们想要的效果
  

绑定事件this

绑定事件中
onclick,addEventListener的this指向的是元素自身
attachEvent中this指向的是window,可以用call解决

绑定事件方法	this指向	是否可绑定多个处理程序	兼容性
onclick	元素自身	只能绑定一个	兼容性好
addEventListener	元素自身	可绑定多个	IE9以下不支持
attachEvent	window	可绑定多个	IE独有

解决各个浏览器this指向的兼容性写法

解绑事件

对应的事件绑定方法有对应的解绑方法

1. ele.οnclick=null
2. ele.removeEventListener(‘click’,【fnName】,false)

注意：这种方式，如果是匿名函数是无法解绑的

3. ele.detachEvent(‘on’+click,【fnName】)

事件处理模型

一个对象同一个事件类型只能同时拥有一个事件模型
如果同时绑定两种事件模型，触发顺序，先捕获后冒泡
IE没有事件捕获

事件冒泡

结构上嵌套关系的元素，子元素向父元素冒泡

事件捕获

结构上嵌套关系的元素，子元素向父元素冒泡
ele.removeEventListener(‘click’,【fnName】,true)//第三个参数为true的时候事件模型为事件捕获
没有冒泡
focus,blur,reset,select,submit,change,

阻止冒泡

ele.onclick(function(e){
	//e为事件对象
	e.stopPropagation()//阻止冒泡
	e.cancelBubble=true//IE,chrome
}

兼容IE写法

默认事件

右键默认事件，oncontextmenu ,右键菜单事件
阻止默认事件的方法有：

1. 句柄绑定的事件可以用return false
2. e.preventDefault（IE9+）
3. e.returnValue=false(兼容IE）
   a标签默认跳转
   取消默认事件的方法还有：

<a href="#"></a>
<a href="javascript:void()"></a>

事件源对象

ele.οnclick=function(e){
	e=e||window.event//兼容IE
	
}

事件源对象，是谁触发了这个事件

事件委托

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>