js中基本事件的总结(onclick、onblur、onchange等】事件是用户在网页上的交互行为如点击、滚动、按键等

事件是用户在网页上的交互行为如点击、滚动、按键等,JavaScript通过事件监听来响应这些行为,这里为大家分享一下,js中的基本事件,方便大家选择合适的触发形式

一、什么是事件？

事件是用户在网页上的交互行为（如点击、滚动、按键）或浏览器自动触发的行为（如页面加载完成）。JavaScript 通过 事件监听 来响应这些行为。

二、常见事件类型

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	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	窗口或框架被调整尺寸	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（推荐）


```js
````btn.addEventListener(``'click'`` ,  ``function``(event) {`

`  ``console.log(``'第一次点击'``);`

`});`

 

`btn.addEventListener(``'click'``, () => {`

`  ``console.log(``'第二次点击'`` );  ``//`

优点：支持多个监听器、可控制事件阶段（捕获/冒泡）

四、事件对象 (event)

事件处理函数会自动接收一个 event 对象，包含事件相关信息： ``


```js
````element.addEventListener('click', function(event) {`

`  ``console.log(event.target); // 触发事件的元素`

`  ``console.log(event.clientX, event.clientY); // 鼠标坐标`

`  ``event.preventDefault(); // 阻止默认行为（如表单提交）`

`  ``event.stopPropagation(); // 阻止事件冒泡`

`});`

五、事件冒泡与捕获

冒泡 (Bubbling) ：事件从目标元素向上传递到根元素（默认阶段）。
捕获 (Capturing) ：事件从根元素向下传递到目标元素 ``


```js
```// 第三个参数为 true 表示捕获阶段，false 表示冒泡阶段（默认）
parent.addEventListener('click', () => {
  console.log('父元素捕获阶段');
}, true);
 
child.addEventListener('click', () => {
  console.log('子元素冒泡阶段');
});

```js

六、表单事件示例

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

```js

七、事件委托

利用事件冒泡，将事件监听绑定到父元素，处理动态子元素： ``

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

运行 HTML ``


```js
```document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('点击了：', event.target.textContent);
  }
});
// 动态添加的 li 元素也会自动拥有事件响应

八、其他要点解绑事件：使用 removeEventListener ``


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

匿名函数问题：匿名函数无法通过 removeEventListener 解绑。

被动事件监听器：优化滚动性能 ``


```js
```window.addEventListener('scroll', function(e) {
  // 逻辑代码
}, { passive: true });

通过掌握这些基础知识，你可以实现丰富的交互功能！建议通过实际项目练习加深理解。

js中基本事件的总结(onclick、onblur、onchange等】

目录