// 事件阶段分为 捕获阶段、触发阶段、冒泡阶段
// 捕获阶段由最顶层元素逐步进入最深层元素（依次一层一层进入）
// 触发阶段可理解为 点击事件的触发
// 冒泡阶段 当触发后点击事件会在元素上依次从内到外执行事件
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.wrap{
width: 400px;
height:400px;
background-color: #037b82;
padding: 50px;
}
.wrap{
width:300px;
height: 300px;
}
.element{
width: 300px;
height:300px;
padding: 50px;
background-color: chocolate;
}
.element{
width: 200px;
height: 200px;
}
.child{
width:200px;
height:200px;
background-color: #444444;
}
</style>
<title>事件代理机制理解</title>
</head>
<body>
<div class="wrap" id="wrap">
<div class="element" id="element">
<div class="child" id="child">
</div>
</div>
</div>
<script>
// 事件阶段分为 捕获阶段、触发阶段、冒泡阶段
// 捕获阶段由最顶层元素逐步进入最深层元素（依次一层一层进入）
// 触发阶段可理解为 点击事件的触发
// 冒泡阶段 当触发后点击事件会在元素上依次从内到外执行事件
var wrapnode = document.getElementById('wrap');
var elementnode = document.getElementById('element');
var childnode = document.getElementById('child');
wrapnode.addEventListener('click',function (event) {
console.log('wrap捕获')
},true);
wrapnode.addEventListener('click',function (event) {
console.log('wrap冒泡')
},false);
elementnode.addEventListener('click',function (event) {
console.log('element捕获')
},true);
elementnode.addEventListener('click',function (event) {
console.log('element冒泡')
},false);
childnode.addEventListener('click',function (event) {
console.log('child捕获')
},true);
childnode.addEventListener('click',function (event) {
console.log('child冒泡')
},false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
事件代理
// 多个li事件js操作如下（事件代理）
// 事件代理 事件冒泡会依次由内到外进行传递，当有多个id为child的div块要添加事件，
// 则id为child的事件会冒泡到父节点element上的div块，则只需在id为element的div块，
// 设置一个事件监听器，这就是事件代理或者叫事件委托
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件代理机制理解</title>
</head>
<body>
<div class="wrap" id="wrap">
<div class="element" id="element">
<div class="child" id="child">
</div>
</div>
</div>
<hr>
<h3>单个li事件</h3>
<!--单个li事件-->
<ul id="li1">
<li id="li2">item</li>
</ul>
<hr>
<!--多个li事件-->
<h3>多个li事件</h3>
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
// 单个li事件js操作如下
var li1 = document.getElementById('li2');
li1.addEventListener('click',function (ev) {
alert('我被点击了');
},false);
// 多个li事件js操作如下（事件代理）
// 事件代理 事件冒泡会依次由内到外进行传递，当有多个id为child的div块要添加事件，
// 则id为child的事件会冒泡到父节点element上的div块，则只需在id为element的div块，
// 设置一个事件监听器，这就是事件代理或者叫事件委托
var lis = document.getElementsByTagName('li');
// 利用for循环语句给所有的li单独设置点击事件
// for(var i = 0, n = lis.length ; i < n ; i+=1){
// list[i].addEventListener('click',function(ev){
// alert("我被点击了");},false)
// }
// 利用事件代理，用ul代理li的事件冒泡
var list = document.getElementById('list');
list.addEventListener('click',function (ev) {
alert('我被点击了');
console.log(event.target);
},false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
留言板实例（双飞翼布局 ）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
/*头部样式*/
.header{
background-color: lightseagreen;
}
.header .content{
width:1000px;
margin: 0 auto;
height: 60px;
}
.header ul{
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.header ul li {
list-style: none;
}
.header ul li a {
float: left;
/*文本居中*/
text-align: center;
line-height: 60px;
min-height: 60px;
min-width: 80px;
padding: 0 15px;
/*去除下划线*/
text-decoration: none;
/*文本颜色*/
color: white;
}
.header .content ul li a:hover{
background-color: cadetblue;
font-size: 1.1rem ;
}
/*中间样式*/
.container{
/*background-color:lightseagreen;*/
width: 1000px;
min-height: 400px;
margin: 5px auto;
overflow: hidden;
}
.container .wrap {
width:inherit;
min-height: 400px;
/*border: 1px solid;*/
/*background-color: #037b82;*/
}
.container .left {
width:280px;
min-height: 400px;
/*border: 1px solid;*/
/*background-color: #444444;*/
}
.container .wrap,.container .left {
float: left;
}
.container .left{
margin-left:-100%;
}
.container .wrap .main{
padding-left: 280px;
}
.container .wrap .main .con{
padding-left: 15px;
min-height: 380px;
text-align: center;
}
.container .wrap .main .con #liuyan {
width:500px;
height: 50px;
display: inline-block;
}
.container .wrap .main .con ul {
margin-top: 5px;
padding-left: 2px;
width:650px;
min-height: 220px;
border: 1px solid;
display: inline-block;
}
.container .wrap .main .con ul li{
width:650px;
min-height:44px;
border-bottom: 1px dashed;
display: inline-block;
line-height: 44px;
list-style: none;
text-align: left;
overflow: hidden;
}
.container .wrap .main .con ul li button{
float: right;
line-height: 44px;
background-color: lightseagreen;
width: 50px;
border: 0;
}
.container .wrap .main .con h3{
text-align: center;
color: black;
border-bottom: 1px solid;
}
.container .left h3{
text-align: center;
color: black;
border-bottom: 1px solid;
}
.container .left ul{
margin: 0;
padding: 0;
list-style: none;
}
.container .left ul li a {
display: inline-block;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: black;
color: white;
text-decoration: none;
}
.container .left ul li a:hover{
background-color: red;
}
.active {
background-color: red;
}
.container .left ul li a.active1 {
background-color: red;
}
/*尾部样式*/
.footer{
background-color: lightseagreen;
}
.footer .content{
width:1000px;
height: 60px;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content p a {
text-decoration: none;
color:firebrick;
}
.footer .content p a:hover {
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul>
<li><a href="">首页</a></li>
<li><a href="" class="active">留言板</a></li>
<li><a href="">联系方式</a></li>
<li><a href="">公司新闻</a></li>
<li><a href="">案例展示</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">
<div class="con">
<h3>留言板</h3>
<div class="conmain">
<input type="text" id="liuyan" name="liuyan" autofocus placeholder=" 输入30个字内" maxlength="30">
<ul id="list">
</ul>
</div>
</div>
</div>
</div>
<div class="left">
<h3>栏目</h3>
<ul>
<li><a href="" class="active1">留言板</a></li>
<li><a href="">联系方式</a></li>
<li><a href="">公司新闻</a></li>
<li><a href="">案例展示</a></li>
</ul>
</div>
</div>
<script>
// 留言功能
var liuyan = document.getElementById('liuyan');
var list = document.getElementById('list');
var myDate = new Date();
liuyan.addEventListener('keypress',addliuyan,false);
function addliuyan(ev) {
if (event.key === 'Enter') {
var item = document.createElement('li');
item.innerHTML = liuyan.value + ' <button>删除</button>';
// item.innerHTML = liuyan.value + ' 时间：'+new Date() + ' <button>删除</button>' ;
if (list.childElementCount === 0) {
list.appendChild(item);
} else {
list.insertBefore(item, list.firstElementChild);
}
liuyan.value = null;
}
}
// 事件代理 删除按钮功能
list.addEventListener('click',del,false);
function del(ev) {
if(confirm('是否删除')){
// var ul = event.currentTarget;
// var btn = event.target;
// var li = btn.parentElement;
// ul.removeChild(li);
// 简写
event.currentTarget.removeChild(event.target.parentElement);
}
return false;
}
</script>
<div class="footer">
<div class="content">
<p>
<a href="">友情链接</a> |
<a href="">地理地图</a> |
<a href="">备案号：*****</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例