【Javascript】イベントの泡立ちと捕獲伝達方式
20789 ワード
イベントには泡が発生して捕獲される2つの伝達方式があり、バブル伝達方式はまず内部要素のイベントをトリガし、後に外部要素のイベントをトリガし、キャプチャ伝達方式は逆である.
テストコードの例は以下の通りです.
テストコードの例は以下の通りです.
<html>
<head>
<meta charset="utf-8">
<title> title>
head>
<style>
.divTest {
margin: 20px auto;
width: 300px;
height: 180px;
border: 2px solid red;
}
.pTest {
width: 100px;
border: 2px solid green;
cursor: pointer;
margin-left: 75px;
text-align: center;
}
style>
<body>
<div class="divTest" id="id1">
<p class="pTest" id="bubbing1">
p>
div>
<div class="divTest" id="id2">
<p class="pTest" id="bubbing2">
p>
div>
<div class="divTest" id="id3">
<p class="pTest" id="capture1">
p>
div>
<div class="divTest" id="id4">
<p class="pTest" id="capture2">
p>
div>
<script>
//
var x = document.getElementById("id1");
var y = document.getElementById("bubbing1");
x.addEventListener('click', function () { alert(" -div"); }, false);
y.addEventListener('click', function () { alert(" -p"); }, false);
//
x = document.getElementById("id2");
y = document.getElementById("bubbing2");
x.addEventListener('click', function () { alert(" -div"); }, false);
y.addEventListener('click', function (e) {
alert(" -p， ");
stopBubble(e);
}, false);
//
x = document.getElementById("id3");
y = document.getElementById("capture1");
x.addEventListener('click', function () { alert(" -div"); }, true);
y.addEventListener('click', function () { alert(" -p"); }, true);
//
x = document.getElementById("id4");
y = document.getElementById("capture2");
x.addEventListener('click', function (e) {
alert(" -div， ");
stopBubble(e);
}, true);
y.addEventListener('click', function () { alert(" -p"); }, true);
function stopBubble(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
script>
body>
html>