DOM0级事件
2019-03-04 本文已影响0人
三人行大道
1.通过DOM获取HTML元素
2.(获取HTML元素).事件=执行脚本
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用
<style>
.lock{
width:140px;height: 30px;line-height:30px;
background: #f00;color:#fff;font-size:14px;text-align:center;
border-radius:5px; cursor:pointer;margin-top30px;
}
.unlock{
width:140px;height: 30px;line-height:30px;
background: #689;color:#ccc;font-size:14px;text-align:center;
border-radius:5px; cursor:pointer;margin-top30px;
}
</style>
<div class="lock" id="btn">锁定</div>
<script>
//获取按钮
var btn=document.getElementById("btn")
//给定按钮绑定事件
btn.onclick = function(){
// this.className=".unlock";//改变（替换）原来的类
// this.innerHTML="解锁";//改变标签中的文本内容
//第一种方法 根据类判断
// 判断如果按钮是锁定，则显示为解锁，变为灰色
// 否则显示为锁定，变为蓝色
if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
//第二种方法 根据文本判断
// if(this.innerHTML="锁定"){
// this.className="unlock";
// this.innerHTML="解锁";
// }else{
// this.className="lock";
// this.innerHTML="锁定";
// }
}
</script>
不建议使用HTML事件，原因是
1.多元素绑定相同事件，效率低
2.不建议在HMTL元素中写JS代码
上面代码中可以不用匿名函数
可以自定义函数
css样式
<style>
.lock{
width:140px;height:30px;line-height:30px;background:#00f;
color:#fff;font-size:14px;text-align:center;border-radius:5px;
cursor:pointer;margin-top:30px;
}
.unlock{
width:140px;height:30px;line-height:30px;background:#666;
color:#ccc;font-size:14px;text-align:center;border-radius:5px;
cursor:pointer;margin-top:30px;
}
</style>
JS代码
<body>
<div id="btn" class="lock">锁定</div>
<!--获取id为btn--DOM元素-->
<script>
btn = document.getElementById("btn");
//自定义函数
function clickBn(){
if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
}
btn.onclick = clickBn;
//点击按钮调用clickBn这个函数；
// 这里有一个需要注意的事项是调用自定义的函数的时候，不能在函数后面家函数
</script>
</body>
