JavaScript基礎(14_事件)
阿新 • • 發佈：2020-09-20
事件
-
就是使用者和瀏覽器之間的互動行為
-
比如：點選按鈕、滑鼠移動、關閉視窗等等。。。
事件冒泡
-
案例
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title
View Code> <style> #box1{ width: 200px; height: 200px; background-color: yellowgreen; } #s1{ background-color: yellow; } </style> <script type="text/javascript"> window.onload = function () { /* 事件的冒泡(Bubble) - 所謂的冒泡指的是事件的向上傳導，當後代元素被觸發時，其祖先元素相同的事件同時也會觸發 - 大部分冒泡是有用的，如果不希望發生事件冒泡，可以通過事件物件取消冒泡*/ // 為s1繫結一個單擊響應函式 var s1 = document.getElementById("s1"); s1.onclick = function(event){ event = event || window.event; alert("我是span單擊響應函式"); // 取消冒泡 event.cancelBubble = true; }; // 為box1繫結一個單擊響應函式 var box1 = document.getElementById("box1"); box1.onclick = function(){ alert("我是box1單擊響應函式"); }; // 為body繫結一個單擊響應函式 document.body.onclick = function(){ alert("我是body單擊響應函式"); }; }; </script> </head> <body> <div id="box1"> 我是box1 <span id="s1">我是span</span> </div> </body> </html>
事件委派
-
案例
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> </style> <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"); li.innerHTML = "<a href='javascript:;' class='link'>新建超連結</a>" u1.appendChild(li); }; /* 為每一個超連結繫結單擊響應函式 我們為每一個超連結都綁定了一個單機響應函式，這種操作比較麻煩 而且這些操作只能為已有的超連結設定事件，而新新增的超連結必須得重新繫結 事件的委派 - 指將事件統一繫結給元素的共同祖先元素，這樣當後代元素上的時間觸發時，會一直冒泡到祖先元素 從而通過祖先元素的響應函式來處理事件 - 事件委派是利用了冒泡，通過委派可以減少事件繫結的次數，提高效能 */ var allA = document.getElementsByTagName("a"); // 我們希望只繫結一次事件，即可應用到多個元素上，即使元素是後來新增的 // 可以嘗試將其繫結給元素的共同祖先元素 // 為ul繫結單擊響應函式 u1.onclick = function(event){ event = event || window.event; // alert(this); // event中的target表示觸發事件的物件 // alert(event.target); if(event.target.className == "link"){ // 如果觸發事件的物件是我們期望的元素則執行，否則不執行 alert("我是ul的單擊響應函式"); }; }; }; </script> </head> <body> <button id="btn01">新增超連結</button> <ul id="u1" style=""> <p>我是p元素</p> <li><a href="javascript:;" class="link">超連結1</a></li> <li><a href="javascript:;" class="link">超連結2</a></li> <li><a href="javascript:;" class="link">超連結3</a></li> </ul> </body> </html>
View Code
事件繫結
-
案例
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function () { // 為btn01繫結第二個響應函式時，會導致第一個繫結事件函式會失效 // 使用 物件.事件 = 函式形式繫結的響應函式，只能同時為一個元素的一個事件繫結一個響應函式。 // 如果綁定了多個，後面的函式會覆蓋前面的 /* 第二種繫結事件的方法 addEventListerner() - 通過這個方法也可以 為元素繫結響應函式 - 引數： 1 事件的字串，不要on，比如onclick 寫成click 2 回撥函式，當事件觸發時該函式會被呼叫function(){} 3 是否 在捕獲階段觸發事件，需要一個布林值，一般都傳false - 可以為一個元素的相同事件同時繫結多個函式，事件被觸發時，所有的響應函式會按照 函式繫結順序依次觸發 - 不支援ie8 及一下瀏覽器 ie8中，可以使用 attachEvent()來繫結事件 引數 1 事件的字串，要on 2 回撥函式 這個方法也可以同時為一個事件繫結多個處理函式 執行順序是後繫結先執行 */ // btn01.addEventListener("click",function(){ // alert("121212"); // },false); /* 定義一個函式，為了相容ie8和其他瀏覽器 addEventListener()中的this 是繫結事件的物件 attachEvent()中的this，是window 引數 1 obj 要繫結事件的物件 2 eventstr 事件的字串(不要on) 3 callback 回撥函式 4 相容所有瀏覽器 */ function bind(obj, eventStr, callback){ if(obj.addEventListener){ // 大部分瀏覽器 obj.addEventListener(eventStr, callback, false); }else{ // ie8及以下瀏覽器 obj.attachEvent("on"+eventStr, function(){ // 處理this=btn01(obj) callback.call(obj); }); }; }; bind(btn01, "click", function(){ alert(11); }); bind(btn01, "click", function(){ alert(22); }); }; </script> </head> <body> <button id="btn01">點我一下</button> </body> </html>
View Code
事件的傳播
-
案例
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #box1{ width: 300px; height: 300px; background-color: yellowgreen; } #box2{ width: 200px; height: 200px; background-color: yellow; } #box3{ width: 150px; height: 150px; background-color: skyblue; } </style> <script type="text/javascript"> window.onload = function () { /* 分別為3個div繫結單擊響應函式 */ var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); /* 事件的傳播 - 關於事件的傳播網景公司和微軟公司有不同那個的理解 - 微軟認為事件應該由內向外傳播，當事件觸發時，應該先觸發當前元素上的事件，然後逐漸從內向外傳播，依照冒泡 - 網景公司認為事件應該由外向內傳播，也就是與微軟認為的截然相反（捕獲階段） - w3c綜合了兩個公司的方案，將事件的傳播分成了三個階段 1 捕獲階段 - 在捕獲階段時，由外向內 向目標元素進行事件捕獲，預設此時不會觸發事件 2 目標階段 - 事件捕獲到目標元素，捕獲結束，並開始在目標元素上觸發事件 3 冒泡階段 - 事件從目標元素向祖先元素傳遞，依次觸發祖先元素上的事件。 - 如果希望在捕獲階段觸發事件，可以將addEventListener(,,true) 一般情況不會希望在捕獲階段觸發事件，引數一般都填false */ bind(box1, "click",function(){ alert("我是box1的響應函式"); }); bind(box2, "click",function(){ alert("我是box2的響應函式"); }); bind(box3, "click",function(){ alert("我是box3的響應函式"); }); }; function bind(obj, eventStr, callback){ if(obj.addEventListener){ // 大部分瀏覽器 obj.addEventListener(eventStr, callback, false); }else{ // ie8及以下瀏覽器 obj.attachEvent("on"+eventStr, function(){ // 處理this=btn01(obj) callback.call(obj); }); }; }; </script> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html>
View Code
拖拽
-
基礎版
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #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】 */ var box1 = document.getElementById("box1"); // 繫結滑鼠按下事件 box1.onmousedown = function(event){ // alert("滑鼠按下咯!"); // div的水平方向偏移量 = 滑鼠.clientX - 元素.offsetLeft // div的垂直方向偏移量 = 滑鼠.clientY - 元素.offsetTop event = event || window.event; var offset_x = event.clientX - box1.offsetLeft; var offset_y = event.clientY - box1.offsetTop; // 為document繫結Onmousemove事件 document.onmousemove = function(event){ // 當滑鼠移動時被拖拽元素跟隨滑鼠移動onmousemove event = event || window.event; var x = event.clientX - offset_x; var y = event.clientY - offset_y; // 修改box1的位置 box1.style.left = x + "px"; box1.style.top = y + "px"; }; // 繫結滑鼠鬆開事件 document.onmouseup = function(){ // 當滑鼠鬆開時，被拖拽元素固定在當前位置 // 取消document的onmousemove事件 document.onmousemove = null; // alert("鬆開了呀") // 取消document的onmouseup事件 document.onmouseup = null; }; } }; </script> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
View Code
-
-
優化版
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #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】 */ var box1 = document.getElementById("box1"); // 繫結滑鼠按下事件 box1.onmousedown = function(event){ // alert("滑鼠按下咯!"); // 設定box1捕獲所有滑鼠按下的事件（為了相容IE8） // setCapture只有IE支援，如果用chrome呼叫時，會報錯 box1.setCapture && box1.setCapture(); // div的水平方向偏移量 = 滑鼠.clientX - 元素.offsetLeft // div的垂直方向偏移量 = 滑鼠.clientY - 元素.offsetTop event = event || window.event; var offset_x = event.clientX - box1.offsetLeft; var offset_y = event.clientY - box1.offsetTop; // 為document繫結Onmousemove事件 document.onmousemove = function(event){ // 當滑鼠移動時被拖拽元素跟隨滑鼠移動onmousemove event = event || window.event; var x = event.clientX - offset_x; var y = event.clientY - offset_y; // 修改box1的位置 box1.style.left = x + "px"; box1.style.top = y + "px"; }; // 繫結滑鼠鬆開事件 document.onmouseup = function(){ // 當滑鼠鬆開時，被拖拽元素固定在當前位置 // 取消document的onmousemove事件 document.onmousemove = null; // alert("鬆開了呀") // 取消document的onmouseup事件 document.onmouseup = null; // 當滑鼠鬆開，取消對setCapture()的捕獲行為 box1.releaseCapture && box1.releaseCapture(); }; /* 當我們拖拽一個網頁中的內容時，瀏覽器會預設去搜索引擎中搜索內容 此時會導致拖拽功能出現異常，這個是我們瀏覽器提供的預設行為 如果不希望發生這個預設行為，則可以 通過return false來取消 但是對IE8不起作用 */ return false; }; }; </script> </head> <body> <p>我是一段文字</p> <div id="box1"></div> <div id="box2"></div> </body> </html>
View Code
-
-
高階版
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #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】 */ var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); drag(box1); drag(box2); // 提取一個專門用來設定拖拽的函式 // 引數1：開啟拖拽的元素obj function drag(obj){ obj.onmousedown = function(event){ // 設定box1捕獲所有滑鼠按下的事件（為了相容IE8） // setCapture只有IE支援，如果用chrome呼叫時，會報錯 obj.setCapture && obj.setCapture(); event = event || window.event; var offset_x = event.clientX - obj.offsetLeft; var offset_y = event.clientY - obj.offsetTop; document.onmousemove = function(event){ event = event || window.event; var x = event.clientX - offset_x; var y = event.clientY - offset_y; obj.style.left = x + "px"; obj.style.top = y + "px"; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; obj.releaseCapture && obj.releaseCapture(); }; return false; }; }; }; </script> </head> <body> <p>我是一段文字</p> <div id="box1"></div> <div id="box2"></div> </body> </html>
View Code
-
滾輪事件
-
案例
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function () { /* 當滑鼠滾輪向下滾動時，box1變長 當滑鼠滾輪向上滾動時，box1變短 */ var box1 = document.getElementById("box1"); // 在火狐中不支援該屬性 // 如果要在火狐中使用滾輪事件，則需要通過addEventtListener()函式來繫結DOMMouseScroll事件 box1.onmousewheel = function(event){ // alert("滾了"); event = event || window.event; // 判斷滑鼠滾輪滾動方向 // 向上滾120，向下滾-120 // wheelDelta不看大小，只看正負 // alert(event.wheelDelta); if(event.wheelDelta > 0){ box1.style.height = box1.clientHeight - 10 + "px"; }else{ box1.style.height = box1.clientHeight + 10 + "px"; }; // 當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之一起滾動 // 這是瀏覽器預設行為，取消可以使用 return false return false }; }; </script> </head> <body style="height: 2000px;"> <div id="box1"></div> </body> </html>
View Code
鍵盤事件
-
案例
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function () { /* 鍵盤事件： 1 onkeydown - 按鍵被按下 - 對於onkeydown來說，如果一直按著某一個鍵不鬆手，事件則會連續觸發 - 當onkeydown連續觸發時，第一次和第二次之間會間隔稍微長一些，其他的會非常快 這種設定是為了防止誤操作發生 2 onkeyup 按鍵被鬆開 鍵盤事件一般都會繫結給一些可以獲取到焦點的物件或者是document */ var input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ event = event || window.event; // console.log("按了") // 數字的keycode=48-57 if(event.keyCode >= 48 && event.keyCode <=57){ // 在input框中輸入內容，屬於onkeydown的預設行為 // 如果return false取消預設行為後，則輸入的內容再文字框中不會出現文字內容了。 return false; }; } }; </script> </head> <body> <input type="text"> </body> </html>
View Code