1.事件模型各阶段
DOM Level 2 Events(事件模型):捕获阶段-目标阶段-冒泡阶段
事件监听:
/*
*event: 字符串,指定事件名
*function: 指定要事件触发时执行的函数
*useCapture: 布尔值,指定事件是否在捕获或冒泡阶段执行
*/
element.addEventListener(event, function, useCapture)
复制代码
移除事件监听:
element.removeEventListener(event, function, useCapture)
复制代码
Internet Explorer 8 及更早IE版本: 目标阶段-冒泡阶段
事件监听:
element.attatchEvent(event, function)
复制代码
移除事件监听:
element.detachEvent(event, function)
复制代码
2.事件对象
- DOM事件模型中的事件对象常用属性:
- type用于获取事件类型
- target获取事件目标
- stopPropagation()阻止事件冒泡
- preventDefault()阻止事件默认行为
- IE事件模型中的事件对象常用属性:
- type用于获取事件类型
- srcElement获取事件目标
- cancelBubble阻止事件冒泡
- returnValue阻止事件默认行为
3.事件委托/代理
优势:
- 节省内存占用,减少事件注册
- 新增子对象时无需再次对其绑定事件,适合动态添加元素
示例:
<ul id="parent">
<li class="child">one</li>
<li class="child">two</li>
<li class="child">three</li>
</ul>
<script type="text/javascript">
//父元素
var dom= document.getElementById('parent');
//父元素绑定事件,代理子元素的点击事件
dom.onclick= function(event) {
var event= event || window.event;
var curTarget= event.target || event.srcElement;
if (curTarget.tagName.toLowerCase() == 'li') {
//事件处理
}
}
</script>
复制代码
4.实现事件模型
编写bind绑定,trigger触发函数
function Emitter() {
this._listener= []; //_listener[自定义的事件名]= [所用执行的匿名函数1,所用执行的匿名函数2,...]
};
Emitter.prototype.bind= function(eventName, handle) {
var listener= this._listener[eventName] || []; //是否存在eventName事件,否则新建数组
listener.push(handle);
this._listener[eventName]= listener;
};
Emitter.prototype.trigger= function(eventName) {
var args= Array.prototype.slice.apply(arguments).slice(1); //取得除eventName之外的其他参数
var listener= this._listener[eventName];
if (!Array.isArray(listener)) {
return false;
};
//遍历事件
listener.forEach(function(handleFun) {
try{
handleFun.apply(this, args);
}catch (e){
console.error(e);
}
});
};
// 实例
var emitter= new Emitter();
// 绑定函数
emitter.bind('output', function(arguments_1, arguments_2) {
console.log(arguments_1, arguments_2);
});
//触发函数
emitter.trigger('output', 'a', 'b');
复制代码
5.事件广播
var event= new Event('build');
// listener for the event
element.addEvenetListener('build', function(e) {...}, false);
//Dispatch the event
element.dispatchEvent(event);
复制代码