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