- 如何绑定事件处理函数
- 事件处理程序的运行环境
- 解除事件处理程序
- 事件处理模型————冒泡、捕获
- 默认事件
- 事件对象
- 事件委托
如何绑定、解除事件处理函数
一、绑定事件处理函数
1.ele.on xxx = function(event){}
- 兼容性好，但是一个元素的同一个事件只能绑定一个处理函数
- 基本等同于写在HTML行间
- 行间句柄绑定示例：<div style="width:100px;height:100px;background-color:red;" onclick="console.log('谁点我了？')"></div>
2.dom.addEventListener(‘事件类型‘，处理函数，false)；
- IE9以下不兼容，可以为一个事件绑定多个处理程序（W3C标准）
- 绑定同一个处理函数多次，不能执行多次
- 第三个参数指定事件是否在捕获或冒泡阶段执行
3.dom.attachEvent('on'+ 事件类型 ， 处理函数)；
- IE独有，一个事件同样可以绑定多个处理程序
- 绑定同一个处理函数多次，可以执行多次
- 示例：dom.attachEvent('onClick',function(){});
二、事件处理程序的运行环境
1.ele.onxxx = function(event){} ==> 程序this指向是DOM元素本身。
2.dom.addEventListener(type,fun,false); ==> 程序this指向是DOM元素本身。
3.dom.attachEvent('on' + Type ,fun); ==>程序this指向是window。
//实现全兼容性的事件函数绑定方法 //addEventListener是w3c标准方法，IE9以下不兼容 //attachEvent是ie的独有方法，但是this指向window，通过call修正this指向dom本身 //on...方式不能绑定一个方法function addEvent(elem,type,handle){ if(elem.addEventListener){ elem.addEventListener(type,handle,false); }else if(elem.attachEvent){ elem.attachEvent('on' + type, function(){ handle.call(elem); }); }else{
type = type.substring(0,1).toUpperCase()+type.substring(1); elem['on' + type] = handle; } }
