JavaScript 温故而知新（九）DOM事件
文章目录
-
-
- JavaScript的 DOM事件
-
- 事件绑定
-
- ***Html事件***
- ***DOM 0级 事件***
-
- ***事件的执行脚本***
- 事件类型
-
- ***事件类型 onload***
- ***事件类型 onfocus 和 onblur***
- ***事件类型 onchange***
- ***事件类型 其他事件***
- ***键盘事件与keyCode***
-
JavaScript的 DOM事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件绑定
Html事件
直接在HTML元素标签内添加事件，执行脚本
语法：< tag 事件 = " 执行脚本 " > < / tag >
功能：在HTML元素上绑定事件
说明：执行脚本可以是一个函数的调用
1、鼠标点击事件 onclick
<!-- 点击事件 onclick="" -->
<input type="button" value="弹出" onclick="alert('我是按钮')">
2、鼠标移入、移出事件 onmouseover、onmouseout
<!-- 鼠标划过按钮时 调用mouseoverFn的函数 -->
<!-- 鼠标离开时 调用mouseoutFn的函数 -->
<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
//关于this指向
//在事件触发的函数中,this是对该DOM对象的引用
//定义函数
function mouseoverFn(bn){
//鼠标划过按钮时,按钮的背景变为红色
//查看指向是否正确
console.log(bn);
//打印 就是DOM对象 开始
//鼠标划过按钮时,按钮的背景变为红色
bn.style.background = "#f00";
}
function mouseoutFn(bn){
//鼠标离开时,按钮的背景变回原来颜色
bn.style.background = "#00f";
}
<!-- 自定义颜色 将颜色当做参数传递 -->
<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#00f')">开始</div>
<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
//自定义颜色 将颜色当做参数传递
//调用函数的时候 就传了两个参数过来
function mouseoverFn(bn,bgColor){
bn.style.background = bgColor;
}
function mouseoutFn(bn,bgColor){
bn.style.background = bgColor;
}
DOM 0级 事件
1、通过DOM获取HTML元素
2、（获取HTML元素）.事件 = 执行脚本
语法：ele.事件 = 执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用
事件的执行脚本
1 执行匿名函数、 ele.onclick = function() { 执行脚本 }
2 单独调用自定函数、 ele.onclick = fn; function fn() { 执行脚本 }
.lock{
width: 140px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 30px;
color: #fff;
border-radius: 5px;
background: #00f;
cursor: pointer;
}
.unlock{
width: 140px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 30px;
color: #ccc;
border-radius: 5px;
background: #666;
cursor: pointer;
}
<div id="btn" class="lock">锁定</div>
//获取按钮
var btn = document.getElementById("btn");
//给按钮绑定事件
//点击时 执行匿名函数,this是对该DOM元素的引用
btn.onclick = function(){
console.log(this);
//输出 锁定
//改变class
this.className = "unlock";
//改变文本内容
this.innerHTML = "解锁";
//重复切换
//判断如果按钮时锁定,则显示为解锁,变为灰色,否则显示为锁定,变为蓝色
//通过className判断
if(this.className == "lock"){
this.className = "unlock";
this.innerHTML = "解锁";
}else{
this.className = "unlock";
this.innerHTML = "锁定";
}
//通过innerHTML判断
if(this.innerHTML == "锁定"){
this.className = "unlock";
this.innerHTML = "解锁";
}else{
this.className = "unlock";
this.innerHTML = "锁定";
}
}
//单独调用函数
function clickBtn(){
alert("我是按钮");
}
//点击按钮调用clickBtn函数
btn.onclick = clickBtn;
事件类型
事件类型 onload
页面加载时触发
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//页面加载时执行
//在标签中时,才需要window.onload
//网页中的所有元素（文本、图像、CSS样式等）加载完后才触发执行 window.onload事件
window.onload = function(){
var box = document.getElementById("box");
//函数声明的两种写法
//函数声明(一)
function clicked(){
alert("我被点击了");
}
//函数声明(二)
// var clicked = function(){
// alert("我被点击了");
// }
box.onclick = clicked;
}
</script>
</head>
<body>
<div id="box">这是一个DIV</div>
</body>
</html>
事件类型 onfocus 和 onblur
onfocus：获取焦点时触发
onblur：失去焦点时触发
用于input标签type为text、password和textarea标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
padding: 50px;
}
.left,.tip{
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;
//打印出输入后移出光标的值
console.log(phoneVal);
//判断手机号码是否是11位的数字
//isNaN(phoneVal) 意思phoneVal是非数字 == false,等于 phoneVal是数字
//如果输入正确，则显示对号图标，否则显示错误图标
if(phoneVal.length == 11 && isNaN(phoneVal) == false){
tip.innerHTML = '
'
}else{
tip.innerHTML = '
'
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input id="phone" type="text" placeholder="请输入手机号码">
</div>
<div id="tip" class="tip">
请输入有效的手机号码
</div>
</div>
</body>
</html>
事件类型 onchange
onchange：域的内容改变时发生
主要使用在 下拉菜单 和 单选多选时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//页面加载
window.onload = init;
//初始化
function init(){
//获取下拉菜单
var menu = document.getElementById("menu");
//给菜单绑定onchange事件
//菜单内容发生改变时,执行匿名函数脚本
//一般作用域select或checkbox或radio
menu.onchange = function(){
//获取当前选中的值
// var bgcolor = this.value;
//或者
//menu.options 就是menu菜单下全部的option,它是一个数组
//[menu.selectedIndex] 就是menu当中被选中的,option索引
var bgcolor = menu.options[menu.selectedIndex].value
console.log(bgcolor);
//如果bgcolor为空,则下面的脚本将不执行
// if(bgcolor == "") return;
//设置body的背景色 等于获取到的bgcolor
//如果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>
事件类型 其他事件
onsubmit：表单中的确认按钮（提交按钮）被点击时发生（onsubmit事件不是加在按钮上，二是表单上）
onmousedown：鼠标按钮在元素上 按下时触发（按下事件）
onmousemove：在鼠标指针 移动时发生（移动事件）
onmouseup：在元素上 松开鼠标按钮时触发（松开事件）
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条滚动时触发
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 2000px;
}
.box{
width: 200px;
height: 200px;
overflow-y:auto;
background: #f00;
}
.box p{
height: 500px;
}
</style>
</head>
<body>
<div id="box" class="box">
<p>拖动</p>
</div>
</body>
<script>
var box = document.getElementById("box");
//绑定按下的事件
box.onmousedown = function(){
console.log("我被按下了");
}
//绑定移动的事件
box.onmousemove = function(){
console.log("我被移动了");
}
//绑定松开的事件
box.onmouseup = function(){
console.log("我被松开了");
}
//绑定点击的事件
box.onclick = function(){
//点击事件的顺序是通过 按下事件onmousedown和松开事件onmouseup组成的
//所以事件的执行顺序是onmousedown、onmouseup、onclick
console.log("我被点击了");
}
//浏览器窗口尺寸发生改变时
window.onresize = function(){
console.log("我的尺寸被改变了");
}
//拖动滚动条
window.onscroll = function(){
console.log("我被拖动了");
}
//可以绑定在dom元素上
box.onscroll = function(){
console.log("我被拖动了");
}
</script>
</html>
键盘事件与keyCode
onkeydown：在用户按下一个键盘按键时发生
onkeypress：在按下键盘按键时发生（只会响应字母与数字符号）
onkeyup:在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown或onkeyup 事件触发的键的值的字符代码，或键的代码
//在事件触发的function里,用一个参数event接受事件对象
document.onkeydown = function(event){
console.log(event.keyCode);
//输出的是字符代码，或键的代码
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.text span{
color: #f00;
font-weight: bold;
}
em{
font-style: normal;
}
</style>
</head>
<body>
<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>
</body>
<script>
//获取文本框
var text = document.getElementById("text");
//总数最多可以输入多少个字
var total = 30;
//获取em
var count = document.getElementById("count");
//绑定键盘事件
document.onkeyup = function(){
//获取文本框的长度
//输出文本输入的值
// var len = text.value;
// console.log(len);
var len = text.value.length;
// console.log(len);
//输入了多少字
//还可以输入多少个字=总数-已输入的字数
var allow = total - len;
count.innerHTML = allow;
}
</script>
</html>