1. 事件
1.1. 事件冒泡
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
说白了就是:当我们触发了子元素的某个事件后,父元素对应的事件也会触发。
通常情况,事件冒泡对于我们来说是没有问题的,我们直接不管就行了,但是如果当事件冒泡给我们带来影响的时候,我们需要阻止事件冒泡。
阻止事件冒泡有浏览器兼容性问题
正常浏览器:
link.onclick = function (event) {
event = event || window.event;
//stop :停止 propagation:传播
event.stopPropagation();
}
IE678浏览器:
link.onclick = function (event) {
event = event || window.event;
event.cancelBubble = true;
}
兼容性处理
link.onclick = function (event) {
event = event || window.event;
if(event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
1.2. 事件捕获(了解)
事件捕获是火狐浏览器提出来的,IE678不支持事件捕获(基本上,我们都是用事件冒泡) 事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递
【04-事件捕获.html】
//当addEventListener第三个参数为true时,表示事件捕获
arr[i].addEventListener("click", function () {
console.log(this);
},true);
1.3. 事件的三个阶段
- 事件的捕获阶段
- 事件的目标阶段
-
事件的冒泡阶段
事件有三个阶段,首先发生的是捕获阶段,然后是目标阶段,最后才是冒泡阶段,对于捕获和冒泡,我们只能干预其中的一个,通常来说,我们可能会干预事件冒泡阶段,而不去干预事件捕获阶段。
1.4. 常见的事件
常见的鼠标事件
onmousedown:鼠标按下事件
onmouseup:鼠标弹起事件
onclick:单击事件
ondblclick:双击事件
onmouseover:鼠标经过事件
onmouseout:鼠标离开事件
onmousemove:鼠标移动事件
onfocus:鼠标获得焦点事件
onblur:鼠标失去焦点事件
常见的键盘事件
onkeydown:键盘按下时触发
onkeyup:键盘弹起时触发
对于鼠标事件,事件对象中有一系列的XY记录了鼠标的位置信息。而键盘事件中,事件对象有一个event.keyCode属性,记录了按下去的键的键盘码