事件
事件：觸發-響應機制。
事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
事件三要素
-
事件源:觸發(被)事件的元素
-
事件名稱: click 點擊事件
-
事件處理程序:事件觸發后要執行的代碼(函數形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代碼會在box被點擊后執行');
};
案例
-
點擊按鈕彈出提示框
-
點擊按鈕切換圖片
事件詳解
HTML事件
直接在HTML元素標簽內添加事件，來執行腳本。
DOM0級事件
如果要給多個元素綁定事件，采用HTML的方式綁定，每個元素都要在標簽內寫好綁定事件，這樣十分麻煩，也不利於維護，因此我們可以通過DOM0級事件的方式來為元素綁定事件，先獲取DOM元素，再在元素上綁定事件。
注意！調用時，函數名后面不要加括號！如果加了括號，事件被觸發前就執行。
案例
根據效果圖，實現以下功能：
（1）當點擊“錄入”按鈕時，循環彈出“請輸入員工姓名”的輸入框，每次錄入一個員工的姓名。
（2）直到用戶輸入-1時，才停止彈出輸入框，然后將用戶輸入的信息輸出在頁面上。
效果圖如下：
思路
一系列代碼需要在entryFn（）方法中進行編寫：
（1） 定義一個新數組，保存用戶輸入的所有信息，var arr=new Array();
（2） 定義一個變量，接收用戶每一次輸入的信息，var input;
（3） 使用while循環，循環彈出輸入框，直到用戶輸入-1，則停止彈出；同時，需要把彈出框中獲取到的內容放到第一步定義的數組中。
（4） 用戶在輸入框中輸入的每一個信息，都被放進了新建的數組中，除了結束符-1，所以需要去除數組的最后一項，運用arr.pop();方法去除。
（5） 使用for循環，將用戶輸入的信息依次顯示在頁面中，注意i要+1，因為下表是從0開始的：
我的代碼
鼠標事件
onload
onload 事件會在頁面或圖像加載完成后立即發生。
案例
補充下面的代碼，實現以下功能：
（1） 當點擊按鈕時，按鈕的字體顏色變成紅色
（2） 當鼠標離開按鈕時，字體顏色變成灰色
注意，把js腳本寫在<head>標簽中。
效果圖如下：
思路
第一步：定義onload方法，並把所有的js代碼放到onload方法中。
第二步：通過元素獲取dom對象的方式獲取到按鈕元素
第三步：按鈕綁定點擊事件，當點擊按鈕時，按鈕的字體顏色變為紅色
第四步：按鈕再綁定鼠標離開事件，當鼠標離開按鈕時，按鈕的字體顏色變為灰色
我的代碼
onfocus &onblur
編程練習
根據效果圖，補充代碼，實現下列功能：
（1）當輸入框獲得焦點：
如果輸入框值為空，提示“請輸入您的姓名”
（2）當輸入框失去焦點：
如果輸入框值為空，提示“用戶名不能為空”，並且邊框顏色變為紅色
如果輸入框值不為空，那么沒有提示文字，邊框顏色是默認顏色
效果圖如下：
思路
根據gif效果圖完成下列步驟：
第一步：通過元素名獲取dom對象的方式，得到輸入框對象以及放置提示文字的元素對象，並用變量進行接收
第二步：給輸入框綁定獲得焦點事件，當輸入框獲得焦點時，判斷：
如果值為空，輸入框后出現提示文字“請輸入您的姓名”
第三步：給輸入框綁定失去焦點事件，當輸入框獲得焦點時，判斷：
（1）如果值為空，輸入框后出現提示文字“用戶名不能為空”，並且將樣式表中的邊框樣式添加給輸入框
（2）如果值不為空，輸入框后的提示文字消失，之前加上的樣式也要去掉
Tips：
（1） 在第三步的判斷中，如果值為空，給輸入框加上顏色，那么當我們輸入框獲取焦點時，要將邊框樣式恢復默認樣式
（2）用設置元素的class屬性這個方法給輸入框加樣式，用到的是className屬性給class添加值，比如this.className="red";
我的代碼
onchange
給菜單綁定change事件,一般作用於select或checkbox或radio。
編程練習
根據效果圖，補充代碼，使用onchange事件實現下列功能：
（1）選擇下拉列表中不同的選項，頁面中的div就設置成不同的背景顏色，div中的內容也發生變化。 比如：選擇黃色選項，div的背景顏色就變為黃色，文本內容就變為“我的背景顏色變成了yellow色”
（2）當選擇下拉列表中的“請選擇”時，div的背景顏色變成白色，文本變為“我沒有發生任何變化”
效果圖如下：
思路
第一步：定義onload事件，所有的js代碼都放到onload方法中。
第二步： 通過id獲取元素的方式得到下拉列表對象和div元素對象
第三步： 給下拉列表綁定選項發生變化時觸發的事件（onchange事件），在事件中需要判斷：
（1）如果下拉列表的value值是0時，div的背景顏色設置為白色，文本內容設置為“我沒有發生任何變化”
（2）div的背景顏色與下拉列表的value值一致，文本內容隨之變化為：“我的背景顏色變成了…”，注意這里需要拼接字符串。
我的代碼
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>onchange()</title> 6 <style type="text/css"> 7 #div{ 8 width:300px; 9 height:300px; 10 border:2px solid gray; 11 margin:100px 0 0 200px; 12 } 13 </style> 14 <script type="text/javascript"> 15 //補充代碼 16 window.onload=function(){ 17 var select = document.getElementById("color"); 18 var div = document.getElementById("div"); 19 select.onchange=function(){ 20 if(this.value == 0){ 21 div.innerHTML="我沒發生任何變化"; 22 div.style.background="white"; 23 }else{ 24 div.innerHTML="我的背景顏色變成了"+this.value+"色"; 25 div.style.background=this.value; 26 } 27 } 28 } 29 </script> 30 </head> 31 <body> 32 <div> 33 <span>請選擇您喜歡的顏色:</span> 34 <select id="color"> 35 <option value="0">請選擇</option> 36 <option value="yellow">黃色</option> 37 <option value="orange">橘色</option> 38 <option value="pink">粉色</option> 39 <option value="purple">紫色</option> 40 </select> 41 </div> 42 <div id="div">我是div</div> 43 </body> 44 </html> 45
onsubmit
表單中的確認按鈕被點擊時發生。
onmousedown & onmousemove & onmouseup
鼠標按下 & 鼠標移動 & 鼠標按下后松開
常用於拖動元素時綁定事件。
onresize
調整瀏覽器窗口大小時觸發
onscroll
拖動滾動條時觸發（瀏覽器窗口或某個元素的滾動條）
編程練習
根據下面的效果演示，補充代碼，實現下列功能：
（1） 當鼠標在帶滾動條的文本框上滑動時，字體顏色變成紅色
（2） 當鼠標移出帶滾動條的文本框時，字體顏色變成綠色
（3） 當鼠標移動文本框的滾動條時，空白的文本框出現文本“內容滾動了”
思路
第一步：通過id選取元素的方式分別獲取這兩個文本框
第二步：給帶滾動條的文本框綁定事件
（1）綁定拖動滾動條時觸發的事件，當滾動條被拖動時，空白文本框出現文本“內容滾動了”
（2）綁定鼠標移動時觸發的事件，當鼠標在帶滾動條的文本框上移動時，帶滾動條的文本框字體顏色變為紅色
（3）綁定鼠標離開時觸發的事件，當鼠標在離開帶滾動條的文本框時，帶滾動條的文本框字體顏色變為綠色
我的代碼
鍵盤事件與keycode屬性
編程練習
根據效果圖，補充下面的代碼，
實現：
（1）在文本域中輸入文本，文本域的字數限制在30個字以內。
（2）每當用戶輸入一個字，就要提示還能輸入多少個字
（3）當用戶輸入的文本超出了30個字時，要提示用戶超出了多少字
思路
第一步：獲取到文本域對象、字數變化元素、字數超過限制提示標簽
第二步：自定義一個變量，接收可輸入的總字數（30）
第三步：給文本域綁定按鍵被松開時的事件，后跟匿名函數，以下步驟均在函數中
第四步：自定義變量，用於接收按鍵每松開一次獲取一次文本域的值的長度
第五步：自定義變量，用於接收可輸入的字體個數，b標簽中的文本內容設置為該變量
第六步：判斷，如果可輸入的字數小於0，span標簽的內容要設置為“已超出多少字”
我的代碼
注意：獲取文本框中文本用value而不是innerHTML·····
關於this指向
在事件觸發的函數中，this是對該DOM對象的引用。
注冊/移除事件的三種方式
var box = document.getElementById('box');
box.onclick = function () {
console.log('點擊后執行');
};
box.onclick = null;
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
console.log('點擊后執行');
}
兼容代碼
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on' + type] = fn;
}
}
function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}
事件的三個階段
-
捕獲階段
-
當前目標階段
-
冒泡階段
事件對象.eventPhase屬性可以查看事件觸發時所處的階段
事件對象的屬性和方法
-
event.type 獲取事件類型
-
clientX/clientY 所有瀏覽器都支持，窗口位置
-
pageX/pageY IE8以前不支持，頁面位置
-
event.target || event.srcElement 用於獲取觸發事件的元素
-
event.preventDefault() 取消默認行為
案例
-
跟着鼠標飛的天使
-
鼠標點哪圖片飛到哪里
-
獲取鼠標在div內的坐標
阻止事件傳播的方式
-
標准方式 event.stopPropagation();
-
IE低版本 event.cancelBubble = true; 標准中已廢棄