イベントの伝播：JavaScript
JavaScriptではある要素においてイベントが発生するとそのイベントは親要素へ順に伝播（バブリング)していきます[1]。
下記の例ではspan要素で発生したonclickイベントがspan要素 ⇒ p要素 の順に親要素へ伝播していきその順にonclickイベントが発生します。
<html>
<head>
<script type="text/javascript">
var handler = function (e) {
alert(this);
}
window.onload = function(){
var pNode = document.getElementById('p');
pNode.onclick = handler;
var sNode = document.getElementById('s');
sNode.onclick = handler;
}
</script>
</head>
<body>
<p id="p"><span id="s">イベントの伝播の例。</span></p>
</body>
</html>
追記 20111119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Pluginの作り方</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('p#p1').click (function (e) {
alert(
'[p event]' + 'n' +
'target : ' + e.target.id + 'n' +
'currentTarget : ' + e.currentTarget.id
);
});
$('a#a1').click(function (e) {
alert(
'[a event]' + 'n' +
'target : ' + e.target.id + 'n' +
'currentTarget : ' + e.currentTarget.id
);
});
$('p#p2').click(function (e) {
alert('p#p2');
});
$('a#a2').click(function (e) {
alert('a#a2');
e.preventDefault();
});
$('p#p3').click(function (e) {
alert('p#p3');
});
$('a#a3').click(function (e) {
alert('a#a3');
e.stopPropagation();
});
$('p#p4').click(function (e) {
alert('p#p4');
});
$('a#a4').click(function (e) {
alert(
'e.preventDefault();' + 'n' +
'e.stopPropagation();'
);
e.preventDefault();
e.stopPropagation();
});
$('a#a5').click(function (e) {
alert('return false');
return false;
});
});
</script>
<style type="text/css">
p {
width: 400px;
height: 200px;
padding: 10px 15px;
margin: 0 0 30px;
background: #eee;
border: 1px solid #ddd;
}
a {
padding: 0 15px;
color: #fff;
background: #000;
}
</style>
</head>
<body>
<h2>イベント伝播</h2>
<p id="p1">段落(id="p1")の中の<a id="a1" href="#target">リンク(id="a1")</a>です。</p>
<h2>デフォルト処理の停止</h2>
<p id="p2">段落(id="p2")の中の<a id="a2" href="#target">リンク(id="a2")</a>です。</p>
<h2>伝播の停止</h2>
<p id="p3">段落(id="p3")の中の<a id="a3" href="#target">リンク(id="a3")</a>です。</p>
<h2>伝播・デフォルト処理の停止</h2>
<p id="p4">
段落(id="p4")の中の<a id="a4" href="#target">リンク(id="a4")</a>です。
段落(id="p4")の中の<a id="a5" href="#target">リンク(id="a5")</a>です。</p>
<div id="target">移動先</div>
</body>
</html>
1. 正確にはバブリングの前段階として親要素から子要素に向かってイベントが下りてくるキャプチャフェーズがあります。
しかしIEではキャプチャフェーズは無視されます。またFirefoxもイベントリスナーを設定する際に
useCaptureをtrueにした場合にのみキャプチャフェーズにおいてイベントが実行されます。
» イベントリスナー設定方法 : JavaScript
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。