JS DOM事件基础
2017-02-06 本文已影响48人
越IT
【知识点】
1、掌握什么是事件
2、掌握HTML事件
3、掌握DOM0级事件
4、掌握常用的鼠标与键盘事件
5、掌握this的指向
一、什么是事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
二、HTML事件
【语法】：
<tag 事件="执行脚本"></tag>
【功能】：
在HTML元素上绑定事件。
【说明】：
执行脚本可以是一个函数的调用。
为何不建议使用HTML事件？
三、DOM0级事件
【语法】：
ele.事件=执行脚本
【功能】：
在DOM对象上绑定事件
【说明】：
执行脚本可以是一个匿名函数，也可以是一个函数的调用。
案例1：锁定-解锁切换。
锁定解锁切换.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
</head>
<body>
<div class="lock" id="btn">锁定</div>
<script>
//获取按钮
var btn= document.getElementById("btn");
//给按钮绑定事件，this是对该DOM元素的引用
btn.onclick=function(){
//判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
//方法一：
/*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>
</body>
</html>
案例2：使用通过DOM获取HTML元素的方式绑定事件实现全选--反选效果
DOMHTML事件·全选-反选案例.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全选和反选</title>
</head>
<body>
<input type="button" value="全选" id="btn">
<script type="text/javascript">
//获取按钮
var btn=document.getElementById("btn");
btn.onclick=function(){
if(this.value=="全选"){
this.value="反选";
}else{
this.value="全选";
}
}
</script>
</body>
</html>
四、鼠标事件
- 案例·onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//页面加载时执行
window.onload=function(){
//获取box
var box= document.getElementById("box");
var clicked=function(){
alert("我被点击了");
}
box.onclick=clicked;
}
</script>
<script>
//页面加载是执行
window.onload=function(){
var box=document.getElementById("box");
var clicked=function(){
alert("dj");
}
box.onclick=clicked;
}
</script>
</head>
<body>
<div id="box">这是一个DIV</div>
</body>
</html>
- onfocus事件可用有限：
nfocus事件只用于：
1.input标签type为text、password
2.textarea标签
- 案例：onfocus和onblur事件
案例：onfocus和onblur事件.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
padding: 50px;
}
.left,.top{
float: left;
}
.left{margin-right: 10px;}
.tip{display: none;font-size: 14px;}
</style>
<script>
window.onload=function(){
//获取文本框和提示框
var phone=document.getElementById("phone"),
tip=document.getElementById("tip")
//给文本框绑定激活的事件
phone.onfocus=function(){
//让tip显示出来
tip.style.display="block";
}
//给文本框绑定失去焦点的事件
phone.onblur=function(){
//获取文本框的值,value用于获取表单元素的值
var phoneVal=this.value;
//判断手机号码是否是11位的数字
//如果输入正确，则显示对号图标，否则显示错号图标
if(phoneVal.length==11 && isNaN(phoneVal)==false){
tip.innerHTML="";
}else{
tip.innerHTML="";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号码">
</div>
<div class="tip" id="tip">
请输入有效的手机号码
</div>
</div>
</body>
</html>
- onchange事件
onchange：域的内容改变时发生
【说明】：一般用于select表单元素，或者单选按钮radio，复选框checkbox
【案例】
onchange事件案例.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange事件案例</title>
<script>
//页面加载
window.onload=init;
//初始化
function init(){
//获取下拉菜单
var menu=document.getElementById("menu");
//给菜单绑定change事件,一般作用域select或checkbox或radio
menu.onchange=function(){
//获取当前选中的值
var bgcolor=this.value;
//如上也可写作：
//var bgcolor=menu.options[menu.selectedIndex].value;
//设置body的背景色
//如果bgcolor为空,则将背景色设为白色。否则选择对应颜色
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
}
</script>
</head>
<body>
<div class="box">
请选择您喜欢的背景色：
<select name="" id="menu">
<option value="">请选择</option>
<option value="#f00">红色</option>
<option value="#0f0">绿色</option>
<option value="#00f">蓝色</option>
<option value="#ff0">黄色</option>
<option value="#ccc">灰色</option>
</select>
</div>
</body>
</html>
onchange事件案例2：
onchange，this.value案例2.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取下拉菜单
var color=document.getElementById("color");
var div=document.getElementById("div");
//给菜单绑定onchange事件
color.onchange=function(){
//获取当前选中的背景色
var bgcolor=this.value;
//获取当前选中的值
var txt=this.value;
//设置对应div的背景色变化和文字变化
if(bgcolor=="0"){
div.style.background="#fff";
div.innerHTML="我没有任何变化"
}else{
div.style.background=bgcolor;
div.innerHTML="我的背景颜色变成了"+txt+" 色";
}
}
}
</script>
</head>
<body>
<div>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>
- 1/ onsubmit表单中的确认按钮点击时发送
【说明】：onsubmit事件不是加在按钮上，而是表单上。
- 2/ onmousedown和onmouseup成就了onclick事件
onmousedown：鼠标按钮在元素上按下时触发
onmouseup：在元素上松开鼠标按钮时触发
<script>
var box=document.getElementById("box");
// 绑定按下的事件
box.onmousedown=function(){
console.log("我被按下了");
}
// 绑定移动的事件
box.onmousemove=function(){
console.log("我被移动了");
}
// 绑定松开的事件
box.onmouseup=function(){
console.log("我被松开了");
}
// 绑定点击的事件
box.onclick=function(){
console.log("我被点击了");
}
// 浏览器窗口尺寸发生改变时
window.onresize=function(){
console.log("我的尺寸被改变了");
}
// 拖动滚动条
window.onscroll=function(){
console.log("我被拖动了");
}
box.onscroll=function(){
console.log("我是DIV的滚动条");
}
</script>
五、键盘事件与keyCode属性
键盘事件案例：
键盘事件案例.gif
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.text span{font-weight:bold;color:#f00;}
em{font-style:normal;}
b{font-weight:normal;}
</style>
</head>
<body>
<div>
<p class="text">
<b id="showcount">您还可以输入</b>
<span id="totalbox"><em id="count">30</em>/30</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
<script>
// 获取文本框及其他元素
var text=document.getElementById("text");
var total=30;
var count=document.getElementById("count");
var showcount=document.getElementById("showcount");
var totalbox=document.getElementById("totalbox");
// 绑定键盘事件
document.onkeyup=function(){
// 获取文本框值的长度
var len=text.value.length;
// 计算可输入的剩余字符
var allow=total-len;
var overflow=len-total;
// 如果allow小于0
if(allow<0){
showcount.innerHTML="您已超出"+overflow;
totalbox.innerHTML='';
}else{
showcount.innerHTML='您还可以输入';
totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
}
}
</script>
</body>
</html>
六、关于this指向
在事件触发的函数中，this是对该DOM对象的引用。
七、包含事件的函数调用无括号
【注意】：
Paste_Image.png
本笔记学习整理自慕课网
