當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
生活随笔
收集整理的這篇文章主要介紹了
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習地址：
JavaScript基礎、高級學習筆記匯總表【尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)】
目? ?錄
P114?114.尚硅谷_JS基礎_事件的委派?19:49
IE 屬性 / 標準 Event 屬性
事件的委派——案例
P115?115.尚硅谷_JS基礎_事件的綁定?18:06
“對象.事件 = 函數”的形式綁定響應函數，不能綁定多個
addEventListener()：為元素綁定響應函數
attachEvent()：綁定事件【IE8】
定義一個函數，用來為指定元素綁定響應函數
P116?116.尚硅谷_JS基礎_完成bind函數?08:58
P117?117.尚硅谷_JS基礎_事件的傳播?14:46
P118?118.尚硅谷_JS基礎_拖拽（一）?19:15
P119?119.尚硅谷_JS基礎_拖拽（二）?09:42
P120?120.尚硅谷_JS基礎_拖拽（三）?24:27
測試IE8
拖拽2 代碼
拖拽3 代碼——拖拽圖片
P121?121.尚硅谷_JS基礎_滾輪的事件?22:27
onmousewheel()：鼠標滾輪滾動的事件，會在滾輪滾動時觸發
event.wheelDelta：獲取鼠標滾輪滾動的方向
在火狐中使用event.detail來獲取滾動的方向
處理“滾動條”
滾輪事件-代碼
P122?122.尚硅谷_JS基礎_鍵盤事件?24:02
事件句柄（Event Handlers）
鼠標 / 鍵盤 屬性
IE 屬性
通過keyCode來獲取按鍵的編碼
在onkeydown中取消默認行為：輸入的內容，不會出現在文本框中
使文本框中不能輸入數字
P123?123.尚硅谷_JS基礎_鍵盤移動div?08:59
使div可以根據不同的方向鍵向不同的方向移動
P114?114.尚硅谷_JS基礎_事件的委派?19:49
IE 屬性 / 標準 Event 屬性
事件的委派——案例
我們希望，只綁定一次事件，即可應用到多個的元素上，即使元素是后添加的。我們可以嘗試將其綁定給元素的共同的祖先元素
事件的委派：指將事件統一綁定給元素的共同的祖先元素，這樣當后代元素上的事件觸發時，會一直冒泡到祖先元素，從而通過祖先元素的響應函數來處理事件。
事件委派是利用了冒泡，通過委派可以減少事件綁定的次數，提高程序的性能。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script type="text/javascript">window.onload = function() {var u1 = document.getElementById("u1");//點擊按鈕以后添加超鏈接var btn01 = document.getElementById("btn01");btn01.onclick = function() {var li = document.createElement("li"); // 創建一個lili.innerHTML = "<a href='javascript:;' class='link'>新建的超鏈接</a>";u1.appendChild(li); // 將li添加到ul中};/** 為每一個超鏈接都綁定一個單擊響應函數* 這里我們為每一個超鏈接都綁定了一個單擊響應函數，這種操作比較麻煩，* 而且這些操作只能為已有的超鏈接設置事件，而新添加的超鏈接必須重新綁定*/var allA = document.getElementsByTagName("a"); // 獲取所有的a/* for (var i = 0; i < allA.length; i++) { // 遍歷allA[i].onclick = function() {alert("我是a的單擊響應函數！！！");};} *//** 我們希望，只綁定一次事件，即可應用到多個的元素上，即使元素是后添加的* 我們可以嘗試將其綁定給元素的共同的祖先元素* * 事件的委派* - 指將事件統一綁定給元素的共同的祖先元素，這樣當后代元素上的事件觸發時，會一直冒泡到祖先元素* 從而通過祖先元素的響應函數來處理事件。* - 事件委派是利用了冒泡，通過委派可以減少事件綁定的次數，提高程序的性能*/u1.onclick = function(event) { // 為ul綁定一個單擊響應函數event = event || window.event;/** target* - event中的target表示的觸發事件的對象*/// alert(event.target);//如果觸發事件的對象是我們期望的元素，則執行否則不執行if (event.target.className == "link") {alert("我是ul的單擊響應函數");}};};</script></head><body><button id="btn01">添加超鏈接</button><ul id="u1" style="background-color: #bfa;"><li><p>我是p元素</p></li><li><a href="javascript:;" class="link">超鏈接一</a></li><li><a href="javascript:;" class="link">超鏈接二</a></li><li><a href="javascript:;" class="link">超鏈接三</a></li></ul></body> </html>P115?115.尚硅谷_JS基礎_事件的綁定?18:06
“對象.事件 = 函數”的形式綁定響應函數，不能綁定多個
addEventListener()：為元素綁定響應函數
addEventListener()：通過這個方法也可以為元素綁定響應函數。
參數：
使用addEventListener()可以同時為一個元素的相同事件同時綁定多個響應函數，這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行，這個方法不支持IE8及以下的瀏覽器。
attachEvent()：綁定事件【IE8】
attachEvent()：在IE8中可以使用attachEvent()來綁定事件
參數：
這個方法也可以同時為一個事件綁定多個處理函數，不同的是它是后綁定先執行，執行順序和addEventListener()相反。
??
定義一個函數，用來為指定元素綁定響應函數
addEventListener()中的this，是綁定事件的對象；attachEvent()中的this，是window。需要統一兩個方法this。
P116?116.尚硅谷_JS基礎_完成bind函數?08:58
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {// 點擊按鈕以后彈出一個內容var btn01 = document.getElementById("btn01"); // 獲取按鈕對象/** 使用 對象.事件 = 函數 的形式綁定響應函數，* 它只能同時為一個元素的一個事件綁定一個響應函數，* 不能綁定多個，如果綁定了多個，則后邊會覆蓋掉前邊的*//* btn01.onclick = function() { // 為btn01綁定第1個單擊響應函數alert(1);};btn01.onclick = function() { // 為btn01綁定第2個響應函數alert(2);}; *//** addEventListener()* - 通過這個方法也可以為元素綁定響應函數* - 參數：* 1.事件的字符串，click不要on* 2.回調函數，當事件觸發時 該函數會被調用* 3.是否在捕獲階段觸發事件，需要一個布爾值，一般都傳false* * 使用addEventListener()可以同時為一個元素的相同事件同時綁定多個響應函數，* 這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行* * 這個方法不支持IE8及以下的瀏覽器*//* btn01.addEventListener("click", function() {alert(1);}, false);btn01.addEventListener("click", function() {alert(2);}, false);btn01.addEventListener("click", function() {alert(3);}, false); *//** attachEvent()* - 在IE8中可以使用attachEvent()來綁定事件* - 參數：* 1.事件的字符串，要on* 2.回調函數* * - 這個方法也可以同時為一個事件綁定多個處理函數，* 不同的是它是后綁定先執行，執行順序和addEventListener()相反*//* btn01.attachEvent("onclick", function() {alert(1);});btn01.attachEvent("onclick", function() {alert(2);});btn01.attachEvent("onclick", function() {alert(3);}); *//* btn01.addEventListener("click", function() {alert(this);}, false);btn01.attachEvent("onclick", function() {alert(this);}); */bind(btn01, "click", function() {alert(this);});};//定義一個函數，用來為指定元素綁定響應函數/** addEventListener()中的this，是綁定事件的對象* attachEvent()中的this，是window* 需要統一兩個方法this*//** 參數：* obj 要綁定事件的對象* eventStr 事件的字符串(不要on)* callback 回調函數*/function bind(obj, eventStr, callback) {if (obj.addEventListener) {//大部分瀏覽器兼容的方式obj.addEventListener(eventStr, callback, false);} else {/** this是誰由調用方式決定* callback.call(obj)*///IE8及以下obj.attachEvent("on" + eventStr, function() {//在匿名函數中調用回調函數callback.call(obj);});}}</script></head><body><button id="btn01">點我一下</button></body> </html>P117?117.尚硅谷_JS基礎_事件的傳播?14:46
事件的傳播
- 關于事件的傳播網景公司和微軟公司有不同的理解
- 微軟公司認為事件應該是由內向外傳播，也就是當事件觸發時，應該先觸發當前元素上的事件，然后再向當前元素的祖先元素上傳播，也就說事件應該在冒泡階段執行。
- 網景公司認為事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件，然后在向內傳播給后代元素。
- W3C綜合了兩個公司的方案，將事件傳播分成了三個階段：
- 如果希望在捕獲階段就觸發事件，可以將addEventListener()的第三個參數設置為true。一般情況下我們不會希望在捕獲階段觸發事件，所以這個參數一般都是false，IE8及以下的瀏覽器中沒有捕獲階段。
P118?118.尚硅谷_JS基礎_拖拽（一）?19:15
拖拽的流程：
??
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() { // 拖拽box1元素? //獲取box1var box1 = document.getElementById("box1");//為box1綁定一個鼠標按下事件//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedownbox1.onmousedown = function(event) {event = event || window.event;//為document綁定一個onmousemove事件document.onmousemove = function(event) {event = event || window.event;//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove//獲取鼠標的坐標var left = event.clientX;var top = event.clientY;//修改box1的位置box1.style.left = left + "px";box1.style.top = top + "px";};//為document綁定一個鼠標松開事件document.onmouseup = function() {//當鼠標松開時，被拖拽元素固定在當前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;};};};</script></head><body><div id="box1"></div><div id="box2"></div></body> </html>P119?119.尚硅谷_JS基礎_拖拽（二）?09:42
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() { // 拖拽box1元素? //獲取box1var box1 = document.getElementById("box1");//為box1綁定一個鼠標按下事件//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedownbox1.onmousedown = function(event) {event = event || window.event;//div的偏移量 鼠標.clentX - 元素.offsetLeft//div的偏移量 鼠標.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//為document綁定一個onmousemove事件document.onmousemove = function(event) {event = event || window.event;//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove//獲取鼠標的坐標var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置box1.style.left = left + "px";box1.style.top = top + "px";};//為document綁定一個鼠標松開事件document.onmouseup = function() {//當鼠標松開時，被拖拽元素固定在當前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;};};};</script></head><body><div id="box1"></div><div id="box2"></div></body> </html>P120?120.尚硅谷_JS基礎_拖拽（三）?24:27
測試IE8
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {//分別為兩個按鈕綁定單擊響應函數var btn01 = document.getElementById("btn01");var btn02 = document.getElementById("btn02");btn01.onclick = function() {alert(1);};btn02.onclick = function() {alert(2);};//設置btn01對鼠標按下相關的事件進行捕獲//當調用一個元素的setCapture()方法以后，這個元素將會把下一次所有的鼠標按下相關的事件捕獲到自身上btn01.setCapture();};</script></head><body><button id="btn01">按鈕01</button><button id="btn02">按鈕02</button></body> </html>拖拽2 代碼
??
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() {/** 拖拽box1元素* - 拖拽的流程* 1.當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown* 2.當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove* 3.當鼠標松開時，被拖拽元素固定在當前位置 onmouseup*///獲取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");//為box1綁定一個鼠標按下事件//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedownbox1.onmousedown = function(event) {//設置box1捕獲所有鼠標按下的事件/** setCapture()* - 只有IE支持，但是在火狐中調用時不會報錯，* 而如果使用chrome調用，會報錯*//* if (box1.setCapture) {box1.setCapture();} */box1.setCapture && box1.setCapture();event = event || window.event;//div的偏移量 鼠標.clentX - 元素.offsetLeft//div的偏移量 鼠標.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//為document綁定一個onmousemove事件document.onmousemove = function(event) {event = event || window.event;//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove//獲取鼠標的坐標var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置box1.style.left = left + "px";box1.style.top = top + "px";};//為document綁定一個鼠標松開事件document.onmouseup = function() {//當鼠標松開時，被拖拽元素固定在當前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//當鼠標松開時，取消對事件的捕獲box1.releaseCapture && box1.releaseCapture();};/** 當我們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，* 此時會導致拖拽功能的異常，這個是瀏覽器提供的默認行為，* 如果不希望發生這個行為，則可以通過return false來取消默認行為* * 但是這招對IE8不起作用*/return false;};};</script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div></body> </html>拖拽3 代碼——拖拽圖片
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() {/** 拖拽box1元素* - 拖拽的流程* 1.當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown* 2.當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove* 3.當鼠標松開時，被拖拽元素固定在當前位置 onmouseup*///獲取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var img1 = document.getElementById("img1");drag(box1); // 開啟box1的拖拽drag(box2); // 開啟box2的拖拽drag(img1);};/** 提取一個專門用來設置拖拽的函數* 參數：開啟拖拽的元素*/function drag(obj) {//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedownobj.onmousedown = function(event) {//設置box1捕獲所有鼠標按下的事件/** setCapture()* - 只有IE支持，但是在火狐中調用時不會報錯，* 而如果使用chrome調用，會報錯*//*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;//div的偏移量 鼠標.clentX - 元素.offsetLeft//div的偏移量 鼠標.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;//為document綁定一個onmousemove事件document.onmousemove = function(event) {event = event || window.event;//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove//獲取鼠標的坐標var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left + "px";obj.style.top = top + "px";};//為document綁定一個鼠標松開事件document.onmouseup = function() {//當鼠標松開時，被拖拽元素固定在當前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//當鼠標松開時，取消對事件的捕獲obj.releaseCapture && obj.releaseCapture();};/** 當我們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，* 此時會導致拖拽功能的異常，這個是瀏覽器提供的默認行為，* 如果不希望發生這個行為，則可以通過return false來取消默認行為* * 但是這招對IE8不起作用*/return false;};}</script></head><body>我是一段文字！<div id="box1"></div><div id="box2"></div><img src="img/an.jpg" id="img1" style="position: absolute;" /></body> </html>P121?121.尚硅谷_JS基礎_滾輪的事件?22:27
onmousewheel()：鼠標滾輪滾動的事件，會在滾輪滾動時觸發
??
event.wheelDelta：獲取鼠標滾輪滾動的方向
在火狐中使用event.detail來獲取滾動的方向
wheelDelta 這個值，我們不看大小、只看正負。
處理“滾動條”
滾輪事件-代碼
??
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function() {//獲取id為box1的divvar box1 = document.getElementById("box1");//為box1綁定一個鼠標滾輪滾動的事件/** onmousewheel鼠標滾輪滾動的事件，會在滾輪滾動時觸發，* 但是火狐不支持該屬性* * 在火狐中需要使用 DOMMouseScroll 來綁定滾動事件* 注意該事件需要通過addEventListener()函數來綁定*/box1.onmousewheel = function(event) {event = event || window.event;//event.wheelDelta 可以獲取鼠標滾輪滾動的方向//向上滾 120 向下滾 -120//wheelDelta這個值我們不看大小，只看正負//alert(event.wheelDelta);//wheelDelta這個屬性火狐中不支持//在火狐中使用event.detail來獲取滾動的方向//向上滾 -3 向下滾 3//alert(event.detail);/** 當鼠標滾輪向下滾動時，box1變長* 當滾輪向上滾動時，box1變短*///判斷鼠標滾輪滾動的方向if (event.wheelDelta > 0 || event.detail < 0) {//向上滾，box1變短box1.style.height = box1.clientHeight - 10 + "px";} else {//向下滾，box1變長box1.style.height = box1.clientHeight + 10 + "px";}/** 使用addEventListener()方法綁定響應函數，取消默認行為時不能使用return false* 需要使用event來取消默認行為event.preventDefault();* 但是IE8不支持event.preventDefault();這個玩意，如果直接調用會報錯*/event.preventDefault && event.preventDefault();/** 當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動，* 這是瀏覽器的默認行為，如果不希望發生，則可以取消默認行為*/return false;};//為火狐綁定滾輪事件bind(box1, "DOMMouseScroll", box1.onmousewheel);};function bind(obj, eventStr, callback) {if (obj.addEventListener) {//大部分瀏覽器兼容的方式obj.addEventListener(eventStr, callback, false);} else {/** this是誰由調用方式決定* callback.call(obj)*///IE8及以下obj.attachEvent("on" + eventStr, function() {//在匿名函數中調用回調函數callback.call(obj);});}}</script></head><body style="height: 2000px;"><div id="box1"></div></body> </html>P122?122.尚硅谷_JS基礎_鍵盤事件?24:02
事件句柄（Event Handlers）
鼠標 / 鍵盤 屬性
IE 屬性
鍵盤事件
onkeydown
- 按鍵被按下。
- 對于onkeydown來說：如果一直按著某個按鍵不松手，則事件會一直觸發。
- 當onkeydown連續觸發時，第一次和第二次之間會間隔稍微長一點，其他的會非常的快。這種設計是為了防止誤操作的發生。
onkeyup
- 按鍵被松開。
鍵盤事件，一般都會綁定給一些可以獲取到焦點的對象或者是document。
通過keyCode來獲取按鍵的編碼
在onkeydown中取消默認行為：輸入的內容，不會出現在文本框中
使文本框中不能輸入數字
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {document.onkeydown = function(event) {event = event || window.event;/** 可以通過keyCode來獲取按鍵的編碼* 通過它可以判斷哪個按鍵被按下* 除了keyCode，事件對象中還提供了幾個屬性* altKey* ctrlKey* shiftKey* - 這個三個用來判斷alt ctrl 和 shift是否被按下* 如果按下則返回true，否則返回false*///console.log(event.keyCode);//判斷一個y是否被按下//判斷y和ctrl是否同時被按下if (event.keyCode === 89 && event.ctrlKey === 17) {console.log("ctrl和y都被按下了");}};/* document.onkeyup = function() {console.log("按鍵松開了");}; */var input = document.getElementsByTagName("input")[0]; // 獲取inputinput.onkeydown = function(event) {event = event || window.event;//console.log(event.keyCode);//數字 48 - 57//使文本框中不能輸入數字if (event.keyCode >= 48 && event.keyCode <= 57) {//在文本框中輸入內容，屬于onkeydown的默認行為//如果在onkeydown中取消了默認行為，則輸入的內容，不會出現在文本框中return false;}};};</script></head><body><input type="text" /></body> </html>P123?123.尚硅谷_JS基礎_鍵盤移動div?08:59
使div可以根據不同的方向鍵向不同的方向移動
按方向鍵的同時，按“Ctrl”鍵? ?會加速。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}</style><script type="text/javascript">//使div可以根據不同的方向鍵向不同的方向移動/** 按左鍵，div向左移* 按右鍵，div向右移...*/window.onload = function() {//為document綁定一個按鍵按下的事件document.onkeydown = function(event) {event = event || window.event;//定義一個變量，來表示移動的速度var speed = 10;//當用戶按了ctrl以后，速度加快if (event.ctrlKey) {speed = 50;}/** 37 左* 38 上* 39 右* 40 下*/switch (event.keyCode) {case 37://alert("向左"); left值減小box1.style.left = box1.offsetLeft - speed + "px";break;case 39://alert("向右");box1.style.left = box1.offsetLeft + speed + "px";break;case 38://alert("向上");box1.style.top = box1.offsetTop - speed + "px";break;case 40://alert("向下");box1.style.top = box1.offsetTop + speed + "px";break;}};};</script></head><body><div id="box1"></div></body> </html>理論上，明天能看完~? ?沖沖沖~
總結
以上是生活随笔為你收集整理的JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript基础13-day15
- 下一篇： JavaScript基础15-day17