感謝：鏈接（視頻講解很詳細）
JavaScript觸發器
一、功能
顧名思義就是操控鼠標或鍵盤觸發（實現）一些特定功能。
二、功能實現
<script type="text/javascript">
var changeColor=function () {
document.body.style.backgroundColor='purple';
}
document.body.οnclick=changeColor;
document.body.addEventListener('click',changeColor);
//上面兩個操作都是實現點擊html的body區域會調用函數，但有區別，下面會講解
</script>
三、兩種實現方式的區別
方法一：
<script type="text/javascript">
var changeColor=function() {
document.body.style.backgroundColor='purple';
}
var changeFount=function(){
document.body.style.fontSize='5px';
document.body.style.color='green';
}
document.body.οnclick=changeColor;
document.body.οnclick=changeFount;
</script>
運行截圖：（可以看到，多個操作同時作用在body中僅實現了最後的一個操作，即只修改了文字大小）
方法二：
<script type="text/javascript">
var changeColor=function() {
document.body.style.backgroundColor='purple';
}
var changeFount=function(){
document.body.style.fontSize='5px';
document.body.style.color='green';
}
document.body.addEventListener('click',changeColor);
document.body.addEventListener('click',changeFount);
///區別第一種操作
</script>
運行截圖：（多個操作都實現了，即改變了背景顏色又修改了字體大小）
總結：多個onclick同時作用在一個對象時，只會實現最後的一個，但addElementListener會依次實現每一個操作。
二、具體常用事件分類
（圖源上面視頻鏈接，通過比較上面的兩種實現方法，主要選用第二種實現）
1、鼠標事件（代碼中註釋描述很清晰，不再截運行圖）
<script type="text/javascript">
var al=function(){ //彈窗函數
alert('nihao');
}
document.body.addEventListener('click',al); //鼠標點擊body區域彈窗
document.body.addEventListener('mousedown',al);//鼠標按下左鍵彈窗
document.body.addEventListener('mouseup',al);//鼠標鬆開左鍵彈窗
document.body.addEventListener('mousewheel',al);//鼠標滾動滾輪彈窗
document.body.addEventListener('mousemove',al); //鼠標移動彈窗
document.body.addEventListener('mouseenter',al); //鼠標指針滑入body區域彈窗
document.body.addEventListener('mouseleave',al); //鼠標指針滑出body區域彈窗
</script>
2、鍵盤事件(一般要在document下，而不是其它對象下實現)
//注意時document. 和上面不同
<script type="text/javascript">
var al=function(){ //彈窗函數
alert('nihao');
}
document.addEventListener('keypress',al); //按一下按鍵彈窗
document.addEventListener('keydown',al); //按下按鍵彈窗
document.addEventListener('keyup',al); //鬆開按鍵彈窗
</script>
3、表單事件
<script type="text/javascript">
var condition=function(){ //函數
console.log('點擊了文本框');
}
var inp0=document.getElementById('i0');
inp0.addEventListener('focus',condition);//點擊輸入框內部時調用函數
//inp0.addEventListener('blur',condition);//從輸入框中脫離時（點擊輸入框外面時）調用函數
//inp0.addEventListener('input',condition);//在輸入框中輸入時調用函數
</script>
運行截圖：（用到了Chrome的console調試臺，不懂的看：鏈接）
4、頁面事件
解決：上面學習了鍵盤事件，可怎麼知道按的是什麼鍵？
①先從調控臺看下result中是什麼
<script type="text/javascript">
var condition=function(result){ //彈窗函數
console.log(result);
}
document.addEventListener('keypress',condition);
</script>
運行截圖：（其實我按的就是p）
②所以進一步修改代碼：
<script type="text/javascript">
var condition=function(result){ //彈窗函數
console.log(result.key); //因爲p被放在key這個鍵裏面了，所以訪問它就行了
}
document.addEventListener('keypress',condition);
</script>
運行截圖：（這樣就實現了）
文中哪裏有錯誤請聯繫我。