文章目录
事件事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。
事件三要素
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
1.点击按钮修改多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div>
<p>我是一个p</p>
<p>我是一个p</p>
<p>我是一个p</p>
<p>我是一个p</p>
<p>我是一个p</p>
</div>
<script>
document.getElementById("btn").onclick=function () {
var pObjs=document.getElementsByTagName("p");
for (var i=0;i<pObjs.length;i++)
pObjs[i].innerText="我们不是p，我们是你们的爸爸";
}
</script>
</body>
</html>
2.排他功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排他</title>
</head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
//为每个按钮都要注册点击事件
btnObjs[i].onclick = function () {
//把所有的按钮的value值设置为默认的值:没怀孕
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没怀孕";
}
//当前被点击的按钮设置为:怀孕了
this.value = "怀孕了";
};
}
//for循环是在页面加载的时候,执行完毕了
// for(var k=0;k<5;k++){
//
// }
// console.log(k);//
//事件是在触发的时候,执行的
</script>
</body>
</html>
3.点击按钮改变div的属性设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有压力</title>
<style>
div{
width: 300px;
height: 200px;
background-color: darkmagenta;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<input type="button" value="变身后显示" id="btn2"/>
<input type="button" value="第二种隐藏" id="btn3"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
my$("btn").onclick=function () {
my$("dv").style.display="none";
};
my$("btn2").onclick=function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";
my$("dv").style.display="block";
};
my$("btn3").onclick=function() {
if(this.value=="第二种隐藏"){
my$("dv").style.display="none";//隐藏
this.value="显示";
}else if(this.value=="显示"){
my$("dv").style.display="block";//显示
this.value="第二种隐藏";}
};
</script>
</body>
</html>
4.隐藏于显示的另一种方法（改变类名）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ddd</title>
<style>
div {
width: 300px;
height: 200px;
background-color: yellow;
border: 2px solid red;
}
.cls {
display: none;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//点击按钮,通过类样式的方式设置div的显示和隐藏
my$("btn").onclick = function () {
// console.log(my$("dv").className);
//判断的是div是否应用了类样式
if (my$("dv").className != "cls") {
//现在是显示的,应该隐藏
my$("dv").className = "cls";
this.value = "显示";
} else {
//隐藏的状态----立刻显示
my$("dv").className = "";
this.value = "隐藏";
}
};
</script>
</body>
</html>
https://blog.csdn.net/weixin_45525272/article/details/108097295