什么是javascript事件模型
2024-03-15 16:58:53
JavaScript事件模型是用于处理用户与网页交互时触发事件的机制，不同浏览器支持三种主要模型：原始事件模型、DOM2事件模型和IE事件模型。
原始事件模型
该模型被所有浏览器支持，事件类型分为“输入事件”（如onclick）和“语义事件”（如onsubmit）。事件处理程序可通过两种方式注册：
1. HTML属性方式：直接在HTML标签中定义事件处理函数，例如<input onclick="alert('thanks')">。
2. JavaScript属性方式：通过DOM对象的属性绑定事件，例如document.f1.b1.onclick = function(){alert('thanks')}。
事件处理程序可返回false阻止默认行为（如onsubmit），但部分事件（如超链接的mouseover）需返回true以允许默认行为（如修改window.status）。
DOM2事件模型
由W3C制定，被除IE外的主流浏览器支持。其核心特点是事件传播分为三个阶段：
1. 捕获阶段（Capturing Phase）：事件从document向下传播至目标元素，祖先元素可在此阶段注册处理函数。
2. 目标阶段（Target Phase）：事件到达目标元素，执行其处理函数。
3. 冒泡阶段（Bubbling Phase）：事件从目标元素向上传播至document，但部分事件（如submit）不冒泡。
可通过event.stopPropagation()停止传播，或preventDefault()阻止默认行为。事件注册使用addEventListener("eventType", handler, true/false)，第三个参数为true时在捕获阶段触发，false时在冒泡阶段触发；删除使用removeEventListener。
IE事件模型
仅IE浏览器支持，其事件传播仅包含目标阶段和冒泡阶段（无捕获阶段）。
特点：
1. Event对象：作为全局对象window.event存在，而非事件处理函数的参数。
2. 事件注册与删除：使用attachEvent("onEventType", handler)和detachEvent("onEventType", handler)，事件类型需加on前缀（如onclick）。
3. 阻止冒泡：通过window.event.cancelBubble = true实现。
4. 局限性：仅支持鼠标事件捕获，而DOM2支持所有事件类型。
Netscape4事件模型（已淘汰）
仅支持捕获阶段，事件不冒泡，因Netscape浏览器停止开发，现代开发中无需关注。
热门标签
