收藏
批改状态：合格
老师批语：事件代理,用得很精巧
1、理解事件
事件触发可以是鼠标、键盘、系统。
常见的事件属性有：keydown, keyup, keypress(常用),mouseover, mouseout,click(常用) ,setInterval,setTimeout,clearInterval,clearTimeout……
事件捕获阶段就是指浏览器在执行某个元素的事件时，其实是从外到内去寻找这个元素，先占到最外面的父元素、再找里面的子元素。
找到以后就会到触发阶段，也就是执行，如果从里到外都有事件，就从最里面开始执行，最后执行外面，也就是冒泡阶段。
2、通过实践了解事件的特点
通过元素属性添加一个事件的多次执行，只会成功执行一个。
通过监听器可以为某个元素的添加一个事件的多次执行，会按顺序依次执行。
事件委托就是利用冒泡原理，让子元素委托父元素来触发它的事件。（也叫事件代理）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button id="btn1">点击试试看</button>
<button id="btn2">点击试试看</button>
</div>
<div>
<ul id="ul">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</div>
<script>
var b1=document.getElementById('btn1');
/*事件属性是click,通过元素属性的形式添加事件，加上了on,所以写成onclick*/
b1.onclick = function (event) {
alert('第一次点击'); /*此时只有一个事件，能成功执行*/
};
b1.onclick = function (event) {
alert('第二次点击'); /*此时有两个时间，只会执行第二个*/
};
/*也就是说，通过元素属性添加多个事件时，只会成功执行最后一个*/
/*并且是在冒泡阶段执行，也就是优先执行最里面的事件*/
/*那么如何同时添加多个事件呢，并且让所有事件依次触发？ 利用addEventListener方法*/
var b2=document.getElementById('btn2');
b2.addEventListener('click',function (event) {
alert('第一次点击');
},false);/*addEventListener方法 有三个参数，1是事件属性 2是函数 3是代表捕获阶段or冒泡阶段，false是冒泡阶段*/
b2.addEventListener('click',function (event) {
alert('第二次点击');
},false);
b2.addEventListener('click',function (event) {
alert('第三次点击');
},false);
/*点击b2以后， 会依次按顺序弹出三个框，也就是关闭第一个，弹出第二个，关闭第二个，弹出第三个*/
/*如何快捷地给所有的li元素添加事件？利用事件冒泡原理：
* 所有子元素li的事件都会冒泡到其父元素ul上，所以我们可以给ul加上一个监听器*/
var ull=document.getElementById('ul');
ull.addEventListener('click',function (event) {
alert('我被点击了');
event.currentTarget; /*这是ul*/
event.target;/*这是li*/
},false);
/*这就是事件代理，父元素代理了子元素的事件；也就事件推脱，子元素委托父元素来触发它的事件*/
</script> <!--注意，要把script代码写到</body>前面，DOM之后
由于html页面由上向下解析执行, 执行到js时, 还没有发现下面的html元素，就不会生效
如果坚持把scri写在DOM之前, 就放在window.onload = function () { ..... }中-->
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、留言板的留言添加和删除
理解留言的添加和删除原理，就是往ul添加子元素和删除子元素。
灵活运用event.currentTarget，将其理解为谁添加事件，我们利用冒泡原理为父元素ul添加了 一个监听事件，所以这是ul。
灵活运用event.target，将其理解为触发事件的元素，在监听事件上定义的触发行为是click，click之后就会执行监听事件里面的函数del，谁被点击了会执行这个函数，所以这个target可以理解成按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板制作</title>
<style>
#comment{
width: 400px;
height: 100px;
border: 5px solid chartreuse;
position: absolute;
top: 30px;
}
p{
position: relative;
}
#label{
position: absolute;
left:150px;
}
ul{
position: absolute;
top: 150px;
}
</style>
</head>
<body>
<p>
<label for="comment" id="label">有意见请反馈:</label>
<input type="text" id="comment" autofocus>
<ul id="list"></ul>
</p>
<script>
var comment = document.getElementById('comment'); /*获取到留言输入框*/
var list = document.getElementById('list');/*获取到留言列表*/
comment.addEventListener('keypress',addCom,false);
function addCom(event) {
/*event.key 是当前用户按下去的键*/
if (event.key === 'Enter') { /*判断是否按下 回车键*/
/*1、添加新留言这个元素*/
var li = document.createElement('li'); /*创建一个新的li元素*/
/*2、把文本框的输入值 赋给新元素，同时加上删除按钮*/
// li.innerText = comment.value; /*把文本框的内容赋给新元素li，这是直接赋值文本内容*/
li.innerHTML = comment.value +' <button>删除</button>';
/*innerHTML可以解析超文本标记语言，识别到 添加按钮的意思*/
/*button的父元素是li*/
/*3、把最新添加的留言始终显示在最前面*/
if (list.childElementCount === 0) { /*如果list没有子元素，也就是没有内容*/
list.appendChild(li);/*把新元素添加到ul中*/
} else {
list.insertBefore(li,list.firstElementChild); /*把新元素li添加到目前的第一个子元素之前*/
}
comment.value = null; /*清空文本框*/
}
}
/*4、删除一条留言，利用事件委托，让父元素ul来监听是否有删除按钮的点击事件*/
list.addEventListener('click',del, false);
/*删除留言的函数*/
function del(event) {
/*event.currentTarget,指添加事件的元素，也就是往哪个元素上添加事件，我们是往父元素ul上添加监听事件*/
// console.log(event.currentTarget); 输出<ul>元素
/*event.target,指触发事件的元素，也就是哪个按钮被点击了 触发了del这个函数*/
// console.log(event.target);输出button元素
// confirm(): 确定对话框, 点确定返回true,点取消返回false
if (confirm('是否删除?')) { /*弹出确认对话框，确认的话会执行下列操作*/
event.currentTarget.removeChild(event.target.parentElement);
/*我们针对ul这个元素，移除它的子元素
* 哪个子元素呢？按钮的父元素，也就是li*/
}
}
</script
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
