JavaScript - 常用事件總結
阿新 • • 發佈：2018-11-09
目錄
1-1 取消冒泡事件的方式一：子級內部設定stopPropagation()
1-2 取消冒泡事件的方式二：子級內部設定.cancelBubble = true;
2、預設事件的兩種取消方式：preventDefault()，return false;
一、事件的兩種繫結方式
1、on事件繫結方式
var div = document.querySelector('.div'); // on事件 div.onclick = function () { console.log("點選1"); } div.onclick = function () { console.log("點選2"); } // 只打印"點選2",原因：只能繫結最後一個方法 // 事件的移除 div.onclick = null;2、非on事件繫結方式
// 非on事件的繫結 // addEventListener('事件名', 回撥函式, 冒泡方式) //注意：回撥函式存在匿名和非匿名兩種繫結形式。 document.addEventListener('click', function() { console.log("點選1"); }) document.addEventListener('click', function() { console.log("點選2"); }) // 非on事件可以同時繫結多個方法，被繫結的方法依次被執行 // addEventListener第三個引數(true|false)決定冒泡的方式 function fn () {} document.addEventListener('click', fn); // 事件的移除 document.removeEventListener('click', fn); // 注:繫結與移除需要指向同一個方法(地址)，即必須使用非匿名函式進行繫結
二、事件引數event
//存放事件資訊的回撥引數 body.onclick = function (ev) { // 事件的相容 // event = ev | windows.event // ev = ev | event; ev引數呼叫的兩種寫法 //由於考慮到視窗的相容問題，如果寫入event 則呼叫引數需要帶上字首windows.event //如果寫入ev，則呼叫則能省去字首，通常被選擇 // 點選傳過來的是 MouseEvent,儲存著滑鼠觸發事件的一系列資訊 console.log(ev); console.log("body click"); }
三、事件的冒泡與預設事件
1、事件的冒泡：子位於父內部，子觸發，父也一起觸發事件。
<style type="text/css"> .sub { width: 100px; height: 100px; background-color: red; position: absolute; left: 50px; top: 50px; } .sup { width: 200px; height: 200px; background-color: orange; position: relative; /*position: absolute; top: 50px; left: 100px;*/ margin: 50px auto; } body { border: 1px solid black; } </style> <body> <div class="sup"> <div class="sub"></div> </div> </body> <script type="text/javascript"> var sub = document.querySelector('.sub'); var sup = document.querySelector('.sup'); var body = document.querySelector('body'); sub.onclick = function (ev) { console.log("sub click"); } sup.onclick = function (ev) { console.log("sup click"); } body.onclick = function (ev) { console.log(ev); console.log("body click"); } </script>
1-1 取消冒泡事件的方式一：子級內部設定stopPropagation()
sub.onclick = function (ev) { ev.stopPropagation(); console.log("sub click"); } sup.onclick = function (ev) { console.log("sup click"); } body.onclick = function (ev) { console.log(ev); console.log("body click"); }1-2 取消冒泡事件的方式二：子級內部設定.cancelBubble = true;
sub.onclick = function (ev) { ev.cancelBubble = true; console.log("sub click"); } sup.onclick = function (ev) { console.log("sup click"); } body.onclick = function (ev) { console.log(ev); console.log("body click"); }
2、預設事件的兩種取消方式：preventDefault()，return false;
預設事件：瀏覽器自帶的視窗事件，例如如滑鼠右鍵喚出選單
注意：若父級的預設事件被取消，子級的預設事件也會被取消
// 預設事件: 滑鼠右鍵 oncontextmenu sub.oncontextmenu = function (ev) { ev.preventDefault(); console.log("sub menu click"); } body.oncontextmenu = function (ev) { console.log("body menu click"); return false; }
四、滑鼠事件
1.常用滑鼠事件
- onclick：滑鼠點選
- ondblclick：滑鼠雙擊
- onmousedown：滑鼠按下
- onmousemove：滑鼠移動
- onmouseup：滑鼠擡起
- onmouseover：滑鼠懸浮 onmouseenter
- onmouseout：滑鼠移開 onmouseleave
- oncontextmenu：滑鼠右鍵
var div = document.querySelector('.div'); // 雙擊 div.ondblclick = function () { console.log("雙擊了"); } // 滑鼠按下 div.onmousedown = function () { console.log("按下"); } // 滑鼠擡起 div.onmouseup = function () { console.log("擡起"); }2.常用事件引數ev
- ev.clientX：點選點X座標
- ev.clientY：點選點Y座標
- 檢視滑鼠event屬性
document.onclick = function(ev){ console.log(ev) }
// 滑鼠移動 div.onmousemove = function (ev) { // 滑鼠在頁面中的位置 console.log("x的座標:", ev.clientX); console.log("y的座標:", ev.clientY); console.log("移動"); }
五、鍵盤事件
1、鍵盤事件
- onkeydown：鍵盤按下
- onkeyup：鍵盤擡起
2、事件引數ev
- ev.keyCode：按鍵編號
- ev.altKey：alt特殊按鍵
- ev.ctrlKey：ctrl特殊按鍵
- ev.shiftKey：shift特殊按鍵
<head> <meta charset="UTF-8"> <title>鍵盤事件</title> <style type="text/css"> .div { width: 200px; height: 200px; background-color: red; /*margin: 50px auto;*/ position: absolute; top: 0; left: 100px; } </style> </head> <body> <div class="div"></div> </body> <script type="text/javascript"> var div = document.querySelector('.div'); // 操作一般標籤,鍵盤事件繫結給document // 表單標籤(可以錄入文字),鍵盤事件繫結給表單標籤 document.onkeydown = function (ev) { console.log(ev); //檢視鍵盤的所有屬性 // console.log(ev.keyCode); switch(ev.keyCode) { case 37: console.log("左"); div.style.left = div.offsetLeft - 3 + "px"; break; case 38: console.log("上"); div.style.top = div.offsetTop - 3 + "px"; break; case 39: console.log("右"); div.style.left = div.offsetLeft + 3 + "px"; break; case 40: console.log("下"); div.style.top = div.offsetTop + 3 + "px"; break; } } </script>
3、實現鍵盤控制平滑運動
<head> <meta charset="UTF-8"> <title>鍵盤控制平滑運動</title> <style type="text/css"> .div { width: 100px; height: 100px; background-color: red; position: absolute; top: 120px; left: 100px; } </style> </head> <body> <div class="div"></div> </body> <script type="text/javascript"> var div = document.querySelector('.div'); // 能否向左|右|上|下運動 var l_able = false; var t_able = false; var r_able = false; var b_able = false; //定時器，延遲16毫秒執行 setInterval(function () { if (r_able == true) { div.style.left = div.offsetLeft + 3 + 'px'; // 右 } // l_able為假,則後者短路,可以實現if的簡寫 l_able && (div.style.left = div.offsetLeft - 3 + 'px'); // 左 t_able && (div.style.top = div.offsetTop - 3 + 'px'); // 上 b_able && (div.style.top = div.offsetTop + 3 + 'px'); // 下 }, 16); document.onkeydown = function (ev) { switch(ev.keyCode) { case 37: l_able = true; break; case 38: t_able = true; break; case 39: r_able = true; break; case 40: b_able = true; break; } } document.onkeyup = function (ev) { console.log(ev); switch(ev.keyCode) { case 37: l_able = false; break; case 38: t_able = false; break; case 39: r_able = false; break; case 40: b_able = false; break; } } </script>
六、表單事件
- onfocus：獲取焦點
- onblur：失去焦點
- onselect：文字被選中
- oninput：值改變
- onchange：值改變，且需要在失去焦點後才能觸發
- onsubmit：表單預設提交事件
<body> <form action=""> <input type="text" name="usr"> <button type="submit">提交</button> </form> <div></div> </body> <script type="text/javascript"> var form = document.querySelector('form'); var ipt = document.querySelector('input'); var btn = document.querySelector('button'); var div = document.querySelector('div'); ipt.onfocus = function(){ console.log("input 焦點"); } ipt.onblur =function(){ console.log("input 失去焦點"); } ipt.onselect = function () { console.log("文字被選中了"); } // 值改變就觸發 //innerText 自動觸發下方框 ipt.oninput = function () { console.log("輸入值正在改變"); div.innerText = this.value; } // 鍵盤擡起觸發 ipt.onkeyup = function () { console.log("鍵盤擡起，值改變"); div.innerText = this.value; } // 改變了值，並且丟失焦點觸發 ipt.onchange = function () { console.log("值改變 丟失焦點"); div.innerText = this.value; } // form的專有事件 form.onsubmit = function () { console.log("提交"); return false; } </script>
七、文件事件 :由window呼叫
- onload：頁面載入成功
- onbeforeunload：頁面退出或重新整理警告，需要設定回撥函式返回值，返回值隨意
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文件事件</title> <!-- 程式碼自身至下解析 --> <script type="text/javascript"> var div = document.querySelector('div'); console.log(div); // null </script> <script type="text/javascript"> // 文件載入完畢,觸發 window.onload = function () { var div = document.querySelector('div'); console.log(div); } </script> </head> <body> <div class="div"></div> </body> <script type="text/javascript"> window.onbeforeunload = function () { return false; } </script> </html>
八、圖片事件
- onerror：圖片載入失敗
<body> <img src="img/001.png" alt=""> </body> <script type="text/javascript"> var img = document.querySelector('img'); img.onerror = function () { console.log("圖片載入失敗了"); } </script>
九、頁面事件
- onscroll：頁面滾動
- onresize：頁面尺寸調整
- window.scrollY：頁面下滾距離
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>頁面事件</title> <script type="text/javascript"> //瀏覽器的滾輪 window.onload = function () { window.onscroll = function () { console.log(window.scrollY); } window.onresize = function () { console.log(window) } } //頁面標籤的滾輪 window.onload = function(){ var d = document.querySelector('.d'); d.onscroll = function () { console.log(d); } } </script> <style> .d{ width: 150px; height : 150px; overflow: scroll; } </style> </head> <body> <div class="d"> br*100 </div> br*100 </body> </html>