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" οnclick="alert('xxx')"/> |
(2)將事件內嵌到html中而響應行為用函數進行封裝
| Code: |
| <input type="button" value="button" οnclick="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" οnclick="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" οnclick="fn(event)">點擊我吧</a> <a href="demo11.html" οnclick="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 οnclick="fn1()" style="width:100px;height:100px;background-color: green;padding: 50px;"> <div οnclick="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> |
? ?
轉載于:https://www.cnblogs.com/YuTaiYin/p/6721188.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
- 上一篇： 计算机网络总结之计算机概述
- 下一篇： u盘在c盘找不到文件怎么办 U盘文件不见