安徽省建设干校网站哈尔滨百度网络推广
目录
前言
解绑事件
语法
鼠标经过事件的区别
鼠标经过事件
示例代码
两种注册事件的区别
总结
前言
人道洛阳花似锦，偏我来时不逢春
解绑事件
on事件方式，直接使用null覆盖就可以实现事件的解绑
语法
btn.onclick = function(){alert('点击了')
}
btn.onclick = null;const ben = document.querySelector('button');ben.addEventListener('click', function fn() {console.log('click');})ben.removeEventListener('click', fn);注意：匿名函数无法被解绑
鼠标经过事件的区别
鼠标经过事件
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dad {width: 200px;height: 200px;background-color: red;}
.son {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><button id="myButton">点击</button><div class="dad"><div class="son"></div></div><script>const ben = document.querySelector('#myButton');const dad = document.querySelector('.dad');const son = document.querySelector('.son');
// 定义命名函数function handleClick() {console.log('click');}
function handleMouseOver() {console.log('over');}
function handleMouseOut() {console.log('out');}
// 添加事件监听器ben.addEventListener('click', handleClick);dad.addEventListener('mouseenter', handleMouseOver);dad.addEventListener('mouseleave', handleMouseOut);
// 示例：在按钮点击后移除事件监听器ben.addEventListener('click', function () {ben.removeEventListener('click', handleClick);dad.removeEventListener('mouseenter', handleMouseOver);dad.removeEventListener('mouseleave', handleMouseOut);console.log('事件已解绑');});</script>
</body>
</html>两种注册事件的区别
传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段执行的事件
监听注册(L2)
语法: addEventListener(事件类型,事件处理函数,是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑
总结
春风得意马蹄疾，一日观尽长安花