收藏
批改状态：合格
老师批语：事件委托是有前提的, 有些事件就不行, 例如, mouseenter
演示对事件代理机制的理解：
var ul = document.getElementsByTagName('ul').item(0);
ul.addEventListener('click', function (event) {
console.log(event);
}, false);点击 "运行实例" 按钮查看在线实例
var ul = document.getElementsByTagName('ul').item(0);
ul.addEventListener('click', function (event) {
alert('点击小茗Ub生活网');
}, false);点击 "运行实例" 按钮查看在线实例
var ul = document.getElementsByTagName('ul').item(0);
ul.addEventListener('click', function (event) {
// alert('点击小茗Ub生活网')
console.log(event.currentTarget);//事件添加者
// console.log(this === event.currentTarget);
console.log(event.target);//事件的触发者，点击谁就是谁
}, false);点击 "运行实例" 按钮查看在线实例
模仿留言板案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小茗Ub生活网留言板</title>
</head>
<body>
<label for="comment">在此输入留言：</label>
<input type="text" id="comment" autofocus>
<ul id="list">
</ul>
<script>
var comment = document.getElementById('comment');
var list = document.getElementById('list');
// 监听内容
comment.addEventListener('keypress', addComment1, false);
function addComment(event){
// 事件对象
console.log(event.key);
if(event.key === 'Enter'){
var item = document.createElement('li');
item.innerText = comment.value;
list.appendChild(item);
// 清空留言框
comment.value = null;
}
}
function addComment1(event){
// 事件对象
console.log(event.key);
if(event.key === 'Enter'){
var item = document.createElement1('li');
item.innerText = comment.value;
if(list.childElementCount === 0){
list.appendChild(item);
} else {
}
// 清空留言框
comment.value = null;
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
