本文內容：
- 函數
- 函數的定義方式
- 函數的調用方式
- 函數的參數
- 匿名函數
- 函數中的this
- 事件
- 常見事件
- 綁定事件
首發日期：2018-05-11
函數：
函數的定義方式：
- 函數可以有參數，參數為局部變量，無需要var修飾：
- 函數可以有返回值：
- 函數可以有參數，參數為局部變量，無需要var修飾：
函數的調用方式：除了自執行函數，其他函數都要手動調用
- 手動調用，利用各種組件【按鈕、圖片、輸入框等等，理論上所有都能觸發】來執行【理論上，手動調用的函數都是可以認為是事件觸發，所以可以說調用函數就是觸發事件】：
- 通過點擊事件來調用函數：
- 其他【各種事件都可以拿來調用函數】。。。
- 通過點擊事件來調用函數：
- 自執行函數：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <script> function f1(){ return document.getElementById('i1').value; } function f2(msg){ alert(msg); } (function f3(){ alert("hello") })(); </script> </head> <body> <input id='i1' type="button" value="點擊" onclick="f2(f1())"> <!-- 自執行函數在上面時，如果是堵塞型的函數（比如alert），那么會影響下面的內容出現 --> 123 </body> </html>
- 函數里面也能夠調用其他函數。
函數的參數：
- 函數可以有參數，參數為局部變量，無需要var修飾
- 當函數有參數時，調用函數需要提供足夠的參數。
匿名函數：
- 如果定義沒有函數名的函數，那么這個函數可以稱為匿名函數。
- 匿名函數由於是匿名的，所以只能一次使用【類似局部變量，只在某一段代碼中生效以及可使用；但如果你使用了一個變量來存儲這個匿名函數，那么就可以在這段代碼中多次復用了。】
函數中的this:
- 函數中的this指示調用當前函數的對象，比如如果是在div標簽上觸發的事件，那么this就指代當前觸發觸發事件的div標簽。【經常使用this來操作觸發事件的標簽。】
補充：
- 還有一種可以動態定義函數的方法。
事件：
常見事件：
- onclick ：鼠標點擊事件
- ondblclick ：鼠標雙擊事件
- onmouseover ：鼠標移到標簽上事件
- onmouseout ：鼠標移出標簽事件
- onsubmit ：提交事件【可以用來提交表單】
- onfocus:標簽獲得焦點事件
- onload:頁面完成加載事件 【可以直接不使用前綴的綁定（onload="觸發函數"）
，也可以綁定到body中作為屬性
。】 - onselect ：文本被選中事件
- ....其他
綁定事件：理論上標簽能綁定各種事件
- 在標簽中使用屬性 onXXX=函數名(參數列表) 綁定【onXXX 為事件名稱】：
- 在js代碼中使用 對象.事件名 綁定
- 在js代碼中使用addEventListener(事件名,觸發函數[,事件捕獲方式])【這里的事件名會比上面的少去on】【這種方式是事件監聽機制，可以監聽多個事件】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <input id='i1' type="button" value="點擊" onclick="alert('hello')"><!-- 第一種 --> <input id='i2' type="button" value="點擊2" > <input id='i3' type="button" value="點擊3" > <script> function f2(){ alert("hello2"); } document.getElementById("i2").onclick=f2; //第二種 document.getElementById("i3").addEventListener("click", f2);//第三種 </script> </body> </html>
補充：
- 還有attachEvent()可以監聽事件
- 注意：上面的后兩種綁定事件發生在“標簽出現之后”，所以應該把script標簽寫在body標簽里面的最后面。