JavaScript 學習-29.HTML DOM 事件
阿新 • • 發佈：2022-05-28
前言
HTML DOM 事件允許Javascript在HTML文件元素中註冊不同事件處理程式。
常用的一些事件
| 事件名稱 | 作用 |
|---|---|
| onload | 通常用於 元素，在頁面完全載入後(包括圖片、css檔案等等。)執行指令碼程式碼。 |
| onunload | 使用者退出頁面。 ( 和 ) |
| onclick | 當用戶點選某個物件時呼叫的事件控制代碼。 |
| onmouseover | 滑鼠移到某元素之上。 |
| onmouseout | 滑鼠從某元素移開。 |
| ondblclick | 當用戶雙擊某個物件時呼叫的事件控制代碼。 |
| onkeydown | 某個鍵盤按鍵被按下。 |
| onkeypress | 某個鍵盤按鍵被按下並鬆開。 |
| onkeyup | 某個鍵盤按鍵被鬆開。 |
| onfocus | 元素獲取焦點時觸發 |
| onblur | 元素失去焦點時觸發 |
| onchange | 該事件在表單元素的內容改變時觸發 <input>, <keygen>, <select>, 和 <textarea>
|
| onfocus | 元素獲取焦點時觸發 |
| onsubmit | 表單提交時觸發 |
onload 載入頁面
onload 通常用於 <body> 元素，在頁面完全載入後(包括圖片、css檔案等等。)執行指令碼程式碼。
支援onload 的標籤有
- body
- frame
- frameset
- iframe
- img
- link
- script
- style
事件繫結有2種方式
一、在 HTML body 中:
<body onload="func()">
二、在 script 中
window.onload=function(){do something...};
使用示例
<body> <h1>onload 載入示例</h1> <div id="user"> <p id="demo" class="text-info">Hello</p> <p>Hello</p> </div> <script> window.onload = function () { // 頁面載入完彈出alert alert('頁面載入完了。。。') } </script> </body>
圖片載入完成後觸發onload示例
<head>
<meta charset="utf-8">
<meta name="referrer" content="no-referrer" />
<title>hello</title>
<script>
function load_something() {
alert('圖片載入完成...')
}
</script>
</head>
<body>
<h1>onload 載入示例</h1>
<img src="https://images2015.cnblogs.com/blog/1070438/201704/1070438-20170417224839696-1584175751.jpg" onload="load_something();">
</body>
onclick 點選事件
onclick 點選事件 ,當按鈕被點選時執行
html中新增點選事件
<button onclick="func()">點我</button>
script 新增點選事件
element.onclick=function(){do something...};
使用示例
<head>
<meta charset="utf-8">
<title>hello</title>
<script>
function click_do_something() {
alert('點選按鈕do something...')
}
</script>
</head>
<body>
<h1>onclick 點選示例</h1>
<button id="btn" onclick="click_do_something();">點我</button>
</body>
或者
<body>
<h1>onclick 點選示例</h1>
<button id="btn">點我</button>
<script>
ele = document.getElementById('btn')
ele.onclick = function () {
alert('點我 do something...')
}
</script>
</body>
onfocus 和 onblur
onfocus 獲取焦點的時候觸發
onblur 當元素失去焦點的時候觸發
使用示例
<body>
<h1>onfocus 獲取焦點 和 onblur 失去焦點</h1>
<form id="form-user">
<label for="user-id">使用者名稱</label>
<input id="user-id" name="username" value="yoyo">
<label for="user-psw">密碼</label>
<input id="user-psw" name="password" value="">
</form>
<script>
ele = document.getElementById('user-id')
ele.onfocus=function () {
console.log('獲取元素的焦點了...')
}
ele.onblur=function () {
console.log('失去元素的焦點了...')
}
</script>
</body>
滑鼠點輸入框，獲取焦點
滑鼠移開輸入框，失去焦點