清华社课件JavaScript交互式Web前端开发4.3 Web事件处理机制.pptxVIP

Web事件处理机制主讲：课程组

CONTENTS01事件监听02事件移除03获取事件源04阻止事件冒泡05阻止默认行为

事件监听01

现代浏览器事件监听addEventListener()是现代浏览器遵循W3C标准的事件监听方式，广泛使用且功能强大。addEventListener标准方法eventType为事件类型字符串，callback为事件触发时执行的函数，useCapture为可选布尔值，默认false。参数解析element.addEventListener(eventType,callback,useCapture);语法结构

IE旧版浏览器事件监听attachEvent()是IE5-IE8浏览器特有的事件绑定方法，与标准方法存在显著差异。attachEvent专用方法element.attachEvent(eventType,callback);语法结构eventType为事件类型字符串，需在事件名前加on，callback为事件触发时执行的函数。参数解析绑定函数的执行顺序与添加顺序相反，仅支持事件冒泡阶段，不支持事件捕获。局限性

兼容性解决方法为确保代码在新旧浏览器中均可正常运行，可封装兼容性函数实现统一的事件绑定逻辑。封装兼容性函数

事件移除02

现代浏览器事件移除用于移除addEventListener添加的监听器01removeEventListener方法element为DOM元素，eventType为事件类型，callback为事件处理函数02参数解析参数完全匹配才能成功移除监听器03特性

IE旧版浏览器事件移除用于移除attachEvent添加的监听器detachEvent方法element为目标DOM元素，eventType需加on前缀参数解析0201callback为需移除的事件处理函数移除特定回调03

兼容性解决方法实现跨浏览器的事件移除逻辑封装兼容性函数

获取事件源03

现代浏览器获取事件源在现代浏览器中，通过addEventListener绑定的事件处理函数，其第一个参数（通常命名为e或event）包含target属性，指向触发事件的DOM元素。使用addEventListener获取事件源01、e.target属性指向触发事件的DOM元素，是现代浏览器获取事件源的标准方法。e.target获取事件源02、

IE旧版浏览器获取事件源在IE5-IE8浏览器中，需通过window.event获取事件对象，使用srcElement属性获取事件源。使用window.event.srcElement获取事件源

兼容性解决方法为实现跨浏览器获取事件源，可封装兼容性函数，以确保代码在新旧浏览器中均可正常运行。封装兼容性函数获取事件源

阻止事件冒泡04

现代浏览器阻止冒泡01在现代浏览器中，调用e.stopPropagation()后，事件不会继续传播到父级元素。02阻止冒泡后，后续父级元素的事件监听器不会被触发。e.stopPropagation()方法阻止事件冒泡特性

IE旧版浏览器阻止冒泡window.event.cancelBubble在IE5-IE8浏览器中，设置window.event.cancelBubble为true阻止事件冒泡。

兼容性解决方法封装兼容性函数为跨浏览器阻止事件冒泡，可封装兼容性函数实现统一逻辑。

阻止默认行为05

现代浏览器阻止默认e.preventDefault()方法在现代浏览器中，使用e.preventDefault()阻止事件默认行为。阻止链接跳转此方法常用于阻止链接的默认跳转行为。阻止表单提交也可用于阻止表单的默认提交行为。

IE旧版浏览器阻止默认此方法适用于阻止链接跳转、表单提交等默认行为。阻止默认行为在IE5-IE8中，设置window.event.returnValue为false阻止默认行为。window.event.returnValue设置

兼容性解决方法封装兼容性函数为跨浏览器阻止默认行为，可封装兼容性函数实现统一逻辑。

谢谢主讲：课程组