document事件及例子
阿新 • • 發佈：2017-06-21
-1 tel cli wid script chang mil out back
一、關於鼠標事件：onclick：鼠標單擊觸發
ondbclick:鼠標雙擊觸發
onmouseover：鼠標移上觸發
onmouseout：鼠標離開觸發
onmousemove：鼠標移動觸發
二、關於鍵盤事件：onkeydown：鍵盤按下瞬間觸發
onkeyup：按鍵擡起觸發
onkeypress：按鍵觸發
三、關於表單事件：onfocus獲得焦點時觸發
onblur：失去焦點時觸發
onchange：內容改變時觸發在下拉列表中作為選中值變化觸發
事件可以寫在標簽中也可寫在js中
eg：var a=document.getElementById("anniu");
a.onclick=function(){
匿名函數
}；在js中不支持給多個元素加事件
this代表該元素本身
例子：註意：backgroundColor中的color首字母不大寫，無法實現
<!--選中一個背景顏色變，其他不變--> <div id="a"> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="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" onmouseover="xz(this)" onclick="sel(this)" >濟南</div> <div class="list" onmouseover="xz(this)" onclick="sel(this)">淄博</div> <div class="list" onmouseover="xz(this)" onclick="sel(this)">青島</div> <div class="list" onmouseover="xz(this)" onclick="sel(this)">濰坊</div> <div class="list" onmouseover="xz(this)" onclick="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>
document事件及例子