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 元素中定义事件：
1 | <button>点击我</button> |
运行 HTML
2. DOM 属性方式
通过 JavaScript 为 DOM 元素属性赋值：
1 2 3 4 5 | const btn = document.querySelector('button');btn.onclick = function() { console.log('按钮被点击');};// 缺点：无法绑定多个相同事件 |
3. addEventListener（推荐）
1 2 3 4 5 6 7 | btn.addEventListener('click', function(event) { console.log('第一次点击');});btn.addEventListener('click', () => { console.log('第二次点击'); // 可以绑定多个处理函数}); |
优点：支持多个监听器、可控制事件阶段（捕获/冒泡）
四、事件对象 (event)
事件处理函数会自动接收一个 event 对象，包含事件相关信息：
1 2 3 4 5 6 | element.addEventListener('click', function(event) { console.log(event.target); // 触发事件的元素 console.log(event.clientX, event.clientY); // 鼠标坐标 event.preventDefault(); // 阻止默认行为（如表单提交） event.stopPropagation(); // 阻止事件冒泡}); |
五、事件冒泡与捕获
- 冒泡 (Bubbling)：事件从目标元素向上传递到根元素（默认阶段）。
- 捕获 (Capturing)：事件从根元素向下传递到目标元素。
1 2 3 4 5 6 7 8 | // 第三个参数为 true 表示捕获阶段，false 表示冒泡阶段（默认）parent.addEventListener('click', () => { console.log('父元素捕获阶段');}, true);child.addEventListener('click', () => { console.log('子元素冒泡阶段');}); |
六、表单事件示例
1 2 3 4 5 6 | const form = document.querySelector('form');form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 const input = document.querySelector('#username'); console.log('输入的值：', input.value);}); |
七、事件委托
利用事件冒泡，将事件监听绑定到父元素，处理动态子元素：
1 |
- Item 1
- Item 2
运行 HTML
1 2 3 4 5 6 | document.getElementById('list').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('点击了：', event.target.textContent); }});// 动态添加的 li 元素也会自动拥有事件响应 |
八、其他要点
解绑事件：使用 removeEventListener
1 2 3 | const handler = () => { console.log('Click') };btn.addEventListener('click', handler);btn.removeEventListener('click', handler); |
匿名函数问题：匿名函数无法通过 removeEventListener 解绑。
被动事件监听器：优化滚动性能
1 2 3 | window.addEventListener('scroll', function(e) { // 逻辑代码}, { passive: true }); |
通过掌握这些基础知识，你可以实现丰富的交互功能！建议通过实际项目练习加深理解。
