JavaScript事件处理

<button onclick="handleClick()">点击我</button>
<button onmouseover="handleMouseOver()">悬停我</button>

<script>
function handleClick() {
    alert('按钮被点击了!');
}

function handleMouseOver() {
    console.log('鼠标悬停在按钮上');
}
</script>

const button = document.getElementById('myButton');
button.onclick = function() {
    alert('按钮被点击了!');
};

button.onmouseover = function() {
    console.log('鼠标悬停在按钮上');
};

// 移除事件处理器
button.onclick = null;

const button = document.getElementById('myButton');

// 添加事件监听器
button.addEventListener('click', function(event) {
    console.log('按钮被点击了!', event);
});

// 可以为同一事件添加多个处理函数
button.addEventListener('click', function() {
    console.log('另一个点击处理函数');
});

// 使用命名函数
function handleClick(event) {
    console.log('按钮被点击了', event.target);
}
button.addEventListener('click', handleClick);

// 移除事件监听器
button.removeEventListener('click', handleClick);

// 一次性事件监听器
button.addEventListener('click', function handler(event) {
    console.log('这个函数只会执行一次');
    button.removeEventListener('click', handler);
});

document.addEventListener('click', function(event) {
    // 事件基本信息
    console.log('事件类型:', event.type);
    console.log('目标元素:', event.target);
    console.log('当前元素:', event.currentTarget);
    console.log('事件阶段:', event.eventPhase); // 1:捕获 2:目标 3:冒泡
    
    // 鼠标事件属性
    console.log('鼠标位置 X:', event.clientX, 'Y:', event.clientY);
    console.log('页面位置 X:', event.pageX, 'Y:', event.pageY);
    console.log('屏幕位置 X:', event.screenX, 'Y:', event.screenY);
    console.log('鼠标按钮:', event.button); // 0:左键 1:中键 2:右键
    
    // 键盘事件属性
    console.log('按键:', event.key);
    console.log('按键代码:', event.code);
    console.log('是否按下Ctrl:', event.ctrlKey);
    console.log('是否按下Shift:', event.shiftKey);
    console.log('是否按下Alt:', event.altKey);
    console.log('是否按下Meta:', event.metaKey);
    
    // 表单事件属性
    console.log('输入值:', event.target.value);
});

function handleEvent(event) {
    // 阻止事件的默认行为
    event.preventDefault();
    
    // 停止事件传播（阻止冒泡和捕获）
    event.stopPropagation();
    
    // 立即停止事件传播到其他监听器
    event.stopImmediatePropagation();
}

// 示例：阻止链接跳转
document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();
    console.log('链接点击被阻止');
});

// 示例：停止事件冒泡
document.getElementById('inner').addEventListener('click', function(e) {
    e.stopPropagation();
    console.log('内部元素点击，不会冒泡到父元素');
});

<div id="grandparent">
    <div id="parent">
        <button id="child">点击我</button>
    </div>
</div>

<script>
// 捕获阶段（从上到下）
document.getElementById('grandparent').addEventListener('click', function() {
    console.log('爷爷元素 - 捕获阶段');
}, true);

document.getElementById('parent').addEventListener('click', function() {
    console.log('父元素 - 捕获阶段');
}, true);

// 目标阶段
document.getElementById('child').addEventListener('click', function() {
    console.log('子元素 - 目标阶段');
});

// 冒泡阶段（从下到上）- 默认
document.getElementById('parent').addEventListener('click', function() {
    console.log('父元素 - 冒泡阶段');
}, false);

document.getElementById('grandparent').addEventListener('click', function() {
    console.log('爷爷元素 - 冒泡阶段');
}, false);

// 点击按钮时的输出顺序:
// 1. 爷爷元素 - 捕获阶段
// 2. 父元素 - 捕获阶段  
// 3. 子元素 - 目标阶段
// 4. 父元素 - 冒泡阶段
// 5. 爷爷元素 - 冒泡阶段
</script>

function handler(event) {
    event.stopPropagation(); // 阻止继续传播
    event.preventDefault();  // 阻止默认行为
}

// 只监听捕获阶段
element.addEventListener('click', handler, true);

// 只监听冒泡阶段（默认）
element.addEventListener('click', handler, false);
element.addEventListener('click', handler); // 等同于false

<ul id="myList">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

<button id="addItem">添加项目</button>

<script>
// 使用事件委托处理动态列表
document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('点击了:', event.target.textContent);
        event.target.classList.toggle('selected');
    }
});

// 添加新项目
document.getElementById('addItem').addEventListener('click', function() {
    const list = document.getElementById('myList');
    const newItem = document.createElement('li');
    newItem.textContent = `项目 ${list.children.length + 1}`;
    list.appendChild(newItem);
});

// 传统方式（不推荐）- 需要为每个元素单独添加监听器
/*
const items = document.querySelectorAll('#myList li');
items.forEach(item => {
    item.addEventListener('click', function() {
        console.log('点击了:', this.textContent);
        this.classList.toggle('selected');
    });
});
*/
</script>

// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
    detail: {
        message: '这是自定义事件的数据',
        time: new Date()
    },
    bubbles: true,
    cancelable: true
});

// 监听自定义事件
document.addEventListener('myEvent', function(event) {
    console.log('自定义事件触发:', event.detail.message);
    console.log('时间:', event.detail.time);
});

// 触发自定义事件
document.dispatchEvent(customEvent);

// 在特定元素上触发
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    this.dispatchEvent(customEvent);
});

// 使用Event构造函数（简单自定义事件）
const simpleEvent = new Event('simpleEvent');
document.addEventListener('simpleEvent', function() {
    console.log('简单自定义事件触发');
});
document.dispatchEvent(simpleEvent);

// 使用事件委托
document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.matches('.item')) {
        handleItemClick(e);
    }
});

// 节流高频事件
function throttle(func, delay) {
    let timeoutId;
    return function(...args) {
        if (!timeoutId) {
            timeoutId = setTimeout(() => {
                func.apply(this, args);
                timeoutId = null;
            }, delay);
        }
    };
}

window.addEventListener('resize', throttle(function() {
    console.log('窗口大小改变');
}, 250));

// 防抖输入事件
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

document.getElementById('search').addEventListener('input', 
    debounce(function(e) {
        console.log('搜索:', e.target.value);
    }, 300)
);

// 使用被动事件监听器（提高滚动性能）
document.addEventListener('touchstart', function(e) {
    // 处理触摸事件
}, { passive: true });

// 及时移除不需要的事件监听器
const button = document.getElementById('tempButton');
const handler = function() { /* ... */ };
button.addEventListener('click', handler);

// 当不再需要时
button.removeEventListener('click', handler);