javascript-事件流
2020-01-12 本文已影响0人
ssttIsme
javascript-事件流
当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序(如由下往上)响应改元素
的触发事件，事件传播(发生)的顺序叫做事件流。
事件流是一直存在的，并不是因为添加了事件才存在。
一、事件流的分类
1.1冒泡型事件(所有浏览器都支持)
由明确的事件源到最不确定的事件源依次向上触发
addEventListener(事件，处理函数，false)
<!DOCTYPE html>
<html lang="en" onclick="show('html')">
<head>
<meta charset="UTF-8">
<title>javascript事件流</title>
<style>
li{
border: 1px solid #0f0;
}
ul{
border: 1px solid #f0f;
}
div{
border: 1px solid #000;
}
body{
padding: 5px;
border: 1px solid #f00;
}
html{
border: 1px solid #00f;
}
</style>
</head>
<body onclick="show('body')">
<div onclick="show('div')">
<ul onclick="show('ul')">
<li onclick="show('li')">第1个</li>
<li onclick="show('li')">第2个</li>
<li onclick="show('li')">第3个</li>
</ul>
</div>
<script>
function show(text) {
alert(text);
}
document.onclick=function () {
show('document');
}
</script>
</body>
</html>
点击如何一个li,依次弹出li,ul,div,body,html,document
1.2捕获型事件(IE不支持，WC3C标准的浏览器如火狐支持)
不确定的事件源到明确的事件源依次向下触发
addEventListener(事件，处理函数，true)
<div id="outer" style="border: 1px solid #f00; width: 200px; height: 200px; padding: 10px;">
<div id="inner" style="border: 1px solid #00f; width: 100px; height: 100px; padding: 10px; "></div>
</div>
<script>
var outer=document.getElementById("outer");
var inner=document.getElementById("inner");
outer.addEventListener("click",function () {
alert(this.id);
},true);
inner.addEventListener("click",function () {
alert(this.id);
},true);
</script>
点击蓝色方框，先弹出outer，再弹出inner
二、阻止事件流
事件对象.cancelBubble=true(IE)
事件对象.stopPropagation()(火狐)
<!DOCTYPE html>
<html lang="en" onclick="show(event,'html')">
<head>
<meta charset="UTF-8">
<title>javascript事件流</title>
<style>
li{
border: 1px solid #0f0;
}
ul{
border: 1px solid #f0f;
}
div{
border: 1px solid #000;
}
body{
padding: 5px;
border: 1px solid #f00;
}
html{
border: 1px solid #00f;
}
</style>
</head>
<body onclick="show(event,'body')">
<div onclick="show(event,'div')">
<ul onclick="show(event,'ul')">
<li onclick="show(event,'li')">第1个</li>
<li onclick="show(event,'li')">第2个</li>
<li onclick="show(event,'li')">第3个</li>
</ul>
</div>
<script>
function show(event,text) {
alert(text);
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
document.onclick=function () {
show('document');
}
</script>
</body>
</html>
三、目标事件源的对象
事件对象.srcElement(IE)
事件对象.target(火狐)
<div>
<ul onclick="show(event)">
<li >第1个</li>
<li >第2个</li>
<li >第3个</li>
</ul>
</div>
<script>
function show(event) {
var object=event.srcElement||event.target;
alert(object.innerHTML);
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生成绩单</title>
<style>
table{
margin: 0 auto;
}
</style>
</head>
<body>
<table border="1px" width="600px" cellpadding="0" cellspacing="0px" id="scoreList">
<caption>学生成绩单</caption>
<tr><th>姓名</th><th>班级</th><th>科目</th><th>成绩</th></tr>
<tr>
<td>张三</td>
<td>1班</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>李四</td>
<td>2班</td>
<td>语文</td>
<td>97</td>
</tr>
<tr>
<td>王五</td>
<td>3班</td>
<td>语文</td>
<td>99</td>
</tr>
</table>
<script>
var table=document.getElementById("scoreList");
table.onclick=function(e){
var ev=e||window.event;
var td=ev.srcElement||ev.target;
if(td.nodeName=="TH"||td.nodeName=="CAPTION"){
return;
}
var tdText=td.innerHTML;
td.innerHTML="";
var inputs=document.createElement("input");
inputs.type="text";
inputs.size=10;
td.appendChild(inputs);
inputs.focus();
inputs.onblur=inputs.ondblclick=inputs.onkeydown=function(e){
var ev=e||window.event;
if(ev.type=="blur"||ev.type=="dbclick"||(ev.type=="keydown"&&ev.keyCode==13)){
var val=this.value;
td.removeChild(inputs);
if(val==""){
td.innerHTML=tdText;
}else{
td.innerHTML=val;
}
}
}
}
</script>
</body>
</html>
