一、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可以預防使用標簽在定義標簽之前。
事件案例
1、京東頂部廣告欄關閉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } .top-banner{ /*position: relative;*/ background-color: rgb(230, 15, 82); } .top-banner .w{ width: 1190px; position: relative; margin: 0 auto; } .top-banner .banner{ display: block; width: 100%; height: 80px; background: url('./close.jpg') no-repeat center 0; } .top-banner .close{ position: absolute; right: 0; top:0; text-decoration: none; color: white; width: 20px; height: 20px; line-height: 20px; text-align: center; } .hide{ display: none; } </style> </head> <body> <div class="top-banner" id="topBanner"> <div class="w"> <a href="#" class="banner"></a> <a href="#" class="close" id="closeBanner">x</a> </div> </div> <script type="text/javascript"> // /需求：點擊案例，隱藏盒子。 //思路：點擊a鏈接，讓top-banner這個盒子隱藏起來（加隱藏類名）。 window.onload = function(){ // /1.獲取事件源和相關元素 var closeBanner = document.getElementById('closeBanner'); var topBanner = document.getElementById('topBanner'); //2.綁定事件 closeBanner.onclick = function(){ //3.書寫事件驅動程序 //類控制 //topBanner.className += ' hide';//保留原類名，添加新類名 //topBanner.className = 'hide'; //替換舊類名 topBanner.style.display = 'none'; } } </script> </body> </html>
2.要求實現效果：當鼠標懸停在img上時，更換為另外一張圖片；鼠標離開時，還原為本來的圖片。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> //window.onload頁面加載完畢以后再執行此代碼 window.onload = function () { //需求：鼠標放到img上，更換為另一張圖片，也就是修改路徑（src的值）。 //步驟： //1.獲取事件源 //2.綁定事件 //3.書寫事件驅動程序 //1.獲取事件源 var img = document.getElementById("box"); //2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件) img.onmouseover = function () { //3.書寫事件驅動程序(修改src) img.src = "image/jd2.png"; // this.src = "image/jd2.png"; } //1.獲取事件源 var img = document.getElementById("box"); //2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件) img.onmouseout = function () { //3.書寫事件驅動程序(修改src) img.src = "image/jd1.png"; } } </script> </head> <body> <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/> </body> </html>