Js中的事件
事件
事件源
事件行为
1、js中常用的事件
onclick 鼠标点击某个对象
onchange 用户改变域的内容
|
Code：省市联动 |
|
<body> <select id="city"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="sh">上海</option> </select> <select id="area"> <option>海淀</option> <option>朝阳</option> <option>东城</option> </select> </body> <script type="text/javascript"> var select = document.getElementById("city"); select.onchange = function(){ var optionVal = select.value; switch(optionVal){ case 'bj': var area = document.getElementById("area"); area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>"; break; case 'tj': var area = document.getElementById("area"); area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>"; break; case 'sh': var area = document.getElementById("area"); area.innerHTML = "<option>浦东</option><option>杨浦</option>"; break; default: alert("error"); } }; </script> |
onfocus 元素获得焦点
onblur 元素失去焦点
|
Code：当获得焦点的时候，提示输入的内容格式， 当失去焦点的时候，提示输入有误 |
|
<body>
<label for="txt">name</label> <input id="txt" type="text" /><span id="action"></span>
</body>
<script type="text/javascript"> var txt = document.getElementById("txt"); txt.onfocus = function(){ //友好提示 var span = document.getElementById("action"); span.innerHTML = "用户名格式最小8位"; span.style.color = "green"; }; txt.onblur = function(){ //错误提示 var span = document.getElementById("action"); span.innerHTML = "对不起 格式不正确"; span.style.color = "red"; }; </script> |
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
|
Code:div元素 鼠标移入变为绿色 移出恢复原色 |
|
<style type="text/css"> #d1{background-color: red;width:200px;height: 200px;} </style> </head> <body> <div id="d1"></div> </body> <script type="text/javascript"> var div = document.getElementById("d1"); div.onmouseover = function(){ this.style.backgroundColor = "green"; }; div.onmouseout = function(){ this.style.backgroundColor = "red"; }; </script> |
onload 某个页面或图像被完成加载
|
Code:等到页面加载完毕在执行onload事件所指向的函数 |
|
<script type="text/javascript"> window.onload = function(){ var span = document.getElementById("span"); //alert(span); span.innerHTML = "hello js"; }; </script> </head> <body> <span id="span"></span> </body> |
2、事件的绑定方式
(1)将事件和响应行为都内嵌到html标签中
|
Code: |
|
<input type="button" value="button" onclick="alert('xxx')"/> |
(2)将事件内嵌到html中而响应行为用函数进行封装
|
Code: |
|
<input type="button" value="button" onclick="fn()" /> <script type="text/javascript"> function fn(){ alert("yyy"); } </script> |
(3)将事件和响应行为 与html标签完全分离
|
Code: |
|
<input id="btn" type="button" value="button"/> <script type="text/javascript"> var btn = document.getElementById("btn"); btn.onclick = function(){ alert("zzz"); }; </script> |
this关键字
this经过事件的函数进行传递的是html标签对象
|
Code： |
|
<body> <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/> </body>
<script type="text/javascript"> function fn(obj){ alert(obj.name); } </script> |
阻止事件的默认行为
IE：window.event.returnValue = false;
W3c: 传递过来的事件对象.stopPropagation();
|
Code： |
|
<body> <a href="demo11.html" onclick="fn(event)">点击我吧</a> <a href="demo11.html" onclick="return false">点击我吧</a> </body> <script type="text/javascript">
function fn(e){ //ie：window.event.returnValue = false; //W3c：传递过来的事件对象.preventDefault(); //W3c标准 if(e&&e.preventDefault){ alert("w3c"); e.preventDefault(); //IE标签 }else{ alert("ie"); window.event.returnValue = false; } } </script> |
阻止事件的传播
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
|
Code： |
|
<body> <div onclick="fn1()" style="width:100px;height:100px;background-color: green;padding: 50px;"> <div onclick="fn2(event)" style="width:100px;height:100px;background-color: red;">xxxx</div> </div> </body> <script type="text/javascript"> function fn1(){ alert("fn1"); } function fn2(e){ alert("fn2"); //阻止事件的传播 if(e&&e.stopPropagation){ alert("w3c"); e.stopPropagation(); //IE标签 }else{ alert("ie"); window.event.cancelBubble = true; } } </script> |
