Skip to content

Instantly share code, notes, and snippets.

@HuanxinHu

HuanxinHu/index.html

Created February 7, 2018 02:28
Show Gist options
  • Save HuanxinHu/9213c1e33dc4b9e70398237c0ea54477 to your computer and use it in GitHub Desktop.
Save HuanxinHu/9213c1e33dc4b9e70398237c0ea54477 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin event bubbling and capture // source http://jsbin.com/jayucob
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="event bubbling and capture">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.grandChild{
border: 1px solid red;
}
.child{
width: 50px;
padding: 16px;
border: 1px solid green;
}
.father{
width: 90px;
padding: 4px;
border: 1px solid;
}
</style>
</head>
<body>
<div class="father">
DIV
<p class="child">
P <span class="grandChild">SPAN</span></p>
</div>
<script id="jsbin-javascript">
document.querySelector('.grandChild').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture span')
}, true)
document.querySelector('.child').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture p')
}, true)
document.querySelector('.father').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture div')
}, true)
document.querySelector('.grandChild').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling span')
})
document.querySelector('.child').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling p')
})
document.querySelector('.father').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling div')
})
</script>
<script id="jsbin-source-css" type="text/css">.grandChild{
border: 1px solid red;
}
.child{
width: 50px;
padding: 16px;
border: 1px solid green;
}
.father{
width: 90px;
padding: 4px;
border: 1px solid;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">document.querySelector('.grandChild').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture span')
}, true)
document.querySelector('.child').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture p')
}, true)
document.querySelector('.father').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture div')
}, true)
document.querySelector('.grandChild').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling span')
})
document.querySelector('.child').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling p')
})
document.querySelector('.father').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling div')
})
</script></body>
</html>
Raw
jsbin.jayucob.css
.grandChild{
border: 1px solid red;
}
.child{
width: 50px;
padding: 16px;
border: 1px solid green;
}
.father{
width: 90px;
padding: 4px;
border: 1px solid;
}
Raw
jsbin.jayucob.js
document.querySelector('.grandChild').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture span')
}, true)
document.querySelector('.child').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture p')
}, true)
document.querySelector('.father').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('capture div')
}, true)
document.querySelector('.grandChild').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling span')
})
document.querySelector('.child').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling p')
})
document.querySelector('.father').addEventListener('click', function(evt){
console.log(evt.target.classList)
alert('bubbling div')
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment