diy做网站,上海设计网站与,江宁住房和城乡建设局网站,网站如何添加数据目录
前言
解绑事件
语法
鼠标经过事件的区别
鼠标经过事件
示例代码
两种注册事件的区别
总结 前言
人道洛阳花似锦#xff0c;偏我来时不逢春 解绑事件
on事件方式#xff0c;直接使用null覆盖就可以实现事件的解绑
语法
btn.onclick function(){alert(点击了…目录
前言
解绑事件
语法
鼠标经过事件的区别
鼠标经过事件
示例代码
两种注册事件的区别
总结 前言
人道洛阳花似锦偏我来时不逢春 解绑事件
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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.dad {width: 200px;height: 200px;background-color: red;}
.son {width: 100px;height: 100px;background-color: blue;}/style
/head
bodybutton idmyButton点击/buttondiv classdaddiv classson/div/divscriptconst 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(事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑 总结
春风得意马蹄疾一日观尽长安花
