Javascript基础教程(三十七)

1.什么是事件(Event)

我们知道Javascript是以事件驱动为核心的一门语言。

事件的三要素是:事件源,事件,事件驱动程序比如,我用手去安开关,灯亮了,这件事情里,事件源是手,事件是:按开关.事件驱动程序是:灯的开和关. 再比如,网页上弹出一个广告,我点击右上角的x,这件事情里,事件源是x,事件是:onclick.事件驱动程序是:广告关闭了. 总结: - 事件源:产生事件的html元素,比如：按钮、超链接、图片等等. - 事件:js已经定义好的一些事件,见下图。 - 事件处理程序:发生事件后，对样式和html元素的操作。

2.常见事件

事件名	说明
onclick	单击事件
ondbclick	双击事件
onkeyup	键盘按键被松开时发生
onchange	事件会在域的内容改变时发生
onfocus	事件在对象获得焦点时发生
onblur	事件在对象失去焦点时发生
onmouseover	事件会在鼠标指针移动到指定的元素上时发生
onmouseout	事件会在鼠标指针移出指定的对象时发生。（会产生事件冒泡，包括子元素）
onmouseleave	事件在鼠标移出元素时触发。（不会产生事件冒泡，不包括子元素）
onload	事件会在页面或图像加载完成后立即发生
onunload	事件在用户退出页面时发生
onsubmit	事件在表单提交时触发
onreset	事件在表单重置时触发

3.绑定事件的几种方式

1)直接绑定匿名函数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="bt" value="点我"/>

<script>
    let bt = document.getElementById("bt");
    bt.onclick = function(){
        alert('点你妹啊！');
    }
</script>
</body>
</html>

2)先单独定义函数,再绑定。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="bt" value="点我"/>

<script>
    function test(){
        alert('点你妹啊！');
    }
    let bt = document.getElementById("bt");
    bt.onclick = test;
</script>
</body>
</html>

3)行内绑定

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="bt" value="点我" onclick="test()"/>
<script>
    function test(){
        alert('点你妹啊！');
    }
</script>
</body>
</html>

如果，行内绑定函数代码仅仅是一行；也可以这样简写：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="bt" value="点我" onclick="javascript:alert('点你妹啊！');"/>
</body>
</html>

4.综合实例

使用onmouseover和onmouseleave实现菜单效果：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 280px;
            height: auto;
            margin: 0px auto;
            padding: 0px;
        }

        #title{
            margin: 0px auto;
            text-align: center;
            height: 40px;
            width: 280px;
            background: lightsalmon;
            color: #FFF;
            line-height: 40px;
            cursor: pointer;
        }

        .submenu{
            padding: 0px;
            margin: 0px auto;
            text-align: center;
            width: 280px;
            background: #cccccc;
            color: #666666;
            display: none;
        }

        .submenu li{
            cursor: pointer;
            list-style: none;
            width: 280px;
            text-align: center;
            height: 36px;
            line-height: 32px;
        }
    </style>
</head>
<body>

<div id="box" onmouseleave="hideMenu()">
    <div id="title" onmouseover="showMenu()">课程</div>
    <ul class="submenu">
        <li>后端</li>
        <li>前端</li>
        <li>运维</li>
        <li>UI</li>
    </ul>
</div>

<script>
    function showMenu(){
        console.log('显示菜单....');
        document.getElementsByClassName("submenu")[0].style.display = "block";
    }
    function hideMenu(){
        document.getElementsByClassName("submenu")[0].style.display = "none";
    }
</script>
</body>
</html>

运行效果：

使用onchange事件实现一个省市级联的效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
省份：<select id="province" onchange="changeCity();">
    <option value="-1">-----请选择-----</option>
    <option value="0">陕西省</option>
    <option value="1">山西省</option>
    <option value="2">河南省</option>
    <option value="3">河北省</option>
</select><br>
城市：<select id="city"></select>
<script type="text/javascript">
    let citys = new Array(); //创建一个二维数组
    citys[0]=["西安","渭南","宝鸡","咸阳","延安"];
    citys[1]=["太原","临汾","大同","运城"];
    citys[2]=["郑州","洛阳","开封","南阳","信阳","焦作","三门峡"];
    citys[3]=["石家庄","邯郸","保定","唐山","廊坊"];

    function changeCity()
    {
        let province = document.getElementById("province").value;
        let city = document.getElementById("city");
        //把城市列表清空。
        city.options.length=0;
        //判断用户选择的省份
        if(province!=-1)
        {
            for(let i=0;i<citys[province].length;i++){
                city.add(new Option(citys[province][i],citys[province][i]));
            }
        }
    }
</script>
</body>
</html>

运行效果：