事件-交互
触发-反馈
事件绑定的四种方法
- 句柄绑定事件
<div onclick='fn'>1</div>
<div onclick='function(){}'>1</div>
- ele.οnclick=fn();
- ele.addEventListener(click,fn,事件处理模型:Boolean【false:冒泡,true:捕获】)
- 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指向的兼容性写法
解绑事件
对应的事件绑定方法有对应的解绑方法
- ele.οnclick=null
- ele.removeEventListener(‘click’,【fnName】,false)
注意:这种方式,如果是匿名函数是无法解绑的
- 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 ,右键菜单事件
阻止默认事件的方法有:
- 句柄绑定的事件可以用return false
- e.preventDefault(IE9+)
- 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>