JS事件模型
2015-09-05 11:20:57 0 举报AI智能生成
JavaScript事件模型。
作者其他创作
大纲/内容
一、事件阶段
1、捕获阶段
2、目标阶段
3、冒泡阶段
二、事件模型
1、原始事件模型（IE）
1）事件监听
element.attachEvent(event, fn); //event为onclick形式
2）事件移除
element.detachEvent(event, fn); //event为onclick形式
3）停止冒泡
window.event.cancelBubble = true;
4）阻止默认行为
window.event.returnValue = false;
2、标准事件模型
1）事件监听
element.addEventListener(event, fn, useCapture); //event为click形式；useCapture为false表示事件冒泡，为true表示事件捕获
2）事件移除
element.removeEventListener(event, fn, useCapture); //event为click形式；useCapture为false表示事件冒泡，为true表示事件捕获
3）停止事件传播（冒泡&捕获）
event.stopPropagation();
event.stopImmediatePropagation(); //阻止所有事件传播
4）阻止默认行为
event.preventDefault();
3、不冒泡的事件
blur、focus、load、unload
三、事件兼容方法
var EventUtil = {
//事件监听
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//移除监听
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
//获取事件
getEvent: function(event){
return event ? event : window.event;
},
//获取事件源点
getTarget: function(event){
return event.target || event.srcElement;
},
//阻止事件默认行为
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
//阻止冒泡
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
四、自定义事件
var myEvent = new CustomEvent('myevent', {
detail: {
name: 'firstEvent'
},
bubble: true,
canclebubble: false
});
window.addEventListener('myevent', function(event){
console.log(event.detail.name);
});
window.dispatchEvent(myEvent);
0 条评论
下一页
