1、javaScript事件基础
关于DOM事件的基础,我们将会去掌握一些基础的知识,什么是事件,HTML事件,DOM0级事件,常用的鼠标和键盘事件,还有this的指向问题。
2、什么是事件
1、事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
3、HTML事件
1、HTML事件就是直接在html标签中添加事件来执行脚本,这种绑定事件的方法就是HTML事件。
2、HTML事件的语法:(1)功能:在HTML元素上绑定事件。(2)执行脚本可以是一个函数的调用(JS代码)
<tag 事件="执行脚本"></tag>
3、下面来写一段代码:
(1)首先在标签中的事件绑定,可以去调用函数,也可以直接写执行脚本。
(2)this指向的就是我们这个事件被绑定的这个DOM元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.btn{width: 140px;height: 30px;line-height: 30px;background: #00f;
color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')">
<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
<script>
//鼠标滑过的时候调用的函数
function mouseoverFn(btn){
btn.style.background="#f00";
}
function mouseoutFn(btn){
btn.style.background="#00f";
}
</script>
</body>
</html>
4、DOM0级事件
1、给一个元素设置DOM0级事件的步骤有2个:(1)通过DOM获取HTML元素。(2)(获取HTML元素).事件=执行脚本
特别注意:执行脚本可以是一个匿名函数,也可以是一个函数的调用(函数的调用千万不能加括号,如下面代码中的注释)。
2、为什么会有DOM0级事件,首先我们之前的HTML事件是给每一个HTML元素里都绑定事件,现在有一个列表,列表下面有很多项,假如都要给每一项添加事件,那就太麻烦了。
3、来看下面的代码:(每个属性只能绑定一个事件)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.ber{width: 140px;height: 30px;line-height: 30px;background: #00f;
color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="btn" class="ber">开始</div>
<script>
var inp=document.getElementById("btn");
inp.onmouseover= function(){
this.style.background="#f00";
}
inp.onmouseout=tongyife;//切记函数的调用后面不能加括号,否则会自动执行,而且this不起作用
function tongyife(){
this.style.background="#00f";
}
</script>
</body>
</html>
4、不建议使用HTML事件的原因(1)多元素绑定事件:效率低(2)不建议在HTML文件中写JS代码。
5、事件类型(鼠标事件)
这里先说明的是:onsubmit是加载form表单标签上的,不是加在提交按钮button上的。
5.1、onload页面加载事件
1、在上面所有的代码中,我们的<script></script>的标签和标签中的内容都是在body中的最后才写的,因为代码解析是从最上面到最下面,我们在<script></script>中有很多通过ID去获取元素的操作,所以如果我们直接把<script></script>中的内容写在head中,这些元素都找不到,以为代码还没有执行到下面,找不到ID为某某的元素。
2、所以我们如果要把<script></script>写在head中,那么就要将代码写在window.onload=function(){ }当中。比如下面这样:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.ber{width: 140px;height: 30px;line-height: 30px;background: #00f;
color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
margin-top: 30px;
}
</style>
<script>
window.onload=function(){
var inp=document.getElementById("btn");
inp.onmouseover= function(){
this.style.background="#f00";
}
}
</script>
</head>
<body>
<div id="btn" class="ber">开始</div>
</body>
</html>
3、那么onload是什么时候去加载的,实际上程序执行到window.onload的时候就会跳过,等到所有图片,文字,二进制文件都加载完了,才回头来加载window.onload中的内容。
5.2、onfocus和onblur事件(获取焦点和失去焦点)
1、onfocus事件只用于input标签为text、password和textarea。
2、下面的代码想我们展示了一个手机号码输入框的案例:其中判读非数字的API是isNaN。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.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.style.display='block';
}
//失去焦点调用的函数
phone.onblur=function(){
var phoneValue=this.value;//通过value来获取文本框中内容
if(phoneValue.length==11&&isNaN(phoneValue)==false){
tip.innerHTML="手机号码输入正确";
}else{
phoneValue.length==0?tip.innerHTML="请输入手机号码":
tip.innerHTML="错误的手机号";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号">
</div>
<div id="tip" class="tip">
请输入手机号码
</div>
</div>
</body>
</html>
在浏览器中的效果是:分别是初识状态,获取焦点,正确的号码,错误的号码:
5.3、onchange(域的内容改变时发生)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.onload=function(){
var menu=document.getElementById("colorselect");
var box=document.getElementById("box");
menu.onchange=function(){
box.style.color=this.value;
}
}
</script>
</head>
<body>
<div class="box" id="box">
请选择颜色来改变字体颜色
<select name="" id="colorselect">
<option value="black">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="gray">灰色</option>
</select>
</div>
</body>
</html>
在浏览器中的效果是:
5.4、onresize和onscroll
首先onresize是当调整浏览器窗口的大小时触发,onscroll是拖动滚动条滚动时触发,这连个事件的调用对象都是window。不过onscroll的调用对象也可以其他的的需要滑动的列表啊,视图等等。
6、键盘事件
下面看这个代码:下面带代码实现了一个多行文本框输入,并根据键盘事件获取文本框文字的长度来提示用户的输入:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
span{color:red;font-weight: bold;}
</style>
</head>
<body>
<div class="box" id="box">
<p>你还可以输入<span><em id="count">30</em>/30个字</span></p>
<div class="input">
<textarea name="" id="text" cols="70" rows="3" maxlength="30"></textarea>
</div>
</div>
<script>
var text=document.getElementById("text");
var emm=document.getElementById("count");
document.onkeyup=function(){
var len=text.value.length;
emm.innerHTML=30-len;
}
</script>
</body>
</html>
在浏览器中的效果: