溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript中DOM操作常用事件實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript中DOM操作常用事件實例分析”吧！
由此可以看出事件分三個部分：
事件源頭： 也就是要操作的元素是誰。
事件類型： 也就是事件觸發條件，比如鼠標點擊以及鼠標滑過等。
事件處理： 如果觸發了這個行為，如何操作，以及操作結果。
現在說一下常用的事件，這個不是全部的事件，如果需要了解全部的事件可以看官方文檔。
常用的事件有：
| 事件類型 | 描述 |
|---|---|
| onblur | 對象失去焦點的時候觸發 |
| onfous | 當獲得焦點的時候觸發 |
| onclick | 用戶鼠標左鍵點擊的時候觸發 |
| ondblclick | 用戶雙擊時候觸發 |
| onchange | 當對象或者選中區內容改變的時候觸發 |
| onkeyup | 當用戶釋放鍵盤按鍵時候觸發（還有兩個事件onkeydown和onkeypress） |
| onload | 瀏覽器加載完畢后立即觸發 |
| onmouseout | 當用戶將鼠標移出對象范圍時觸發 |
| onmouseover | 當用戶數鼠標在對象上滑動的時候觸發 |
| onselect | 當當前選擇區改變時觸發 |
| onunload | 對象卸載前理解觸發 |
下面演示的時候會有些涉及到涉及到一些屬性的變化，可以先不關心而是關系這個事件是如何觸發發。后面單獨為再寫一篇關于屬性的修改以及賦值。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
</head>
<body>
<!--可以在標簽上直接綁定事件類型-->
<label>姓名</label> <input id="testid" type="text" onfocus="test_foncus()" value="請輸入">
<script>
var element=document.getElementById("testid");
function test_foncus() {
if (element.value=="請輸入"){
element.value="";
}
}
// 也可以主頁綁定事件類型
element.onblur=function () {
console.log(element.value);
if (element.value==""){
element.value="請輸入";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="testid" ></div>
<script>
var element=document.getElementById("testid");
element.onmouseover=function () {
element.style='background-color:pink;';
}
element.onmouseout=function () {
element.style='background-color:blue;';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
<style>
</style>
</head>
<body>
<button id="testid">點擊按鈕</button>
<script>
var element=document.getElementById("testid");
element.onclick=function () {
confirm("你確定你要點擊？")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
<style>
</style>
</head>
<body>
<div id="testid1"></div>
<hr>
<div id="testid2"></div>
<script>
var element1=document.getElementById("testid1");
var element2=document.getElementById("testid2");
// 一般onload加載是監控的是這個頁面的加載所以一般都是window調用
window.onload=function () {
element1.innerText="innerText插入";
element2.innerHTML="<h2>innerHTML插入</h2>"
}
</script>
</body>
</html>
補充 innerText和innerHTML區別
innerText 在頁面上輸出文本內容，直接將標簽刪除
innerHTML在頁面上輸出標簽效果以及其內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
element.onkeyup=function () {
alert("你在輸入內容啊")
}
</script>
</body>
</html>
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
// 到鼠標離開的時候就會變得是否內容修改
element.onchange=function () {
alert("你在修改嗎？")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試文檔</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text" value="點擊兩次選選擇">
<script>
var element=document.getElementById("testid");
element.onselect=function () {
alert(element.value);
}
</script>
</body>
</html>
感謝各位的閱讀，以上就是“JavaScript中DOM操作常用事件實例分析”的內容了，經過本文的學習后，相信大家對JavaScript中DOM操作常用事件實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
