js中基本事件的总结(onclick、onblur、onchange等) |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
本文标签：js基本事件 js中的基本事件总结： 特定的场景下发生的一个动作：事件；事件=函数（），事件发生会触发函数执行 。 一、什么是事件？事件是用户在网页上的交互行为（如点击、滚动、按键）或浏览器自动触发的行为（如页面加载完成） 。JavaScript 通过 事件监听 来响应这些行为 。 二、常见事件类型
三、 三、事件处理的三种方式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('第二次点击'); // 可以绑定多个处理函数
});优点：支持多个监听器、可控制事件阶段（捕获/冒泡） 四、事件对象 (event)事件处理函数会自动接收一个 element.addEventListener('click', function(event) {
console.log(event.target); // 触发事件的元素
console.log(event.clientX, event.clientY); // 鼠标坐标
event.preventDefault(); // 阻止默认行为（如表单提交）
event.stopPropagation(); // 阻止事件冒泡
});五、事件冒泡与捕获
// 第三个参数为 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);
});七、事件委托利用事件冒泡，将事件监听绑定到父元素，处理动态子元素： <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);
}
});
// 动态添加的 li 元素也会自动拥有事件响应八、其他要点解绑事件：使用 const handler = () => { console.log('Click') };
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);匿名函数问题：匿名函数无法通过 被动事件监听器：优化滚动性能 window.addEventListener('scroll', function(e) {
// 逻辑代码
}, { passive: true });通过掌握这些基础知识，你可以实现丰富的交互功能！建议通过实际项目练习加深理解 。 |
