團隊名稱-衝刺日誌(第七天)
阿新 • • 發佈：2021-06-27
事件概述
HTML 事件的例子：
- 當用戶點選滑鼠時
- 當網頁已載入時
- 當圖片已載入時
- 當滑鼠移動到元素上時
- 當輸入欄位被改變時
- 當 HTML 表單被提交時
- 當用戶觸發按鍵時
JavaScript 使我們有能力建立動態頁面，而事件是可以被 JavaScript 偵測到的行為。
簡單理解： 觸發--- 響應機制。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在使用者點選某按鈕時產生一個事件，然後去執行某些操作。
事件三要素
-
事件源 （誰）
-
事件型別 （什麼事件）
-
事件處理程式 （做啥）
事件執行過程
- 獲取事件源（按鈕）
- 註冊事件（繫結事件）
- 新增事件處理程式
常用事件型別
滑鼠事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onclick | 當用戶點選某個物件時呼叫的事件控制代碼。 | 2 |
| oncontextmenu | 在使用者點選滑鼠右鍵開啟上下文選單時觸發 | |
| ondblclick | 當用戶雙擊某個物件時呼叫的事件控制代碼。 | 2 |
| onmousedown | 滑鼠按鈕被按下。 | 2 |
| onmouseenter | 當滑鼠指標移動到元素上時觸發。 | 2 |
| onmouseleave | 當滑鼠指標移出元素時觸發 | 2 |
| onmousemove | 滑鼠被移動。 | 2 |
| onmouseover | 滑鼠移到某元素之上。 | 2 |
| onmouseout | 滑鼠從某元素移開。 | 2 |
| onmouseup | 滑鼠按鍵被鬆開。 |
鍵盤事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某個鍵盤按鍵被按下。 | 2 |
| onkeypress | 某個鍵盤按鍵被按下並鬆開。 | 2 |
| onkeyup | 某個鍵盤按鍵被鬆開。 |
表單事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onblur | 元素失去焦點時觸發 | 2 |
| onchange | 該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>) |
2 |
| onfocus | 元素獲取焦點時觸發 | 2 |
| onfocusin | 元素即將獲取焦點時觸發 | 2 |
| onfocusout | 元素即將失去焦點時觸發 | 2 |
| oninput | 元素獲取使用者輸入時觸發 | 3 |
| onreset | 表單重置時觸發 | 2 |
| onsearch | 使用者向搜尋域輸入文字時觸發 ( <input="search">) | |
| onselect | 使用者選取文字時觸發 ( <input> 和 <textarea>) |
2 |
| onsubmit | 表單提交時觸發 |
事件處理
更改元素內容
element.innerText
從起始位置到終止位置的內容, 但它去除 html 標籤， 同時空格和換行也會去掉
element.innerHTML
起始位置到終止位置的全部內容，包括 html 標籤，同時保留空格和換行
操作元素屬性
-
innerText、innerHTML 改變元素內容
-
src、href
-
id、alt、title
表單元素的屬性操作
type、value、checked、selected、disabled
樣式屬性操作
我們可以通過 JS 修改元素的大小、顏色、位置等樣式。
element.style //行內樣式操
element.className
<!--element.style-->
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. 獲取元素
var div = document.querySelector('div');
// 2. 註冊事件 處理程式
div.onclick = function() {
// div.style裡面的屬性 採取駝峰命名法
//this表示當前物件，即div
this.style.backgroundColor = 'purple';
this.style.width = '250px';
//box.style.display = 'none'
}
</script>
</body>
注意：
- JS 裡面的樣式採取駝峰命名法 比如 fontSize、 backgroundColor
- JS 修改 style 樣式操作，產生的是行內樣式，CSS 權重比較高
<!--element.className-->
<head>
<style>
.first {
width: 200px;
height: 200px;
background-color: pink;
}
.change {
background-color: red;
}
</style>
</head>
<body>
<div class="first">123</div>
<input type="button" id="btn"></input>
<script>
let btn = document.getElementById('btn');
let box = document.querySelector('.first')
btn.onclick = function () {
box.className = 'change'
//若想同時包含多個樣式
box.className = 'change first'
}
</script>
</body>
案例
登入框顯示/隱藏密碼
<div id="box">
<input type="password" id="pwd">
<img src="images/close.png">
</div>
<script>
//獲取事件源
let input = document.getElementById('pwd');
let img = document.querySelector('img');
//註冊事件：點選事件
//新增事件處理程式：1.切換輸入框型別 2.切換圖片
let flag = 0
img.onclick = function () {
if(flag == 0){
input.type = 'text'
img.src = 'images/open.png'
flag = 1
} else {
if(flag == 1){
input.type = 'password'
img.src = 'images/close.png'
flag = 0
}
}
}
</script>
<style>
#box {
margin: 100px auto;
position: relative;
width: 400px;
border-bottom: 1px solid #ccc ;
}
div input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>