:::info 事件在浏览器中是以Event对象的形式存在的，每触发一个事件，就会产生一个Event对象。该对象包含所有与事件相关的信息，包括事件的元素、事件的类型及其他与特定事件相关的信息。 :::

获取Event对象

  • 获取Event对象的方式有以下两种。
    • 在事件处理程序中，Event对象会作为参数传入，参数名为event。
    • 在事件处理程序中，通过window.event属性获取Event对象。

  • Chrome浏览器和Safari浏览器同时支持两种方式获取event对象，而Firefox浏览器只支持这种将event作为参数传入的方式。

    获取事件的目标元素

    :::info 在IE浏览器中，event对象使用srcElement属性来表示事件的目标元素；而在非IE浏览器中，event对象使用target属性来表示事件的目标元素，为了提供与IE浏览器下event对象相同的特性，某些非IE浏览器也支持srcElement属性。 ::: Chrome浏览器和Safari浏览器同时支持两种属性来获取事件目标元素，而Firefox浏览器只支持event.target属性来获取事件目标元素。

    target属性与currentTarget属性

    在Event对象中有两个属性，target属性和currentTarget属性。两者都可以表示事件的目标元素，但是在事件流中两者却有不同的意义。

  • 两者的区别：

    • target属性在事件目标阶段，理解为真实操作的目标元素。-点击的最终的元素
      • target属性始终指向的是实际操作的元素。因为我们是在td元素上进行的单击操作，所以target属性对应的是td。
    • currentTarget属性在事件捕获、事件目标、事件冒泡这3个阶段，理解为当前事件流所处的某个阶段对应的目标元素。— 过程中的当前事件流所处的阶段的目标元素
      • 在事件流的事件捕获阶段或者事件冒泡阶段，currentTarget指向的是事件流所处的某个特定阶段对应的元素。在该实例中，事件捕获阶段元素的流转顺序为table>tbody>tr，事件冒泡阶段元素的流转顺序为tr>tbody>table。

阻止事件冒泡

应用场景
有一个表示学生基础信息的容器ul，每个li元素都表示一个学生的基本信息，单击li元素会改变li的背景色以表示选中的标识。在每个li元素内部会有一个表示删除的button按钮，单击button按钮则会提示是否删除，单击确定则会删除该元素。
为了防止在点击删除按钮时，改变li 元素的背景色，在button按钮的click事件中调用event.stopPropagation()函数。那么在单击button按钮时，事件就只会在事件目标阶段执行，而不会向上继续冒泡至父元素li中，从而达到目的。

阻止默认行为

  • 在众多的HTML标签中，有一些标签是具有默认行为的，这里简单地列举3个。
    • a标签，在单击后默认行为会跳转至href属性指定的链接中。
    • 复选框checkbox，在单击后默认行为是选中的效果。
    • 输入框text，在获取焦点后，键盘输入的值会对应展示到text输入框中。

event.preventDefault()函数去实现
使用场景
场景描述：限制用户输入的值只能是数字和大小写字母，其他的值则不能输入，如输入其他值则给出提示信息，提示信息在两秒后消失。
在元素调用的方法里，如果不符合条件的内容不可输入，并显示提示框。