JS事件处理案例-优快云博客

本文介绍JavaScript中各种事件处理的应用案例，包括下拉列表联动、焦点事件、鼠标悬停事件及页面跳转等，并探讨如何阻止事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 .
1.1onchange事件:意思是下拉列表发生变化时对应的另外一个下拉列表也会随之变化.最常见的是改变每个市,后面的下拉列表对应的区就会发生改变.
1.2 . 通过province这个id获取省的value,从而可以通过city.innerHTML进行改变对应的区.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!-- 测试onchange事件-->

        <select name="province" id="province">
            <option value="广州市">广州市</option>
            <option  value="北京市">北京市</option>
            <option   value="上海市">上海市</option>
        </select>
        <select name="city" id="city">
            <option value='天河区'>天河区</option>
            <option value='白云区'>白云区</option>
            <option value='越秀区'>越秀区</option>
        </select>
        <script>
            //1.查找province下拉列表对象
            var province = document.getElementById("province");
            var city= document.getElementById("city");
            province.onchange=function(){
                //2.获取选择的省
                switch(province.value){
                    case "广州市":
                    city.innerHTML="<option value='天河区'>天河区</option><option value='白云区'>白云区</option><option value='越秀区'>越秀区</option>";
                    break;
                    case "北京市":
                    city.innerHTML="<option value='海淀区'>海淀区</option><option value='东城区'>东城区</option><option value='西城区'>西城区</option>";
                    break;
                    case "上海市":
                    city.innerHTML="<option value='静安区'>静安区</option><option value='浦东区'>浦东区</option><option value='徐汇区'>徐汇区</option>";
                    break;
                }
            }


        </script>
    </body>
</html>

2 . 焦点相关事件:
包括onfocus(处理得到焦点事件)和onblur(处理失去焦点事件).意思是当鼠标点击文本框里面时,样式会发生变化.把鼠标不点在文本框里面时,文本框的样式又会发生变化.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>

        <div style="background-color:#ff00ffff; width: 300px; height: 300px;"></div>
        <!--测试onfocus和onblur事件-->
    <form action="#" method="get">
        <!--  this代指当前对象-->
        用户名：<input type="text" name="username" onfocus="getFocus(this)" onblur="getBlur(this)"/><br>
        密码：<input type="password" name="password" onfocus="getFocus(this)" onblur="getBlur(this)"/><br>

        <input type="submit" value="登录"/>
    </form> 


    <script>
        /*处理得到焦点事件*/
        function  getFocus(input1){

            input1.style.border="1px solid red";
            //去掉默认的焦点样式
            input1.style.outline="none";
            /*#000000 黑色   #ffffff 白色   透明度 00全透 ff不透

               #00  00   00   00 
                透明度  红色  绿色   蓝色     google , 360  设置完透明度直接颜色没了(不显示)
                * */
              input1.style.backgroundColor="#00ffff";
        }

        /*处理失去焦点事件*/
        function  getBlur(input1){
            input1.style.border="1px solid gray";
        }

    </script>
    </body>
</html>

总结:this表示当前的控件对象.

3 . 鼠标移入移除事件:意思是指当鼠标移入或者移除某个区域时,这个区域的样式会发生改变.
onmouseover：
onmouserout：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!--
            鼠标移入移除事件：
            onmouseover：
            onmouserout：
        -->
        <div id="div">
        </div>

        <script>
            /*1.查找控件*/
            var div = document.getElementById("div");
            div.onmouseover=function(){
                div.style.backgroundColor="green";
            }
            div.onmouseout=function(){
                div.style.backgroundColor="yellow";
            }


        </script>
    </body>
</html>

4 .页面跳转事件,两种方式:
4.1 window.open(“https://www.baidu.com/“)
4.2 window.location.href=”https://www.baidu.com/”;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>

            /*window.open("https://www.baidu.com/");*/ /*相当于a标签的target是_blank*/
            window.location.href="https://www.baidu.com/";  /*相当于a标签的target是_self*/

        </script>
    </head>
    <body>
    </body>
</html>

5 .阻止冒泡事件:意思是在一个div的上层还有一层范围小的div,当点击每个div时,会alert.但是当点击小的div时,下层的div也会触发事件进行alert.但是现在的需求点击上层的div,不让下层的div发生事件.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 300px;
                height: 300px;
                background-color: red;
            }
            #div2{
                width: 150px;
                height: 150px;
                background-color: green;
            }
        </style>
    </head>

    <body>
        /*事件传递(事件冒泡)：由上层向下层传递

         冒泡：Bubble
         */
        <div id="div1">
            <div id="div2">

            </div>

        </div>

     <script>
        /*查找元素*/
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");

        div1.onclick=function(){
            alert("红色");
        }
        div2.onclick=function(event){
            alert("绿色"+event);
            if(event){
                /*浏览器内置了event对象直接调用其中函数阻止冒泡行为*/
                event.stopPropagation();

            }else{
                /*浏览器没有内置了event对象, window.event.调用方法*/
                window.event.cancelBubble=false;
            }
        }
     </script>
    </body>

</html>