document事件及例子
生活随笔
收集整理的這篇文章主要介紹了
document事件及例子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、關于鼠標事件：onclick：鼠標單擊觸發
? ? ? ? ? ? ? ? ? ondbclick:鼠標雙擊觸發
? ? ? ? ? ? ? ? ? onmouseover：鼠標移上觸發
? ? ? ? ? ? ? ? ? onmouseout：鼠標離開觸發
? ? ? ? ? ? ? ? ? onmousemove：鼠標移動觸發
二、關于鍵盤事件：onkeydown：鍵盤按下瞬間觸發
? ? ? ? ? ? ? ? ? onkeyup：按鍵抬起觸發
? ? ? ? ? ? ? ? ? onkeypress：按鍵觸發
三、關于表單事件：onfocus獲得焦點時觸發
? ? ? ? ? ? ? ? ? onblur：失去焦點時觸發
? ? ? ? ? ? ? ? ? onchange：內容改變時觸發在下拉列表中作為選中值變化觸發
事件可以寫在標簽中也可寫在js中?
eg：var a=document.getElementById("anniu");
a.οnclick=function(){
匿名函數
}；在js中不支持給多個元素加事件
this代表該元素本身
例子：注意：backgroundColor中的color首字母不大寫，無法實現
<!--選中一個背景顏色變，其他不變--> <div id="a"> <div class="item" οnclick="sel(this)"></div> <div class="item" οnclick="sel(this)"></div> <div class="item" οnclick="sel(this)"></div> <div class="item" οnclick="sel(this)"></div> <div class="item" οnclick="sel(this)"></div> <div class="item" οnclick="sel(this)"></div> <div class="item" οnclick="sel(this)"></div> </div> </body> <script type="text/javascript"> function sel(a){var sy=document.getElementsByClassName("item");for(var i=0;i<sy.length;i++){sy[i].style.backgroundColor="blue";}a.style.backgroundColor="red";} </script> <style type="text/css"> *{ margin:0px auto; padding:0px;} #aa{width:280px;height:40px;border:1px solid #C33;margin-top:100px;line-height:40px;vertical-align:central;padding-left:20px;} #bb{width:300px;height:200px;border:1px solid #C33;} .list{width:280px;height:39px;border-bottom:1px solid #C33;line-height:40px;vertical-align:central;padding-left:20px;} </style> </head><body> <div id="aa" ></div> <div id="bb" style="display:none"> <div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)" >濟南</div> <div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">淄博</div> <div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">青島</div> <div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">濰坊</div> <div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">煙臺</div> </div> </body> <script type="text/javascript"> function xz(a){var sy=document.getElementsByClassName("list");for(var i=0;i<sy.length;i++){sy[i].style.backgroundColor="white";sy[i].style.color="black";}a.style.backgroundColor="blue";a.style.color="white";}var aa=document.getElementById("aa");aa.onclick=function (){var c=document.getElementById("bb");if(c.style.display=="none"){c.style.display="block";}else{c.style.display="block";}}function sel(a){document.getElementById("bb").style.display="none";document.getElementById("aa").innerText=a.innerText;} </script>轉載于:https://www.cnblogs.com/NCL--/p/7056709.html
總結
以上是生活随笔為你收集整理的document事件及例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 慢吞吞的pip切换源
- 下一篇： Paxos Made Simple（译）