js監聽事件

時間 2019-11-13

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border: 1px solid darkgrey;
width: 600px;
height: 300px;

}
tr td{
border: 1px solid saddlebrown;
text-align: center;
}
.Lighheight{
background-color: seashell;
}
</style>
<script>
/*1.首先分析怎麼設置高亮
* 當鼠標移進一個tr內時，就將該tr的顯示亮度（樣式）改變，移出後又將亮度恢復回來（回到原來樣式）
*
* 但出現一個問題：就是鼠標移進的時候對該tr設置了一個樣式，當鼠標移出後有設置了一個樣式，那文檔到底顯示的是那個樣式呢？
* 答案是同一元素上設置多種樣式，後面的樣式會覆蓋前面的樣式
*
*2.因此針對上面的問題咱們能夠設置一個事件監聽，知足狀況一咱們執行一個樣式，知足狀況二咱們執行另一種樣式
* 接着一塊兒來學習下事件監聽
* Objet.addEventListener(eventName,function,false)
* Objet要綁定監聽的元素
* addEventListener事件監聽函數名(固定的函數名)
* eventName 事件名（就如鼠標移進，鼠標移出事件）
* function 函數名（要執行的函數）
* false 是否捕獲（通常設爲false）有興趣的瞭解一些dom事件模型，冒泡模型，捕獲模型，就知道爲何設false而不設ture
*
* 3.上面進行大體的分析和學習，接下來咱們分析下下面的代碼
*
* */
window.onload = function(){ //當dom文檔樹所有加載完畢後（注意一點ready是dom樹構建完成後就加載，不等圖片下載）執行匿名函數function
var tr = document.getElementsByTagName("tr"); //注意getElementsByTagName與getElementsByName的區別，前者是獲取標籤名後者是獲取屬性名
for (i=0;i<tr.length;i++) {
tr[i].addEventListener("mouseenter",function(event){
event.target.className = "Lighheight"; //target表示返回觸發事件的對象，event表示事件的狀態

},false);
tr[i].addEventListener("mouseleave",function(event){ //mouseleave與mouseout 二者都表示離開就觸發後者離開選擇元素和其子元素都會觸發，前者只在離開選擇元素時纔會觸發
event.target.className ="";
},false);
}
};

</script>
</head>
<body>
<table>
<tr >
<td>姓名</td>
<td>地點</td>
<td>描述</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</body>
</html>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。