html鼠标事件
onload 页面加载
onclick 鼠标单击
onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onchange 域的内容改变
在事件触发中，this表示对当前dom对象的引用
1、html事件，在html元素上直接绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:30px;
background:#abcdef;
line-height:30px;
text-align: center;
font-size:14px;
border-radius:5px;
cursor:pointer;
}
div{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
</style>
</head>
<body>
<button id="btn" class="btn" onclick="alert('我被点击啦！');">我是按钮</button>
<div onmouseover="myFun(this,'orange')" onmouseout="myFun(this,'pink')">我是div</div>
<script>
function myFun(obj,bgcolor){
obj.style.backgroundColor=bgcolor;
} </script>
</body>
</html>
DOM 0级
通过dom获取元素，并绑定事件
如果事件绑定跟的是函数名，千万不要加括号，否则不需要点击，页面一刷新即会触发函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
.btn-active{
width:140px;
height:140px;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
background:pink;
}
</style>
</head>
<body>
<div id="btn" class="btn">解锁</div>
<script>
var btn=document.getElementById("btn");
btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
function myFun(){
if(this.className=="btn"){
this.className="btn-active";
this.innerHTML="锁定";
}else{
this.className="btn";
this.innerHTML="解锁";
}
} </script>
</body>
</html>
当把获取dom元素的脚本，放置在元素的前面，会报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
.btn-active{
width:140px;
height:140px;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
background:pink;
}
</style>
<script>
var btn=document.getElementById("btn");
btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
function myFun(){
if(this.className=="btn"){
this.className="btn-active";
this.innerHTML="锁定";
}else{
this.className="btn";
this.innerHTML="解锁";
}
} </script>
</head>
<body>
<div id="btn" class="btn">解锁</div> </body>
</html>
把脚本写在window.onload事件中，确保元素已经生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
.btn-active{
width:140px;
height:140px;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
background:pink;
}
</style>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
function myFun(){
if(this.className=="btn"){
this.className="btn-active";
this.innerHTML="锁定";
}else{
this.className="btn";
this.innerHTML="解锁";
}
}
}
</script>
</head>
<body>
<div id="btn" class="btn">解锁</div> </body>
</html>
onfocus事件和onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#tip{display: none;}
</style>
<script>
window.onload=function(){
var password=document.getElementById("password");
var tip=document.getElementById("tip");
password.onfocus=function(){
tip.style.display="inline-block";
}
password.onblur=function(){
var val=this.value;
// 密码是6位数字
if(val.length==6 && !isNaN(val)){
tip.innerHTML="ok";
}else{
tip.innerHTML="error";
}
}
}
</script>
</head>
<body>
<input type="password" id="password" name="password">
<span id="tip">请输入密码</span>
</body>
</html>
获取body元素 document.body
当select中的option被选择时，select的value值就会等于被选中的option的value值
因此可以用this.value得到被选择的option的value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
var menu=document.getElementById("menu");
menu.onchange=function(){
var color=this.value;
if(color==""){
document.body.style.backgroundColor="#fff";
}else{
document.body.style.backgroundColor=color;
}
}
}
</script>
</head>
<body>
<p>请选择你喜欢的颜色呀</p>
<select name="menu" id="menu">
<option value="">请选择</option>
<option value="orange">元气橙</option>
<option value="pink">仙女粉</option>
<option value="#abcdef">森系蓝</option>
</select>
</body>
</html>
鼠标事件
onmousedown 鼠标按下
onmousemove 鼠标在元素内移动
onmouseup 鼠标松开
onresize 浏览器窗口大小调整
onscroll 拖动滚动条
onsubmit 表单提交 加在form表单上，而不是加在提交按钮上
onmousedown+onmouseup=onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
div{
width:200px;
height:200px;
background:#abcdef;
overflow: auto;
}
#myform{
margin-top:50px;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(){
this.innerHTML="onmousedown";
}
div.onmousemove=function(){
this.innerHTML="onmousemove";
}
div.onmouseup=function(){
this.innerHTML="onmouseup";
}
window.onresize=function(){
console.log("resized");
}
div.onscroll=function(){
this.style.color="orange";
} var myform=document.getElementById("myform");
myform.onsubmit=function(){
alert("表单提交啦~");
}
}
</script>
</head>
<body>
<div id="div">
文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>
</div>
<form id="myform">
<input type="submit">
</form>
</body>
</html>
键盘事件
onkeydown 键盘被按下
onkeypress 键盘被按下（只有字母+数字+符号）
onkeyup 键盘被释放
keyCode 键码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
var count=document.getElementById("count");
var text=document.getElementById("text"); text.onkeyup=function(e){
console.log(e.keyCode);
var len=text.value.length;
count.innerHTML=30-len;
}
}
</script>
</head>
<body>
<p>还可以输入<span id="count">30</span>/30</p>
<textarea name="text" id="text" cols="60" rows="3"></textarea>
</body>
</html>
