js的一些相关事件

来源：互联网发布：睡眠面膜知乎编辑：程序博客网时间：2024/06/06 17:36

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>

总结:event对象是点击有效区域时,如果浏览器有内置的event对象,会直接调用stopPropagation();如果浏览器没有内置的event对象,会调用系统的window.event.cancelBubble,如果设为false的话,会阻止事件传递.

阅读全文

0 0