事件委托（事件代理）
事件委托： 利用事件的冒泡， 把子元素的事件绑定在一个共同的父元素身上
优点：
1、减少元素的事件绑定。
2、减少 dom *** 作， 提高性能。
3、对于新添加进来的元素也可以执行事件， 不需要重新绑定。
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
position: absolute;
top: 100px;
left: 50px;
}
ul>li {
list-style: none;
display: block;
width: 300px;
height: 30px;
line-height: 30px;
font-size: 16px;
background-color: #fedcba;
}
.enter {
width: 600px;
height: 60px;
line-height: 60px;
font-size: 32px;
background-color: #abcdef;
}
.leave {
width: 300px;
height: 30px;
line-height: 30px;
font-size: 16px;
background-color: #fedcba;
}
style>
head>
<body>
<div>
<ul id="u01">
<li>路飞li>
<li>索隆li>
ul>
<ul id="u02">
<li>娜美li>
<li>罗宾li>
ul>
div>
body>
<script>
let u01 = document.querySelector('#u01');
let lis = u01.children;
for (const li of lis) {
li.addEventListener('mouseenter', function (e) {
let classList = this.classList;
classList.add('enter');
});
li.addEventListener('mouseleave', function (e) {
let classList = this.classList;
classList.remove('enter');
})
}
// 获取父级元素当做委托 执行 *** 作
let u02 = document.querySelector('#u02');
u02.addEventListener('mouseover', function (e) {
// target 属性规定哪个 DOM 元素触发了该事件。
// target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
let classList = e.target.classList;
classList.add('enter');
});
u02.addEventListener('mouseout', function (e) {
let classList = e.target.classList;
classList.remove('enter');
});
script>
点击事件：click
双击事件：dblclick
右键单击事件：contextmenu
鼠标按下：mousedown
鼠标抬起：mouseup
鼠标移动：mousemove
鼠标移入：mouseover
鼠标移出：mouseout
鼠标移入：mouseenter
鼠标移出：mouseleave
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 50px;
margin-left: 100px;
width: 300px;
height: 300px;
border: 3px solid #123456;
text-align: center;
line-height: 300px;
}
#angle {
position: absolute;
top: 360px;
left: 200px;
}
style>
head>
<body>
<div id="box01">航海王div>
<div id="box02">海贼王div>
<img id="angle" src="/html/img/03.jpg" alt="" width="30px">
body>
<script>
let box01 = document.querySelector('#box01');
// selectstart 内容不可以选中 可以右键 *** 作
box01.addEventListener('selectstart', function (e) {
e.preventDefault();
});
// contextmenu 内容可以选中 不可以右键 *** 作
let box02 = document.querySelector('#box02');
box02.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
// 图片随鼠标点击移动
document.addEventListener('click', function (e) {
let angle = document.querySelector('#angle');
// 一、clientX、clientY
// 鼠标位置距离当前body可视区域的x，y坐标
// 二、pageX、pageY
// 对于整个页面来说，包括了被卷去的body部分的长度
// 三、screenX、screenY
// 点击位置距离当前电脑屏幕的x，y坐标
// 四、offsetX、offsetY
// 相对于带有定位的父盒子的x，y坐标
let x = e.pageX + 15;
let y = e.pageY + 15;
angle.style.left = `${x}px`;
angle.style.top = `${y}px`;
angle.style.transition = '2s';
});
script>
键盘按下：keydown
键盘抬起：keyup
键盘按下：keypress
<head>
<style>
span {
display: none;
color: #F00;
font-size: 32px;
}
div {
margin-bottom: 30px;
}
#game {
width: 300px;
height: 300px;
border: 1px solid #abcdef;
position: absolute;
top: 150px;
left: 150px;
}
#angle {
width: 30px;
height: 30px;
position: absolute;
left: 0px;
top: 0px;
}
style>
head>
<body>
<div>
<input type="text" name="account" id="account" value="" placeholder="请输入账号" autocomplete="off">
<span>账号不能为空span>
div>
<div>
<input type="password" name="password" id="password" value="" placeholder="请输入密码">
<span>密码不能为空span>
div>
<button id="submit">登录button>
<div id="game"><img src="/html/img/03.jpg" alt="" id="angle" width="30px">div>
body>
<script>
// 输入框为空无法 *** 作 有不能为空提示
let submit = document.querySelector('#submit');
// 定义事件行为的函数
function commit() {
let account = document.querySelector('#account');
let password = document.querySelector('#password');
// trim() 方法是去除空格
if ('' == account.value.trim()) {
// nextElementSibling 获取下一个元素
let msg = account.nextElementSibling;
msg.style.display = 'block';
// 为元素设置焦点
account.focus();
} else if ('' == password.value.trim()) {
// nextElementSibling 获取下一个元素
let msg = password.nextElementSibling;
msg.style.display = 'block';
password.focus();
} else {
alert(`账号 = ${account.value.trim()}\n密码 = ${password.value.trim()}`);
}
}
submit.addEventListener('click', commit);
// 为窗口添加回车键d起 *** 作 keyCode值为13 代表回车键
document.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
commit();
}
});
// 键盘上下左右键可以控制图片在一个区域内移动
let pos = 30;
// offsetLeft 获取左边距偏移值 offsetTop 获取上边距偏移值
let x = document.querySelector('#angle').offsetLeft;
let y = document.querySelector('#angle').offsetTop;
document.addEventListener('keydown', function (e) {
// 37 左
// 38 上
// 39 右
// 40 下
let angle = document.querySelector('#angle');
switch (e.keyCode) {
case 37:
x -= pos;
if (x < 0) {
alert('游戏结束');
} else {
angle.style.left = x + 'px';
angle.style.transform = 'rotate(180deg)';
}
break;
case 38:
y -= pos;
if (y < 0) {
alert('游戏结束');
} else {
angle.style.top = y + 'px';
angle.style.transform = 'rotate(270deg)';
}
break;
case 39:
x += pos;
if (x >= 300) {
alert('游戏结束');
} else {
angle.style.left = x + 'px';
angle.style.transform = 'rotate(0deg)';
}
break;
case 40:
y += pos;
if (y >= 300) {
alert('游戏结束');
} else {
angle.style.top = y + 'px';
angle.style.transform = 'rotate(90deg)';
}
break;
default:
break;
}
});
script>
<head>
<style>
button {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 32px;
}
img {
width: 600px;
display: none;
}
style>
head>
<body>
<button id="sw">状态切换button>
<button id="login">启用button>
<button id="onepiece">海贼王button>
<br>
<img src="" alt="">
body>
<script>
let login = document.querySelector('#login');
login.addEventListener('click', function (e) {
alert('航海王');
});
let sw = document.querySelector('#sw');
sw.addEventListener('click', function (e) {
// disabled为true 是禁用
// disabled为false 是启用
let isDisabled = login.disabled;
if (isDisabled) {
// removeAttribute() 方法删除指定的属性。
login.removeAttribute('disabled');
login.innerText = '启用';
} else {
// setAttribute() 方法添加指定的属性，并为其赋指定的值。
// 如果这个指定的属性已存在，则仅设置/更改值。
login.setAttribute('disabled', true);
login.innerText = '禁用';
}
});
// 点击海贼王按钮随机切换图片
let onepiece = document.querySelector('#onepiece');
onepiece.addEventListener('click', function (e) {
let img = document.querySelector('img');
img.setAttribute('src', `/html/img/0${Math.ceil(Math.random() * 4)}.jpg`);
img.style.display = 'block';
});
script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）