博主今天给大家分享一篇关于JavaScript事件的文章,主要内容包括常用事件介绍、事件对象、事件委托机制等。
- 1、常用事件
onclick:鼠标单击事件
onfocus:获得焦点时触发
onblur:失去焦点时触发事件
onmouseover:鼠标移动到元素上触发事件
onsubmit:确认按钮被点击时触发,常用于检测表单输入是否合法
onload:一张网页或元素加载完成时触发
案例1(获得/失去焦点触发)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>获取焦点事件和失去焦点事件</h1>
用户名:<input id="username" type="text" onfocus="t();" onblur="t2();" /><br/>
邮箱:<input id="email" type="text"/>
</body>
<script>
//获取焦点触发
function t(){
//将边框变红
var username = document.getElementById('username');
username.style.border = '1px solid red';
}
//失去焦点触发
function t2(){
//还原边框
var username = document.getElementById('username');
username.style.border = '';
}
</script>
</html>
效果图
案例2(鼠标/表单提交触发)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
div{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<h1>鼠标移动事件和onSubmit事件</h1>
<div onmouseover="t();" ></div>
<form method="get" action="" onsubmit="return t2();">
<p><input type="text" name="username"/></p>
<p><input type="text" name="email"/></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script>
//鼠标移上元素触发函数
function t(){
alert('onmouseover');
}
//表单提交触发函数
function t2(){
var username = document.getElementsByName('username')[0];
var email = document.getElementsByName('email')[0];
//如果不为空,则通过
if(username.value != '' && email.value != ''){
return true;
}
alert('请填写完整');
return false;
}
</script>
</html>
效果图
案例3(网页加载完成触发)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<script>
//将onload看做是window的一个属性,这个属性的内容是函数
window.onload = function(){
document.getElementsByTagName('p')[0].style.border = '1px solid red';
}
</script>
<body>
<h1>onload函数使用</h1>
<p>
这是一个P标签
</p>
</body>
</html>
- 2、事件、样式、结构分离
在开发中,经常是多个人进行协同开发,可能做页面的是一个人,写Js的是另一个人,而css也可能是另外一个人,所以不能像下面这样写代码,要将页面结构、js行为、样式进行分离。
<div onclick="t();" style="wdith:300px;height:200px;background:red;"></div>
修改:将样式抽取到独立的文件中,然后将onclick
看做是对象的属性,只不过这个属性是一个方法而已,写一个匿名函数,如:
div.onclick = function(){
this.style.backgroundColor = 'blue';
}
- 3、事件对象
(1)事件对象包括事件的相关信息,如鼠标、时间、坐标、触发的DOM
对象等
(2)事件对象被系统传递给事件函数的第一个参数
(3)事件对象的属性在IE/W3c上略有不同
(4)一个重要的属性:target
、srcElement
(IE低版本下),代表最底层触发的DOM
对象
//这里的ev就是事件对象
div.onclick = function (ev){
console.log(ev);//查看事件对象
};
- 4、事件委托
事件委托主要是把事件加到父级元素上,然后通过事件对象中的target/srcElement属性来确定哪个子元素响应事件,实现效果。如果不是这样的话,就要给每个子元素都添加事件,比较浪费资源。
案例:将table中的单元格,将其颜色变为黑色
不使用时间委托:就要给table下的所有td都绑定上函数,这样比较浪费资源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:300px;
height:300px;
border:0;
border-collapse: collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<h1>事件委托</h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//不使用事件委托机制,给每个td都绑定函数
var tds = document.getElementsByTagName('td');
var i = 0;
while(i < tds.length){
tds[i].onclick = function(){
this.style.backgroundColor = 'black';
}
i++;
}
</script>
</html>
使用事件委托:只给table绑定事件,然后根据事件对象的target属性确定事件源为td,然后修改事件源的背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:300px;
height:300px;
border:0;
border-collapse: collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<h1>事件委托</h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//使用事件委托机制
var table = document.getElementsByTagName('table')[0];//获取table对象
table.onclick = function(ev){
//使用事件对象中的target属性
ev.target.style.backgroundColor = 'black';
}
</script>
</html>
效果图