事件流
定义：面中接收事件的顺序
事件冒泡：从最具体的元素开始，逐级到最不具体节点
事件捕获：从最不具体的节点开始，逐级到最具体元素
事件处理程序
HTML
在html标签中通过属性写事件
1 |
<button onclick="alert('hello');">按钮一</button>
|
DOM 0级
把一个函数赋值给一个事件的处理程序属性
|
1
2
3
4
5
|
var btn = document.getElementById('btn');
btn.onclick = function () {
console.log('hello');
}; btn.onclick = null; //删除事件
|
DOM 2级
用于处理添加和删除事件处理程序
|
1
2
3
4
5
6
|
var btn = document.getElementById('btn');
var showHello = function () {
console.log('hello');
}; btn.addEventListener('click', showHello,false);
btn.removeEventListener('click', showHello, false);
|
兼容处理
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var eventUtil = {
addEvent: function (element, type, fn) { //添加事件
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn);
} else {
element['on' + type] = fn;
}
},
removeEvent: function (element, type, fn) { //移除事件
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on' + type] = null;
}
},
|
事件对象
是什么
在触发dom上事件时会产生一个对象
事件对象event
DOM中的事件对象
type属性
target属性
stopPropagation() 方法
preventDefault()方法
IE中的事件对象
type属性
srcElement属性
cancelBubble属性
returnValue属性
兼容类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
var eventUtil = {
addEvent: function (element, type, fn) { //添加事件
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn);
} else {
element['on' + type] = fn;
}
},
removeEvent: function (element, type, fn) { //移除事件
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on' + type] = null;
}
},
getEvent : function (event) { //获取事件对象
return event ? event : window.event;
},
getType : function (event) { //获取事件类型
return event.type;
},
getElement : 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;
}
}
}; |