html イベント处理顺を视覚的に确认
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html イベント处理顺を视覚的に确认相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>eventの順番</title>
<style type="text/css">
#main{
min-width: 800px;
}
#ui {
float: left;
width: 50%;
}
#eventflow-fig{
float: right;
width: 40%;
}
.unit{
background-color: #ddd;
margin: 10px 0;
}
.outer{
float: left;
width: 150px; height: 150px;
padding: 20px;
background-color: #79a;
}
.inner{
width: 150px; height: 150px;
cursor: pointer;
background-color: #fdc;
}
.output{
float: left;
margin: 10px;
height: 100%;
}
.visualized-event{
display: inline-block;
height: 1.3em;
width: 30px;
margin: 3px;
}
.clearfix:after{
clear: both;
content: "";
display: block;
height: 0;
}
</style>
</head>
<body>
<h1>Click inner boxes below and check order of events.</h1>
<div id="main" class="clearfix">
<div id="ui" class="clearfix">
<div class="unit clearfix">
<div id="outer1" class="outer">
<div id="inner1" class="inner">Bubbling phase</div>
</div>
<div id="output1" class="output"></div>
</div>
<div class="unit clearfix">
<div id="outer2" class="outer">
<div id="inner2" class="inner">Capture phase</div>
</div>
<div id="output2" class="output"></div>
</div>
<div class="unit clearfix">
<div id="outer3" class="outer">
<div id="inner3" class="inner">Bubbling phase, stopPropagation</div>
</div>
<div id="output3" class="output"></div>
</div>
<div class="unit clearfix">
<div id="outer4" class="outer">
<div id="inner4" class="inner">Capture phase, stopPropagation</div>
</div>
<div id="output4" class="output"></div>
</div>
</div>
<figure id="eventflow-fig" class="clearfix"><img src="https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg"></figure>
</div>
<hr />
参考
<ul>
<li><a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM3 event flow</a></li>
<li><a href="http://qiita.com/hosomichi/items/49500fea5fdf43f59c58">DOMイベントのキャプチャ/バブリングを整理する</a></li>
</ul>
<script>
function append_visualized_event(e,dst){
var ve = document.createElement('span');
ve.className = 'visualized-event';
ve.style.backgroundColor = window.getComputedStyle(e,null).backgroundColor;
dst.appendChild(ve);
console.log(e.id);
}
// NOTICE: Using Array.prototype.forEach.call for NodeList is impolite way!
// Because NodeList is not an Array.
// Its elements may be changed runtime.
Array.prototype.forEach.call(
document.querySelectorAll('#outer1, #inner1'), // returns NodeList.
function(e){
e.addEventListener(
'click',
function(ev){
append_visualized_event(e, document.getElementById('output1'));
},
false); //Bubbling phase
});
Array.prototype.forEach.call(
document.querySelectorAll('#outer2, #inner2'),
function(e){
e.addEventListener(
'click',
function(ev){
append_visualized_event(e, document.getElementById('output2'));
},
true); //Capture phase
});
Array.prototype.forEach.call(
document.querySelectorAll('#outer3, #inner3'),
function(e){
e.addEventListener(
'click',
function(ev){
ev.stopPropagation();
append_visualized_event(e, document.getElementById('output3'));
},
false); //Bubbling phase
});
Array.prototype.forEach.call(
document.querySelectorAll('#outer4, #inner4'),
function(e){
e.addEventListener(
'click',
function(ev){
ev.stopPropagation();
append_visualized_event(e, document.getElementById('output4'));
},
true); //Capture phase
});
</script>
</body>
</html>
以上是关于html イベント处理顺を视覚的に确认的主要内容，如果未能解决你的问题，请参考以下文章