JavaScript事件处理89课件.pptxVIP

JavaScript事件处理

事件的实现2.1.事件的绑定正则表达式3.Catalogue目录

事件的绑定01

PART02PART01使用直接绑定事件处理器addEventListener方法用于向特定元素添加事件监听器。这个方法接受三个参数：事件类型、回调函数和是否在捕获阶段触发事件。例如，element.addEventListener(click,handleClick);会在用户点击元素时触发handleClick函数。

此方法的优势在于可以为同一事件类型添加多个监听器，并且可以更灵活地控制事件的传播阶段。它还允许通过removeEventListener方法在适当的时候移除监听器，从而避免内存泄漏。另一种绑定事件的方式是直接在元素的事件属性上赋值，例如，element.onclick=handleClick;。这种方式简单直观，但在处理多个监听器时会遇到问题，因为后续的赋值会覆盖之前的监听器。事件监听器的添加

事件在DOM树中的传播过程分为三个阶段：捕获阶段、目标阶段和冒泡阶段。了解这一机制对于控制事件处理的时机和顺序非常重要。

例如，当用户点击一个按钮时，事件首先在捕获阶段从根节点向下传播到目标元素，然后在目标阶段触发按钮上的事件，最后在冒泡阶段从目标元素向上传播回根节点。事件的停止传播使用event.stopPropagation()方法可以阻止事件继续传播。这在处理嵌套元素的事件时非常有用，可以避免不必要的事件处理。事件冒泡和捕获事件传播机制

事件委托的概念事件委托是一种技术，它利用事件冒泡机制，将事件监听器绑定到父元素上，而不是每个子元素上。这样，无论用户交互的是哪一个子元素，事件都会被父元素捕获。

例如，为一个列表的父元素添加点击事件监听器，而不是为列表中的每个项单独添加。这可以减少内存的使用，并提高性能。实现事件委托实现事件委托通常涉及到在事件处理函数中使用event.target来获取实际触发事件的元素，并根据需要进行处理。事件委托

事件的实现02

使用CustomEvent构造函数允许创建自定义事件，这些事件可以被触发并传递额外的数据。这对于在应用程序的不同部分之间通信非常有用。

例如，letmyEvent=newCustomEvent(build,{detail:{some:data}});创建了一个名为build的事件，并附带了一些数据。然后，可以使用dispatchEvent方法触发这个事件。触发和监听自定义事件自定义事件可以通过dispatchEvent方法被触发，监听器可以使用addEventListener方法添加。这为创建可重用和模块化的代码提供了可能。自定义事件

事件处理函数会自动接收一个事件对象作为参数，该对象包含了事件的详细信息，如事件类型、目标节点、当前节点等。

例如，event.type返回事件的类型，event.target返回触发事件的元素，而event.currentTarget返回绑定事件监听器的元素。事件对象的属性事件对象提供了一些方法，如preventDefault和stopPropagation，用于控制事件的默认行为和传播。

例如，event.preventDefault()可以阻止表单的默认提交行为，而event.stopPropagation()可以阻止事件继续传播。事件对象的方法事件对象

正则表达式03

01正则表达式是用于匹配字符串中字符组合的模式。它由模式字符组成，可以是一个简单的字符，也可以是更复杂的特殊字符和符号。

例如，/^hello/是一个正则表达式，用于匹配以hello开头的字符串。正则表达式的结构02RegExp对象的test方法用于测试字符串是否匹配某个模式，而match方法用于在字符串中搜索匹配的模式。

例如，/hello/.test(str)返回true如果str包含hello，而str.match(/hello/)返回匹配的字符串数组。测试和匹配字符串正则表达式基础

量词和分组量词如*、+和?用于指定模式出现的次数，而圆括号()用于分组模式，允许同时匹配多个字符。

例如，/(hello)+/匹配一个或多个连续的hello。01断言和条件表达式断言如^和$用于指定模式的开始和结束位置，而条件表达式如(?=...)和(?!...)用于指定模式前后的条件。

例如，/hello(?=world)/匹配hello，但只有在它后面紧跟world时。02正则表达式的高级用法

验证输入正则表达式常用于验证用户输入，如电子邮件地址、电话号码和密码等。

例如，/^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/是一个用于验证电子邮件地址的正则表达式。01.格式化和解析字符串正则表达