12.事件模型
事件模型
JavaScript中的两种事件模型:DOM0,DOM2。
DOM0级事件模型
DOM0级事件模型是早期的事件模型,所有的浏览器都支持。
注册事件:在事件类型前面加on,如:onclick、onmouseover ......
解除事件:dom.onclick = null;
每个DOM对象只能注册一个相同类型的事件,注册多个则会发生覆盖,只执行最后一个事件函数。
DOM2级事件模型
DOM2级事件模型是较新的事件模型,IE8及以下是不支持的。
注册事件:
addEventListener(type,fn,useCapture) 事件监
参数:type----事件类型,例:click
fn----事件处理函数
useCapture----布尔值true或false
( true表示事件捕获,false表示事件冒泡 )
为了兼容浏览器,第三个参数一般设置为false
解除事件:removeEventListener(type, fn, useCapture)
每个DOM对象可以注册多个相同类型的事件,不会发生覆盖,会依次的执行各个事件函数。
因为IE只支持事件冒泡,不支持事件捕获,所以它也不支持addEventListener( )方法
IE提供了另一个函数attachEvent( type , fn )
参数:type----事件类型,例:onclick
fn----事件处理函数
没有第三个参数
解除事件:detachEvent( type , fn )
封装事件监听函数(兼容)
事件流
事件流:事件的流向,事件的执行顺序。
当子元素和父元素都定义了相同的事件,比如都定义了onclick事件,
点击子元素时,父元素的onclick事件也会被触发。
JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。
IE:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡
网景:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(target)触发,即事件捕获
W3C将两者进行中和,在任何W3C的事件模型中,事件先进入捕获阶段,再进入冒泡阶段。
不管是事件冒泡,还是事件捕获,都有传播的特征!
阻止事件传播
event.stopPropagation() // W3C
event.cancelBubble = true // IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
事件委托
什么是事件:通俗讲onclick,onmouseover,onmouseout等就是事件。
什么是委托:就是这个事件本来是加在某些元素上的,而你却加到其他元素上来完成这个事件。
原理:利用事件传播的特征。
具体来说,事件委托就是事件目标自身不处理事件,而是把处理事件委托给其父元素,甚至是document 来完成。
优点:
1. 提高性能和效率
2. 减少事件注册,节省内存占用
3. 未来元素无需再次注册事件
......
鼠标滚轮事件
在非火狐浏览器中
鼠标滚轮事件:onmousewheel
示例:
box.onmousewheel=function (ev){
var event=ev||window.event;
alert(event.wheelDelta);
};
在火狐浏览器中
鼠标滚轮事件:DOMMouseScroll
示例:
box.addEventListener('DOMMouseScroll',function (ev){
alert(ev.detail);
},false)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)