收藏
批改状态：合格
老师批语：一切的学习, 都是从最基础的知识 开始, 不要着急
所谓的冒泡就是事件向上传递，后代元素的事件被触发，祖先的相同事件也被触发。
委派：将事件统一绑定给元素的共同祖先，这样当后代元素的事件被触发时，会冒泡到祖先元素，从而通过祖先元素的响应来处理事件。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>委派</title>
</head>
<body >
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul').item(0);
ul.addEventListener('click',function (ev) {alert(this.nodeName); },false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
这个留言本写下来真的费力，视频看了好几遍。
<!DOCTYPE html>
<html lang="cn_zh">
<head>
<meta charset="UTF-8">
<title>留言本</title>
</head>
<body>
<label for="comment">留言本</label>
<input type="text" name="comment" id="comment" autofocus>
<ul id="list"></ul>
<script>
var comment = document.getElementById('comment');
var ul = document.getElementById('list');
comment.addEventListener('keypress',getvalue,false);
function getvalue(event) {
if (event.key==='Enter') {
var li = document.createElement('li');
li.innerHTML = comment.value + ' <button>删去</button>';
if (ul.childElementCount === 0) {ul.appendChild(li);
comment.value = null;}else{
ul.insertBefore(li,ul.firstElementChild);
comment.value = null;
}
}
}
ul.addEventListener("click", del,false);
function del(event) {
if ( confirm("你确定删去？")) {
event.currentTarget.removeChild(event.target.parentElement);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
currentTarget 指代 事件的监听者
Target指代事件的触发者
event.currentTarget.removeChild(event.target.parentElement) 这一句好长，但是也好理解。
这个留言本只是基础功能，还需要多练习，理解js编程的思想和方法。
js小结下
找对象，搞对象。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
