事件流介绍
- js操作css称为脚本化的css，js与html交互通过事件完成
- 事件就是文档或浏览器窗口中发生一些特定的交互瞬间
- 事件流（事件传播）描述的是从页面中接收事件的顺序
事件流的历史
- 如果单机了某个按钮，他们认为单机事件不仅仅发生在按钮上，甚至是单机了整个页面
- IE和Netscape提出完全相反的事件流
- IE事件流是事件冒泡流
- Netscape事件流是事件捕获流
事件流中的三个阶段
- 事件的捕获阶段
- 处于目标阶段
- 事件冒泡阶段
<div id="box"></div>
<script>
var box = document.getElementById("box");
//true 为事件捕获
box.addEventListener(‘click‘,function(){
box.innerHTML += ‘div\n‘;
},true);
document.body.addEventListener(‘click‘,function(){
box.innerHTML += ‘body\n‘;
},true);
document.documentElement.addEventListener(‘click‘,function(){
box.innerHTML += ‘html\n‘;
},true);
document.addEventListener(‘click‘,function(){
box.innerHTML += ‘document\n‘;
},true);
window.addEventListener(‘click‘,function(){
box.innerHTML += ‘window\n‘;
},true);
//false 为事件冒泡
box.addEventListener(‘click‘,function(){
box.innerHTML += ‘div\n‘;
},false);
document.body.addEventListener(‘click‘,function(){
box.innerHTML += ‘body\n‘;
},false);
document.documentElement.addEventListener(‘click‘,function(){
box.innerHTML += ‘html\n‘;
},false);
document.addEventListener(‘click‘,function(){
box.innerHTML += ‘document\n‘;
},false);
window.addEventListener(‘click‘,function(){
box.innerHTML += ‘window\n‘;
},false);
</script>
事件冒泡
- 事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）
<style>
#box{
width: 200px;
height: 200px;
background-color: blueviolet;
color: #fff;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.onclick = function(){
box.innerHTML += `div\n`;
}
document.body.onclick = function(){
box.innerHTML += `body\n`;
}
document.documentElement.onclick = function(){
box.innerHTML += `html\n`;
}
document.onclick = function(){
box.innerHTML += `document\n`;
}
window.onclick = function(){
box.innerHTML += `window\n`;
}
</script>
点击box 运行截图
事件冒泡图解
注意：
IE9及以上，火狐，谷歌都是冒泡到window上
IE9以下 冒泡到document上
事件捕获
- 由不太具体的节点更早的接收事件，而最具体的节点应该最后接收到事件。
<style>
#box{
width: 200px;
height: 200px;
background-color: blueviolet;
color: #fff;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
//true 为事件捕获
//false 为事件冒泡
box.addEventListener(‘click‘,function(){
box.innerHTML += ‘div\n‘;
},true);
document.body.addEventListener(‘click‘,function(){
box.innerHTML += ‘body\n‘;
},true);
document.documentElement.addEventListener(‘click‘,function(){
box.innerHTML += ‘html\n‘;
},true);
document.addEventListener(‘click‘,function(){
box.innerHTML += ‘document\n‘;
},true);
window.addEventListener(‘click‘,function(){
box.innerHTML += ‘window\n‘;
},true);
</script>