js中 關於DOM的事件操作
一、JavaScript的組成
JavaScript基礎分為三個部分：
-
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
-
DOM：文檔對象模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
-
BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
二、事件
JS是以事件驅動為核心的一門語言。
事件的三要素
事件的三要素：事件源、事件、事件驅動程序。
比如，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。
再比如，網頁上彈出一個廣告，我點擊右上角的X
X。事件是：onclick。事件驅動程序是：廣告關閉了。
於是可以總結出：誰引發的後續事件，誰就是事件源。
總結如下：
-
事件源：引發後續事件的html標簽。
-
事件：js已經定義好了（見下圖）。
-
事件驅動程序：對樣式和html的操作。也就是DOM。
代碼書寫步驟如下：（重要）
-
（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
-
（3）書寫事件驅動程序：關於DOM的操作
代碼舉例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、獲取事件源
var div = document.getElementById("box1");
// 2、綁定事件
div.onclick = function () {
// 3、書寫事件驅動程序
alert("我是彈出的內容");
}
</script>
</body>常見事件如下：
下面針對這事件的三要素，進行分別介紹。
1、獲取事件源的方式（DOM節點的獲取）
獲取事件源的常見方式如下：
var div1 = document.getElementById("box1"); //方式一：通過id獲取單個標簽 var arr1 = document.getElementsByTagName("div1"); //方式二：通過 標簽名 獲得 標簽數組，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通過 類名 獲得 標簽數組，所以有s
2、綁定事件的方式
方式一：直接綁定匿名函數
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第一種方式
div1.onclick = function () {
alert("我是彈出的內容");
}
</script>
方式二：先單獨定義函數，再綁定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第二種方式
div1.onclick = fn; //註意，這裏是fn，不是fn()。fn()指的是返回值。
//單獨定義函數
function fn() {
alert("我是彈出的內容");
}
</script>
註意上方代碼的註釋。綁定的時候，是寫fn，不是寫fn()。fn代表的是整個函數，而fn()代表的是返回值。
方式三：行內綁定
<!--行內綁定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是彈出的內容");
}
</script>
註意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。因為綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。
3、事件驅動程序
我們在上面是拿alert舉例，不僅如此，我們還可以操作標簽的屬性和樣式。舉例如下：
<style> #box { width: 100px; height: 100px; background-color: pink; cursor: pointer; } </style> </head> <body> <div id="box" ></div> <script type="text/javascript"> var oDiv = document.getElementById("box"); //點擊鼠標時，原本粉色的div變大了，背景變紅了 oDiv.onclick = function () { oDiv.style.width = "200px"; //屬性值要寫引號 oDiv.style.height = "200px"; oDiv.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color } </script>
上方代碼的註意事項：
- 在js裏寫屬性值時，要用引號
- 在js裏寫屬性名時，是
backgroundColor，不是CSS裏面的background-Color。記得所有的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峰
onload事件
當頁面加載（文本和圖片）完畢的時候，觸發onload事件。
舉例：
<script type="text/javascript"> window.onload = function () { console.log("小馬哥"); //等頁面加載完畢時，打印字符串 } </script>
有一點我們要知道：js的加載是和html同步加載的。因此，如果使用元素在定義元素之前，容易報錯。這個時候，onload事件就能派上用場了，我們可以把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。
建議是：整個頁面上所有元素加載完畢在執行js內容。所以，window.onload可以預防使用標簽在定義標簽之前。
js中 關於DOM的事件操作