當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript学习笔记（5）

發布時間：2025/3/20 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习笔记（5）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- DOM重點核心總結
- 注冊事件兩種方式
- - 事件監聽方式 addEventListener（通用）attachEvent（基本不用）
  - 注冊事件兼容性解決方案（照顧不同版本瀏覽器）
- 刪除事件（解綁事件）removeEventListener（通用） detachEvent（不用）
- - 刪除事件的兼容性解決方案（照顧不同版本瀏覽器）
- DOM事件流捕獲階段[下沉階段] 冒泡階段（先捕獲，后冒泡）
- DOM事件流的代碼驗證（看捕獲階段和冒泡階段綁定的事件哪個先執行，只適用于addEventListener）
- 事件對象 event（function (e) 里面的字母可以自定義，只要后面調用一致即可）
- 事件對象常見屬性和方法
- - this和e.currentTarget返回的是綁定事件的對象，e.target返回的是觸發事件的對象
  - e.type得到觸發事件類型、e.preventDefault阻止鏈接跳轉（阻止默認功能）
  - 阻止事件冒泡 e.stopPropagation() （高版本瀏覽器）e.cancelBubble = true（低版本瀏覽器）
  - - 阻止事件冒泡兼容性解決方案
- 事件委托（代理、委派）為什么需要事件委托？（利用冒泡到父節點觸發事件，減少子節點頻繁綁定觸發事件帶來的程序壓力）
- 常用鼠標事件
- - 禁止鼠標右鍵菜單事件 contextmenu（右鍵菜單也叫上下文菜單）禁止選中文字事件 selectstart 用 e.preventDefault()就能禁用它們了
  - 鼠標事件對象（獲取鼠標點擊時的坐標：相對用戶頁面窗口 e.clientX、e.clientY，相對整個頁面 e.pageX、e.pageY，相對屏幕 e.screenX、e.screenY）
- 鼠標事件案例：跟隨鼠標的天使（鼠標移動事件：mousemove 只要鼠標一動就能觸發事件得到實時坐標）
- 常用鍵盤事件 document.onkeyup（鍵盤彈起）document.onkeydown（鍵盤按下） document.onkeypress（鍵盤按下【不能識別特定功能鍵，如ctrl、shift、方向鍵等】）
- 鍵盤事件對象 e.keyCode 返回按鍵的Ascii碼值（document.onkeyup、document.onkeydown（不能識別大小寫） document.onkeypress（能識別大小寫））
- 案例：模擬京東按下s鍵定位到搜索框（onkeyup、focus()）
- 案例：模擬京東在輸入框旁邊顯示大字號

DOM重點核心總結

注冊事件兩種方式

事件監聽方式 addEventListener（通用）attachEvent（基本不用）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>傳統注冊事件</button><button>方法監聽注冊事件</button><button>ie9 attachEvent</button><script>var btns = document.querySelectorAll('button');// 1. 傳統方式注冊事件btns[0].onclick = function () {alert('hi');}btns[0].onclick = function () {alert('hao a u');}// 2. 事件偵聽注冊事件 addEventListener // (1) 里面的事件類型是字符串必定加引號而且不帶on// (2) 同一個元素同一個事件可以添加多個偵聽器（事件處理程序）btns[1].addEventListener('click', function () {alert(22);})btns[1].addEventListener('click', function () {alert(33);})// 3. attachEvent ie9以前的版本支持btns[2].attachEvent('onclick', function () {alert(11);})</script> </body></html>

注冊事件兼容性解決方案（照顧不同版本瀏覽器）

