2、事件の泡立ち行為について
1、事件の泡立ち行為
泡が立ちますね.簡単な意味は、あなたはもともと1つの事件だけを触発したいと思っていましたが、実際にはNつの事件を出発しました.
例えば、Spanのような要素があり、Click関数をバインドしています.あなたはまたDivのためにClick関数をバインドしました.このSpanはDivにあり、Spanをクリックすると同時にSpanとDivのClick関数がトリガーされ、これがイベントバブルです.
2、事件の泡立ちの小例
2.1 htmlのコード
2.2 Javascriptコード
2.3イベントの泡立ちについて
span領域をクリックすると、spanのclick関数とdiv上のclick関数がトリガーされます.
3、事件の泡の伝播を阻止する
3.1 JavaScriptイベントのバブルを阻止する方法、event.stopPropagation()
泡が立ちますね.簡単な意味は、あなたはもともと1つの事件だけを触発したいと思っていましたが、実際にはNつの事件を出発しました.
例えば、Spanのような要素があり、Click関数をバインドしています.あなたはまたDivのためにClick関数をバインドしました.このSpanはDivにあり、Spanをクリックすると同時にSpanとDivのClick関数がトリガーされ、これがイベントバブルです.
2、事件の泡立ちの小例
2.1 htmlのコード
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
#mydiv {
border: 1px solid red;
width: 100px;
height: 100px;
}
#myspan {
border: 1px solid red;
width: 30px;
height: 30px;
position: relative;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div id="mydiv">
<span id="myspan"> span</span>
</div>
</body>
</html>
2.2 Javascriptコード
<script type="text/javascript">
window.onload = function() {
var my<span style="font-family: SimSun;">span</span><span style="font-family: SimSun;">= document.getElementById('myspan');</span>
myspan.onclick = function() {
/*alert(' span');*/
console.log(' span');
}
var mydiv = document.getElementById('mydiv');
mydiv.onclick = function() {
/*alert(' div');*/
console.log(' div');
}
}
</script>2.3イベントの泡立ちについて
span領域をクリックすると、spanのclick関数とdiv上のclick関数がトリガーされます.
3、事件の泡の伝播を阻止する
3.1 JavaScriptイベントのバブルを阻止する方法、event.stopPropagation()
<script type="text/javascript">
window.onload = function() {
var myspan = document.getElementById('myspan');
myspan.onclick = function(event) {
event = event || e;
alert(' span');
console.log(' span');
//
event.stopPropagation();
}
var mydiv = document.getElementById('mydiv');
mydiv.onclick = function(event) {
alert(' div');
console.log(' div');
}
}
</script>