亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js中基本事件的總結(jié)(onclick、onblur、onchange等)

 更新時間：2025年02月11日 16:53:53   投稿：mdxy-dxy  
事件是用戶在網(wǎng)頁上的交互行為如點擊、滾動、按鍵等,JavaScript通過事件監(jiān)聽來響應這些行為,這里為大家分享一下,js中的基本事件,方便大家選擇合適的觸發(fā)形式

js中的基本事件總結(jié)：

特定的場景下發(fā)生的一個動作：事件；事件=函數(shù)（），事件發(fā)生會觸發(fā)函數(shù)執(zhí)行。\

一、什么是事件？

事件是用戶在網(wǎng)頁上的交互行為（如點擊、滾動、按鍵）或瀏覽器自動觸發(fā)的行為（如頁面加載完成）。JavaScript 通過 事件監(jiān)聽 來響應這些行為。

二、常見事件類型

屬性

當以下情況發(fā)生時，出現(xiàn)此事件

FF

N

IE

onabort

圖像加載被中斷

1

3

4

onblur

元素失去焦點

1

2

3

onchange

用戶改變域的內(nèi)容

1

2

3

onclick

鼠標點擊某個對象

1

2

3

ondblclick

鼠標雙擊某個對象

1

4

4

onerror

當加載文檔或圖像時發(fā)生某個錯誤

1

3

4

onfocus

元素獲得焦點

1

2

3

onkeydown

某個鍵盤的鍵被按下

1

4

3

onkeypress

某個鍵盤的鍵被按下或按住

1

4

3

onkeyup

某個鍵盤的鍵被松開

1

4

3

onload

某個頁面或圖像被完成加載

1

2

3

onmousedown

某個鼠標按鍵被按下

1

4

4

onmousemove

鼠標被移動

1

6

3

onmouseout

鼠標從某元素移開

1

4

4

onmouseover

鼠標被移到某元素之上

1

2

3

onmouseup

某個鼠標按鍵被松開

1

4

4

onreset

重置按鈕被點擊

1

3

4

onresize

窗口或框架被調(diào)整尺寸

1

4

4

onselect

文本被選定

1

2

3

onsubmit

提交按鈕被點擊

1

2

3

onunload

用戶退出頁面

1

2

3

三、

三、事件處理的三種方式

1. HTML 屬性方式（不推薦）

直接在 HTML 元素中定義事件：

<button onclick="alert('Clicked!')">點擊我</button>

運行 HTML

2. DOM 屬性方式

通過 JavaScript 為 DOM 元素屬性賦值：

const btn = document.querySelector('button');
btn.onclick = function() {
  console.log('按鈕被點擊');
};
// 缺點：無法綁定多個相同事件

3. addEventListener（推薦）

btn.addEventListener('click', function(event) {
  console.log('第一次點擊');
});

btn.addEventListener('click', () => {
  console.log('第二次點擊'); // 可以綁定多個處理函數(shù)
});

優(yōu)點：支持多個監(jiān)聽器、可控制事件階段（捕獲/冒泡）

四、事件對象 (event)

事件處理函數(shù)會自動接收一個 event 對象，包含事件相關信息：

element.addEventListener('click', function(event) {
  console.log(event.target); // 觸發(fā)事件的元素
  console.log(event.clientX, event.clientY); // 鼠標坐標
  event.preventDefault(); // 阻止默認行為（如表單提交）
  event.stopPropagation(); // 阻止事件冒泡
});

五、事件冒泡與捕獲

  • 冒泡 (Bubbling)：事件從目標元素向上傳遞到根元素（默認階段）。
  • 捕獲 (Capturing)：事件從根元素向下傳遞到目標元素。
// 第三個參數(shù)為 true 表示捕獲階段，false 表示冒泡階段（默認）
parent.addEventListener('click', () => {
  console.log('父元素捕獲階段');
}, true);

child.addEventListener('click', () => {
  console.log('子元素冒泡階段');
});

六、表單事件示例

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表單默認提交
  const input = document.querySelector('#username');
  console.log('輸入的值：', input.value);
});

七、事件委托

利用事件冒泡，將事件監(jiān)聽綁定到父元素，處理動態(tài)子元素：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

運行 HTML

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('點擊了：', event.target.textContent);
  }
});
// 動態(tài)添加的 li 元素也會自動擁有事件響應

八、其他要點

解綁事件：使用 removeEventListener

const handler = () => { console.log('Click') };
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);

匿名函數(shù)問題：匿名函數(shù)無法通過 removeEventListener 解綁。

被動事件監(jiān)聽器：優(yōu)化滾動性能

window.addEventListener('scroll', function(e) {
  // 邏輯代碼
}, { passive: true });

通過掌握這些基礎知識，你可以實現(xiàn)豐富的交互功能！建議通過實際項目練習加深理解。

相關文章

最新評論