刪除事件（解綁事件）removeEventListener（通用） detachEvent（不用）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style> </head><body><div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function () {alert(11);// 1. 傳統方式刪除事件divs[0].onclick = null;}// 2. removeEventListener 刪除事件divs[1].addEventListener('click', fn) // 里面的fn 不需要調用加小括號function fn() {alert(22);divs[1].removeEventListener('click', fn);}// 3. detachEventdivs[2].attachEvent('onclick', fn1);function fn1() {alert(33);divs[2].detachEvent('onclick', fn1);}</script> </body></html>

刪除事件的兼容性解決方案（照顧不同版本瀏覽器）

DOM事件流捕獲階段[下沉階段] 冒泡階段（先捕獲，后冒泡）

DOM事件流的代碼驗證（看捕獲階段和冒泡階段綁定的事件哪個先執行，只適用于addEventListener）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.father {overflow: hidden;width: 300px;height: 300px;margin: 100px auto;background-color: pink;text-align: center;}.son {width: 200px;height: 200px;margin: 50px;background-color: purple;line-height: 200px;color: #fff;}</style> </head><body><div class="father"><div class="son">son盒子</div></div><script>// dom 事件流三個階段// 1. JS 代碼中只能執行捕獲或者冒泡其中的一個階段。// 2. onclick 和 attachEvent（ie）只能得到冒泡階段。// 3. 捕獲階段如果addEventListener 第三個參數是 true 那么則處于捕獲階段 document -> html -> body -> father -> son// var son = document.querySelector('.son');// son.addEventListener('click', function() {// alert('son');// }, true);// var father = document.querySelector('.father');// father.addEventListener('click', function() {// alert('father');// }, true);// 4. 冒泡階段如果addEventListener 第三個參數是 false 或者省略那么則處于冒泡階段 son -> father ->body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function () {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function () {alert('father');}, false);document.addEventListener('click', function () {alert('document');})</script> </body></html>

事件對象 event（function (e) 里面的字母可以自定義，只要后面調用一致即可）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div>123</div><script>var div = document.querySelector('div')div.onclick = function (event) {console.log(event)}</script> </body></html>

通常不用做兼容性處理，直接照下面這樣寫就好了

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style> </head><body><div>123</div><script>// 事件對象var div = document.querySelector('div');div.onclick = function (e) {// console.log(e);// console.log(window.event);// e = e || window.event;console.log(e);}// div.addEventListener('click', function(e) {// console.log(e);// })// 1. event 就是一個事件對象寫到我們偵聽函數的小括號里面當形參來看// 2. 事件對象只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞參數// 3. 事件對象是我們事件的一系列相關數據的集合跟事件相關的比如鼠標點擊里面就包含了鼠標的相關信息，鼠標坐標啊，如果是鍵盤事件里面就包含的鍵盤事件的信息比如判斷用戶按下了那個鍵// 4. 這個事件對象我們可以自己命名比如 event 、 evt、 e// 5. 事件對象也有兼容性問題 ie678 通過 window.event 兼容性的寫法 e = e || window.event;</script> </body></html>

事件對象常見屬性和方法

this和e.currentTarget返回的是綁定事件的對象，e.target返回的是觸發事件的對象

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style> </head><body><div>123</div><ul><li>abc</li></ul><script>// 常見事件對象的屬性和方法// 1. e.target 返回的是觸發事件的對象（元素） this 返回的是綁定事件的對象（元素）// 區別： e.target 點擊了那個元素，就返回那個元素 this 那個元素綁定了這個點擊事件，那么就返回誰var div = document.querySelector('div');div.addEventListener('click', function (e) {console.log(e.target);console.log(this);})var ul = document.querySelector('ul');ul.addEventListener('click', function (e) {// 我們給ul 綁定了事件那么this 就指向ul console.log(this);console.log(e.currentTarget);// e.target 指向我們點擊的那個對象誰觸發了這個事件我們點擊的是li e.target 指向的就是liconsole.log(e.target);})// 了解兼容性// div.onclick = function(e) {// e = e || window.event;// var target = e.target || e.srcElement;// console.log(target);// }// 2. 了解跟 this 有個非常相似的屬性 currentTarget ie678不認識</script> </body></html>

e.type得到觸發事件類型、e.preventDefault阻止鏈接跳轉（阻止默認功能）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style></style> </head><body><div>123</div><a href="http://www.baidu.com">百度</a><form action="http://www.baidu.com"><input type="submit" value="提交" name="sub"></form><script>// 常見事件對象的屬性和方法// 1. 返回事件類型var div = document.querySelector('div');div.addEventListener('click', fn);div.addEventListener('mouseover', fn);div.addEventListener('mouseout', fn);function fn(e) {console.log(e.type);}// 2. 阻止默認行為（事件）讓鏈接不跳轉或者讓提交按鈕不提交var a = document.querySelector('a');a.addEventListener('click', function (e) {e.preventDefault(); // dom 標準寫法})// 3. 傳統的注冊方式a.onclick = function (e) {// 普通瀏覽器 e.preventDefault(); 方法// e.preventDefault();// 低版本瀏覽器 ie678 returnValue 屬性// e.returnValue;// 我們可以利用return false 也能阻止默認行為沒有兼容性問題特點： return 后面的代碼不執行了，而且只限于傳統的注冊方式return false;alert(11);}</script> </body></html>

阻止事件冒泡 e.stopPropagation() （高版本瀏覽器）e.cancelBubble = true（低版本瀏覽器）

阻止事件冒泡兼容性解決方案

事件委托（代理、委派）為什么需要事件委托？（利用冒泡到父節點觸發事件，減少子節點頻繁綁定觸發事件帶來的程序壓力）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><ul><li>知否知否，點我應有彈框在手！</li><li>知否知否，點我應有彈框在手！</li><li>知否知否，點我應有彈框在手！</li><li>知否知否，點我應有彈框在手！</li><li>知否知否，點我應有彈框在手！</li></ul><script>// 事件委托的核心原理：給父節點添加偵聽器，利用事件冒泡影響每一個子節點var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// alert('知否知否，點我應有彈框在手！');// e.target 這個可以得到我們點擊的對象e.target.style.backgroundColor = 'pink';})</script> </body></html>

常用鼠標事件

禁止鼠標右鍵菜單事件 contextmenu（右鍵菜單也叫上下文菜單）禁止選中文字事件 selectstart 用 e.preventDefault()就能禁用它們了

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body>我是一段不愿意分享的文字<script>// 1. contextmenu 我們可以禁用右鍵菜單document.addEventListener('contextmenu', function(e) {e.preventDefault();})// 2. 禁止選中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();})</script> </body></html>

鼠標事件對象（獲取鼠標點擊時的坐標：相對用戶頁面窗口 e.clientX、e.clientY，相對整個頁面 e.pageX、e.pageY，相對屏幕 e.screenX、e.screenY）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {height: 3000px;}</style> </head><body><script>// 鼠標事件對象 MouseEventdocument.addEventListener('click', function (e) {// 1. client 鼠標在可視區的x和y坐標console.log(e.clientX);console.log(e.clientY);console.log('---------------------');// 2. page 鼠標在頁面文檔的x和y坐標console.log(e.pageX);console.log(e.pageY);console.log('---------------------');// 3. screen 鼠標在電腦屏幕的x和y坐標console.log(e.screenX);console.log(e.screenY);})</script> </body></html>

鼠標事件案例：跟隨鼠標的天使（鼠標移動事件：mousemove 只要鼠標一動就能觸發事件得到實時坐標）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {position: absolute;top: 2px;}</style> </head><body><img src="蜥蜴女仆.gif" alt=""><script>var pic = document.querySelector('img');document.addEventListener('mousemove', function (e) {// 1. mousemove只要我們鼠標移動1px 就會觸發這個事件// console.log(1);// 2.核心原理：每次鼠標移動，我們都會獲得最新的鼠標坐標，把這個x和y坐標做為圖片的top和left 值就可以移動圖片var x = e.pageX;var y = e.pageY;console.log('x坐標是' + x, 'y坐標是' + y);//3 . 千萬不要忘記給left 和top 添加px 單位pic.style.left = x - 50 + 'px';pic.style.top = y - 40 + 'px';});</script> </body></html>

常用鍵盤事件 document.onkeyup（鍵盤彈起）document.onkeydown（鍵盤按下） document.onkeypress（鍵盤按下【不能識別特定功能鍵，如ctrl、shift、方向鍵等】）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div>鍵盤事件</div><script>// 常用的鍵盤事件//1. keyup 按鍵彈起的時候觸發 // document.onkeyup = function() {// console.log('我彈起了');// }document.addEventListener('keyup', function () {console.log('我彈起了');})//3. keypress 按鍵按下的時候觸發不能識別功能鍵比如 ctrl shift 左右箭頭啊document.addEventListener('keypress', function () {console.log('我按下了press');})//2. keydown 按鍵按下的時候觸發能識別功能鍵比如 ctrl shift 左右箭頭啊document.addEventListener('keydown', function () {console.log('我按下了down');})// 4. 三個事件的執行順序 keydown -- keypress -- keyup</script> </body></html>

鍵盤事件對象 e.keyCode 返回按鍵的Ascii碼值（document.onkeyup、document.onkeydown（不能識別大小寫） document.onkeypress（能識別大小寫））

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>// 鍵盤事件對象中的keyCode屬性可以得到相應鍵的ASCII碼值// 1. 我們的keyup 和keydown事件不區分字母大小寫 a 和 A 得到的都是65// 2. 我們的keypress 事件區分字母大小寫 a 97 和 A 得到的是65document.addEventListener('keyup', function(e) {// console.log(e);console.log('up:' + e.keyCode);// 我們可以利用keycode返回的ASCII碼值來判斷用戶按下了那個鍵if (e.keyCode === 65) {alert('您按下的a鍵');} else {alert('您沒有按下a鍵')}})document.addEventListener('keypress', function(e) {// console.log(e);console.log('press:' + e.keyCode);})</script> </body></html>

案例：模擬京東按下s鍵定位到搜索框（onkeyup、focus()）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><input type="text"><script>// 核心思路：檢測用戶是否按下了s 鍵，如果按下s 鍵，就把光標定位到搜索框里面// 使用鍵盤事件對象里面的keyCode 判斷用戶按下的是否是s鍵// 搜索框獲得焦點：使用 js 里面的 focus() 方法var search = document.querySelector('input');document.addEventListener('keyup', function(e) {// console.log(e.keyCode);if (e.keyCode === 83) {search.focus();}})</script> </body></html>

案例：模擬京東在輸入框旁邊顯示大字號

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.search {position: relative;width: 178px;margin: 100px;}.con {display: none;position: absolute;top: -40px;width: 171px;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2);padding: 5px 0;font-size: 18px;line-height: 20px;color: #333;}.con::before {content: '';width: 0;height: 0;position: absolute;top: 28px;left: 18px;border: 8px solid #000;border-style: solid dashed dashed;border-color: #fff transparent transparent;}</style> </head><body><div class="search"><div class="con">123</div><input type="text" placeholder="請輸入您的快遞單號" class="jd"></div><script>// 快遞單號輸入內容時，上面的大號字體盒子（con）顯示(這里面的字號更大）// 表單檢測用戶輸入：給表單添加鍵盤事件// 同時把快遞單號里面的值（value）獲取過來賦值給 con盒子（innerText）做為內容// 如果快遞單號里面內容為空，則隱藏大號字體盒子(con)盒子var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup', function () {// console.log('輸入內容啦');if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})// 當我們失去焦點，就隱藏這個con盒子jd_input.addEventListener('blur', function () {con.style.display = 'none';})// 當我們獲得焦點，就顯示這個con盒子jd_input.addEventListener('focus', function () {if (this.value !== '') {con.style.display = 'block';}})</script> </body>

總結

以上是生活随笔為你收集整理的JavaScript学习笔记（5）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript学习笔记（4）
下一篇： JavaScript学习笔记（6）BOM