慕课前端入门-DOM事件
1. html事件
- onload:页面加载时触发
- onclick:鼠标点击时触发
- onmouseover:鼠标划过时触发
- onmouseout:鼠标离开时触发
- onfocus:获得焦点时触发
- onblur：失去焦点时触发
- onchange:域的内容改变时发生
1.1.在html中指定事件
以onmouseover和onmouseout为例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.btn{width: 140px;height: 30px;line-height: 30px;background: #00f;color: #fff;font-size: 14px;text-align: center;border-radius: 10px;cursor: pointer;margin-top: 30px;}
</style>
</head>
<body>
<input type="button" value="弹 出" onclick="alert('我是按钮')">
<!-- 指定鼠标滑过和离开时调用的方法 给按钮绑定事件，this是对该DOM元素的引用-->
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">开始</div>
</body>
</html>
<script type="text/javascript">
function mouseoverFn(obj, bgColor) {
obj.style.backgroundColor=bgColor;
}
function mouseoutFn(obj, bgColor){
obj.style.backgroundColor=bgColor;
}
</script>
不建议使用html：
- 1.多元素绑定相同事件时，效率低
- 2.不建议在html中写JS代码
1.2 DOM0级事件
1.通过DOM获取html元素
2.html元素.事件=方法，注意这里的方法不能加()
//语法
ele.事件=执行脚本
//功能：在DOM对象上绑定事件。说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用
onclick事件的示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.lock{width: 140px;height: 30px;line-height: 30px;background: #00f;color: #fff;font-size: 14px;text-align: center;border-radius: 10px;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: 10px;cursor: pointer;margin-top: 30px;}
</style>
</head>
<body>
<div id="btn" class="lock">开始</div>
</body>
</html>
<script type="text/javascript">
//获取按钮
var btn = document.getElementById("btn");
//给按钮绑定事件，this是对该DOM元素的引用
btn.onclick=function(){
//判断如果按钮时锁定，则显示为解锁，变为灰色；否则显示为锁定，变为蓝色。
if(this.className=="lock"){//this.innerHTML=="锁定"
this.className = "unlock";
this.innerHTML="解锁";
}else{
this.className = "lock";
this.innerHTML="锁定";
}
}
</script>
1.3 页面加载与页面卸载
onload:页面加载完毕时执行
当用户离开页面时，会发生 unload 事件。具体来说，当发生以下情况时，会发出 unload 事件：
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器
- 重新加载页面
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box{width: 200px;height: 100px;background-color: red;border-radius: 5px;}
</style>
<script type="text/javascript">
window.onload=function(){
var box = document.getElementById("box");
box.onclick=function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<div id="box">这是一个div</div>
</body>
</html>
1.4 获得焦点与失去焦点
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{padding: 50px;}
.left,.tip{float: left;}
.left{margin-right: 10px;}
.tip{display: none;font-size: 14px;}
img{width: 25px;}
</style>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号码">
</div>
<div class="tip" id="tip">请输入有效的手机号码</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
//获取文本框
var phone = document.getElementById("phone"),tip=document.getElementById("tip");
//给文本框绑定激活的事件
phone.onfocus=function(){
//让tip显示出来
tip.style.display="block";
console.log(tip);
}
//给文本框绑定失去焦点的事件
phone.onblur=function(){
//获取文本框的值
var phoneVal = this.value;
console.log(phoneVal);
if(phoneVal.length==11&& !isNaN(phoneVal)){
tip.innerHTML='<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600244802668&di=47ca91952762f78b8255ba995b105c7b&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F23%2F68%2F5b6e52a3011ee_610.jpg">';
}else{
tip.innerHTML='<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600244828292&di=1cb7a37002e0ba3d4500538dc248cf7c&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F95%2F47%2F7656f2e3766900c.jpg">';
}
}
}
</script>
1.5 域发生改变
给菜单绑定change事件，一般作用域select或checkbox或radio
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box{width: 200px;height: 100px;background-color: red;border-radius: 5px;}
</style>
<script type="text/javascript">
window.onload=init;
function init(){
//获取下拉菜单
var menu = document.getElementById("menu");
//获取当前选中的值有2种方法。
// var bgcolor = this.value;
var bgcolor = menu.options[menu.selectedIndex].value;
document.body.style.backgroundColor=bgcolor;
//给菜单绑定change事件，一般作用域select或checkbox或radio
menu.onchange=function(){
var bgcolor = menu.options[menu.selectedIndex].value;
//如果bgcolor为空，背景为白色
if(bgcolor==""){
bgcolor="white";
}
//设置body的背景色
document.body.style.backgroundColor=bgcolor;
// console.log(bgcolor);
}
}
</script>
</head>
<body>
<div class="box">
请选择您喜欢的背景色：
<select name="" id="menu">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="green" selected>绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
<option value="gray">灰色</option>
</select>
</div>
</body>
</html>
2.鼠标事件
- onsubmit:表单中的确认按钮被点击时发生。onsubmit事件不是加在按钮上，而是表单上。
- onmousedown:鼠标按钮在元素上按下时触发
- onmousemove:在鼠标指针移动时发生
- onmouseup:在元素上松开鼠标按钮时发生
- onresize:当调整浏览器窗口的大小时触发
- onscroll:拖动滚动条滚动时触发
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 200px;height: 200px;background-color: #f00;overflow: auto;}
</style>
</head>
<body>
<div class="box" id="box">你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br>你点我啊<br></div>
</body>
</html>
<script type="text/javascript">
var box = document.getElementById("box");
//绑定按下的事件
box.onmousedown=function(){
console.log("我被按下了");
}
box.onmouseup=function(){
console.log("我被松开了");
}
box.onmousemove=function(){
console.log("我被移动了");
}
box.onclick=function(){
console.log("我被点击了");
}
window.onscroll=function(){
console.log("我被滚动了");
}
window.onresize=function(){
console.log("我的尺寸被改变了");
}
box.onscroll=function(){
console.log("我被滚动了");
}
</script>
3.键盘事件与keyCode属性
- onkeydown:在用户按下一个键盘按键时发生
- onkeypress:在按下键盘按键式发生（只会响应字母与数字符号）
- onkeyup:在键盘按键被松开时发生
- keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键值的字符代码，或键的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.text span{font-weight: bold;color: #f00;}
em{font-style: normal;}
</style>
</head>
<body>
<div>
<p class="text">您还可以输入<span><em id="count">30</em>/30</span></p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var text = document.getElementById("text"),total=30,count=document.getElementById("count");
document.onkeyup=function(event){
count.innerText=30-text.value.length;
}
</script>
