JS之DOM Event(事件)
阿新 • • 發佈：2021-07-20
HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
''' onclick 當用戶點選某個物件時呼叫的事件控制代碼。 ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅影象完成載入。 onmousedown 滑鼠按鈕被按下。 onmousemove 滑鼠被移動。 onmouseout 滑鼠從某元素移開。 onmouseover 滑鼠移到某元素之上。onmouseleave 滑鼠從元素離開 onselect 文字被選中。 onsubmit 確認按鈕被點選。'''
兩種為元素附加事件屬性的方式
<div onclick="alert(123)">點我呀</div> <p id="abc">試一試!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ alert("hi"); }; </script>
注意：
<div id="abc" onclick="func1(this)">事件繫結方式1</div><div id="id123">事件繫結方式2</div> <script> function func1(self){ console.log(self.id) } //jquery下是$(self), 這種方式this引數必須填寫; //------------------------------------------ var ele=document.getElementById("id123").onclick=function(){ console.log(this.id);//jquery下是$(this), 這種方式不需要this引數; } </script>
onload：
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標誌著 頁面內容被載入完成.
應用場景: 當有些事情我們希望頁面載入完立刻執行,那麼可以使用該事件屬性.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // window.onload=function(){ // var ele=document.getElementById("ppp"); // ele.onclick=function(){ // alert(123) // }; // }; function fun1() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> <body onload="fun1()"> <p id="ppp">hello p</p> </body> </html>
onsubmit:
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證使用者輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<form id="form"> <input type="text"/> <input type="submit" value="點我!" /> </form> <script type="text/javascript"> //阻止表單提交方式1(). //onsubmit 命名的事件函式,可以接受返回值. 其中返回false表示攔截表單提交.其他為放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("驗證失敗 表單不會提交!"); // return false; // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的預設動作。 alert("驗證失敗 表單不會提交!"); event.preventDefault(); }
Event 物件
Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。
事件通常與函式結合使用，函式不會在事件發生前被執行！event物件在事件發生時系統已經建立好了,並且會在事件函式被呼叫時傳給事件函式.我們獲得僅僅需要接收一下即可.
比如onkeydown,我們想知道哪個鍵被按下了，需要問下event物件的屬性，這裡就時KeyCode；
思考：onclick＝function(event){};這個方法是誰呼叫的？
事件傳播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); } document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外層div傳播. } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* onload事件：一張頁面或一幅影象完成載入 */ // var ele=document.getElementsByClassName('div1')[0]; // console.log(ele.innerHTML); // 放在上面，報錯了Uncaught TypeError: Cannot read property 'innerHTML' of undefined；換window.onload繫結一個函式 // window.onload=function () { // var ele=document.getElementsByClassName('div1')[0]; // console.log(ele.innerHTML); // }; // 還可以把onload放在body標籤中 function f3() { var ele=document.getElementsByClassName('div1')[0]; console.log(ele.innerHTML); }; </script> </head> <body onload="f3()"> <!--onfocus元素獲得焦點onblur元素失去焦點--> <!--<input type="text" id="search" value="請輸入使用者名稱" onfocus="f1()" onblur="f2()">--> <script> // var ele=document.getElementById('search'); // function f1() { // if (ele.value=='請輸入使用者名稱') { // ele.value=''; // }; // }; // 當用戶點選輸入框即標籤獲取到焦點，因為value預設值為'請輸入使用者名稱'，所以標籤value會為空； // // function f2() { // if (!ele.value.trim()) { // ele.value='請輸入使用者名稱'; // }; // }; // 當標籤失去焦點後，判斷value(去除空格後)是否為空，如果為空那麼value等於'請輸入使用者名稱'；這裡的value賦值要與f1的判斷相等，不然f1執行一次後就無法繼續了 </script> <div class="div1">hello div</div> <!--事件繫結寫法(儘量不要寫在html標籤裡)--> <div class="v1"> <div class="v2">divdivdiv</div> <div class="v2">divdivdiv</div> <div class="v2">divdivdiv</div> <div class="v2">divdivdiv</div> <p id="p1">ppp</p> </div> <script> var ele1=document.getElementsByClassName('v1')[0]; var eles=ele1.children; console.log(eles); for (var i=0;i<eles.length;i++) { eles[i].onclick=function () { alert('hello world'); }; }; </script> <!--引數this的用法--> <div id="v1" onclick="func(this)">this is div</div> <!--引數this代表所引用函式可直接找到這個標籤--> <script> function func(that) { // 引數除了this命名其它都可以 console.log(that); // <div id="v1" onclick="func(this)">this is div</div> console.log(that.parentElement); // 找到父級body標籤以及裡面的內容 }; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 300px; height: 300px; background-color: antiquewhite; } .inner{ width: 100px; height: 100px; background-color: rebeccapurple; } </style> </head> <body> <!--onsubmit事件，on的意思代表監聽--> <form action="" id="form1"> <input type="text" name="username"> <input type="submit" value="提交"> </form> <script> var ele=document.getElementById('form1'); ele.onsubmit=function (event) { alert(123); // 先觸發onsubmit事件，然後提交表單(action為空那麼傳送到當前頁面，也可發現點選提交後頁面有重新整理) // return false; // 不往後端傳送表單(比如判斷輸入格式不正確即可攔截)，這是第一種方式 event.preventDefault(); // 通知瀏覽器不要執行與事件關聯的預設動作，這是第二種方式 }; </script> <!--事件傳播：如果不阻止事件傳播，那麼點選裡面的div時會有兩次彈窗--> <div class="outer"> <div class="inner"></div> </div> <script> var ele1=document.getElementsByClassName('inner')[0]; ele1.onclick=function (event) { // event物件的使用，必須用這種事件繫結方法 alert('I am inner'); event.stopPropagation(); // stopPropagation()阻止事件向外層div傳播 }; var ele2=document.getElementsByClassName('outer')[0]; ele2.onclick=function () { alert('I am outer'); }; </script> </body> </html>while True: print('studying...')