01HTML事件：
直接在HTML元素的标签内添加事件，执行脚本。
语法：<tag 事件="执行脚本" > </tag>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用
01鼠标事件
onload:页面加载时触发
onclick：鼠标点击时促发
onmouseover:鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获取焦点时触发
onblur：失去焦点时触发
onchange：域内容发生改变是触发
02鼠标事件
onsubmit:表单中确认按钮被点击时发生(注释：加在表单上！！！不是按钮上！)
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当浏览器调整窗口大小时触发
onscroll：拖动滚动条时触发
键盘事件与KeyCode属性
onkeydown:在用户按下一个键盘按键时发生
onkeypress:在键盘按下并释放一个键时发生
onkeyup:在键盘按键松开时发生
keyCode：（返回onkeypress,onekeydown or onkeup事件触发的键的值的字符代码，或键代码）
关于this指向
在事件触发函数中，this是对DOM对象的引用。
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
/**{background: aqua;}*/
.btn{width: 140px;height: 30px;line-height: 30px;
background: aquamarine;color: red;font-size: 14px;text-align: center;
border-radius: 8px;cursor: pointer; margin-top: 30px;}
</style>
</head>
<body>
<input type="button" value="弹 出" onclick="alert('弹出！')" />
<div id="btn" class="btn" onmouseover="over(this)" onmouseout="mouseout(this)">开 始</div>
<script type="text/javascript">
function over(btn){
btn.style.background='aqua';
console.log(btn);
}
function mouseout(btn){
btn.style.background='aquamarine';
}
</script>
</body>
</html>
image.png
02 DOM 0级事件
1.通过DOM获取HTML元素
2.（获取HTML元素）.事件=执行脚本
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名还是，也可以是一个函数的调用
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
/**{background: aqua;}*/
.btns{width: 140px;height: 30px;line-height: 30px;
background: aquamarine;color: red;font-size: 14px;text-align: center;
border-radius: 8px;cursor: pointer; margin-top: 30px;}
.unbtns{width: 140px;height: 30px;line-height: 30px;
background: chartreuse;color: red;font-size: 14px;text-align: center;
border-radius: 8px;cursor: pointer; margin-top: 30px;}
</style>
</head>
<body>
<input type="button" value="弹 出" onclick="alert('弹出！')" />
<div id="btn" class="btns">锁定</div>
<script type="text/javascript">
function over(btn){
btn.style.background='aqua';
console.log(btn);
}
function mouseout(btn){
btn.style.background='aquamarine';
}
var anli = document.getElementById('btn');
anli.onclick=function(){
if(anli.innerHTML=='锁定'){
anli.className='unbtns';
anli.innerHTML='解锁';
}else if(anli.innerHTML=='解锁'){
anli.className='btns';
anli.innerHTML='锁定';
}
}
</script>
</body>
</html>
image.png
image.png
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
.box{
padding: 50px;
}
.left,.tip{
float: left;
}
.left{margin-right: 10px;}
.tip{display: none;font-size: 14px;}
</style>
<script type="text/javascript">
window.onload=function(){
console.log("激活");
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="亲输入手机号码" />
</div>
<div class="tip" id="tip">
亲输入6位有效的手机号码
</div>
</div>
<script type="text/javascript">
var phone = document.getElementById('phone'),
tip = document.getElementById('tip');
phone.onfocus=onFC;
phone.onblur=onbl;
function onFC(){
tip.style.display='block';
}
function onbl(){
var phonenumber=this.value;//value获取表单的值；
// console.log(phonenumber);
if(phonenumber.length==6 && isNaN(phonenumber)==false){
tip.innerHTML="用户名无误";
}else{
tip.innerHTML="输入错误！";
}
}
</script>
</body>
</html>
<body>
<div class="box">
亲选择你喜欢的BGCOLOR
<select name="" id="baselect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="aquamarine">绿色</option>
<option value="deepskyblue">蓝色</option>
<option value="yellow">黄色</option>
<option value="powderblue">灰色</option>
</select>
</div>
<script type="text/javascript">
var selectbase = document.getElementById("baselect");
selectbase.onchange=xz;
function xz(){
var bgColor = this.value;
// var bgColor = selectbase.options[selectbase.selectedIndex].value;
if(bgColor==''){
document.body.style.background='white';
}else{
document.body.style.background=bgColor;
}
}
</script>
</body>
image.png
<body>
<div id="box" style="width: 200px; height: 200px;background: aquamarine; padding: 25px;">
</div>
<script type="text/javascript">
var get_box = document.getElementById('box');
get_box.onmousedown=function(){console.log('我被按下了');};
get_box.onmousemove=function(){console.log("我被移动了");};
get_box.onmouseup=function(){console.log("鼠标离开我了")};
window.onresize=function(){console.log("我的尺寸被改变了")};
window.onscroll=function(){console.log("滑动了")};
</script>
</body>
<body>
<div>你还可以输<span id="tip">30</span></div>
<textarea name="" id="textnum" rows="5" cols="40"></textarea>
<script type="text/javascript">
var get_textnum=document.getElementById('textnum');
get_textnum.onkeyup=function(){
var get_tip=document.getElementById('tip'),
jsp=30;
var lens=get_textnum.value.length;
var zf=jsp-lens;
// console.log(zf);
get_tip.innerHTML=zf;
}
</script>
</body>
image.png
网友评论