问题1. 实例演示你对事件代理机制的理解?
实例
<p>解答：</p>
1.1事件冒泡：当点击li时依次弹出，li，ul，body，提示框，反应的冒泡事件的生效顺序，由子级到父级
<div>
<ul>
<li>
点击我弹出提示框
</li>
<li>
点击我弹出提示框2
</li>
</ul>
</div>
<!--使用事件代理前 需要添加5个P标签的事件-->
1.2、使用事件代理的好处，可以简化代码
<div>
使用事件代理前 需要添加5个P标签的事件
<p>1点我出现hello word-1</p>
<p>2点我出现hello word-2</p>
<P>3点我出现hello word-3</P>
<P>4点我出现hello word-4</P>
<P>5点我出现hello word-5</P>
</div>
<!--原本添加在p标签中的事件需要添加5次，通过事件代理添加在父div里-->
使用事件代理后 只需要在父级div添加1个js事件
<div id="pfather">
<p>点我出现good job</p>
<p>点我出现good job</p>
<P>点我出现good job</P>
<P>点我出现good job</P>
<P>点我出现good job</P>
</div>
<!--点击li弹出提示框，提示语li-->
<script>
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length;i++){
lis[i].addEventListener ('click',function(ev) {
alert(this.nodeName);
},false);
}
</script>
<!--点击ul弹出提示框，提示语ul-->
<script>
var uls = document.getElementsByTagName('ul').item(0);
uls.addEventListener('click',function(ev){
alert(this.nodeName);
});
</script>
<!--点击div弹出提示框，提示语div-->
<script>
var div = document.getElementsByTagName('div').item(0);
div.addEventListener('click',function(ev){
alert(this.nodeName);
});
</script>
<!--未使用事件代理前每个p标签都要添加js-->
<script>
var p = {};
p.p1 = document.getElementsByTagName('p').item(1);
console.log(p.p1);
p.p1.addEventListener('click',function(ev){
alert('hello word-1');
});
p.p2 = document.getElementsByTagName('p').item(2);
console.log(p.p2);
p.p2.addEventListener('click',function(ev){
alert('hello word-2');
});
p.p3 = document.getElementsByTagName('p').item(3);
console.log(p.p3);
p.p3.addEventListener('click',function(ev){
alert('hello word-3');
});
p.p4 = document.getElementsByTagName('p').item(4);
console.log(p.p4);
p.p4.addEventListener('click',function(ev){
alert('hello word-4');
});
p.p5 = document.getElementsByTagName('p').item(5);
console.log(p.p5);
p.p5.addEventListener('click',function(ev){
alert('hello word-5');
});
</script>
<!--在父级div使用事件代理-->
<script>
var pfather = document.getElementById('pfather');
pfather.addEventListener('click',function(ev){
alert('good job');
});
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
2留言板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>DOM操作: 添加留言</title>
<style>
.container{
margin: 0 auto;
width: 100%;
max-width: 720px;
background-color: #1E5B94;
}
.label1{
color: #ffffff;
margin: auto;
width: 16rem;
min-height: 2rem;
line-height: 1.85rem;
}
#list{
padding-left: 0;
}
#list li{
list-style-type:none;
margin-left: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #ffffff;
}
#list li button{
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="label1">
<label for="comment">请留言：</label>
<input type="text" id="comment" autofocus>
<ul id="list"></ul>
</div>
</div>
<script>
var ly={};
lycomment = document.getElementById('comment');
//留言列表
ly.list = document.getElementById('list');
//为留言框添加事件监听,当监听到keypress，执行addComment
lycomment.addEventListener('keypress', addComment, false);
function addComment(event){
if (event.key === 'Enter'){
//1、创建一个li元素
ly.item = document.createElement('li');
//2、添加内容
ly.item.innerHTML = comment.value + ' <button>删除</button>';
//3、将留言添加到页面中
if (ly.list.childElementCount === 0){
ly.list.appendChild(ly.item);
} else {
ly.list.insertBefore(ly.item, ly.list.firstElementChild);
}
//4、清空留言框
comment.value = null;
}
}
//事件代理
ly.list.addEventListener('click', del, false);
//删除留言的事件方法click
function del(event){
if(event.target.nodeName === 'BUTTON'){
if(confirm('是否删除？')){
event.currentTarget.removeChild(event.target.parentElement);
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例