JavaScript事件详解

博主今天给大家分享一篇关于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>

效果图
这里写图片描述