113_js筆記15_事件的dom操作
阿新 • • 發佈：2018-11-30
HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應
一，標籤的預設事件屬性
- 當用戶滑鼠點選，按下，擡起：onmousedown、onmouseup 以及 onclick 事件
-
onClick事件寫法1： //標籤 <button onclick="displayDate()">1，onClick點選</button> //事件 function displayDate(){ document.getElementById("demo").innerHTML=Date(); } onClick事件寫法2： //標籤 <button id="myBtn">1，onClick點選</button> //事件 document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } 新增多個事件：按下，擡起，點選 <div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="mClick(this)" >按下，擡起，點選</div> function mDown(obj){ obj.style.backgroundColor = 'red'; } function mUp(obj){ obj.style.backgroundColor = 'yellow'; } function mClick(obj){ obj.style.backgroundColor = 'blue'; }
-
- 當輸入欄位被改變時：onchange 事件
-
// 標籤 <input type="text" id="input" onchange="myFunction()"> // onchange 事件 function myFunction(){ var x=document.getElementById("input"); x.value=x.value.toUpperCase(); };
-
- 當網頁已載入時：onload 和 onunload 事件
-
// 事件寫在body標籤裡邊 <body onload="checkCookies()"> // onload 和 onunload 事件 function checkCookies(){ if (navigator.cookieEnabled==true){ alert("Cookies 可用") } else{ alert("Cookies 不可用") }; }
-
- 當滑鼠移動到元素上和離開時：onmouseover 和 onmouseout 事件
-
//標籤 <div onmouseover="mOver(this)" onmouseout="mOut(this)" >滑鼠放在上邊和離開</div> // onmouseover 和 onmouseout 事件 function mOver(obj){ obj.innerHTML="Thank You" } function mOut(obj){ obj.innerHTML="Mouse Over Me" }
-
二，新增和移除事件的控制代碼
- 新增事件： addEventListener
- 控制代碼寫在語句中
-
// 標籤 <button id="myBtn2">新增事件控制代碼1</button> // 新增事件控制代碼1：直接寫在語句中 document.getElementById("myBtn2").addEventListener("click", function(){ alert("Hello World!");});
-
- 控制代碼寫在函式中
-
// 標籤 <button id="myBtn3">新增事件控制代碼2</button> // 新增事件控制代碼2：寫在函式中 document.getElementById("myBtn3").addEventListener("click", myFunction2); function myFunction2() { alert ("Hello World!"); }
-
- 事件的冒泡和捕獲
-
//標籤 <div id="myDiv" style="background-color:aquamarine"> <p id="myP">冒泡演示：先內後外</p> </div><br> <div id="myDiv2" style="background-color:gold;"> <p id="myP2">捕獲演示：先外後內 </p> </div> //事件 /* 事件的冒泡：內部元素的事件會先被觸發，然後再觸發外部元素 事件的捕獲，外部元素的事件會先被觸發，然後才會觸發內部元素的事件 */ document.getElementById("myP").addEventListener("click", function() { alert("你點選了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你點選了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你點選了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你點選了 DIV2 元素 !"); }, true);
-
- 控制代碼寫在語句中
- 移除事件：removeEventListener()