zoukankan      html  css  js  c++  java
  • JavaScript学习总结5--事件对象

    当我们触发了DOM上的某个事件(onclick,onmouseover等)时,会自动产生一个事件对象event,这个对象中包含着所有与事件有关的信息,包括触发事件的DOM元素,事件类型以及其他与特定事件相关的信息

    所有浏览器都支持event对象,但方式有所不同

    1.DOM中的事件对象

    兼容DOM的浏览器会将event对象传入到事件处理程序中

    例如:

    //省略之前代码
    oBtn.addEventListener('click',function(event){
        console.log(event.type);          //click 
    },false)

    这个例子中的事件处理程序会在控制台输出事件的类型(event.type),这个属性则包含被处罚的事件类型

    根据事件的类型,不同的事件会有不同的属性和方法,不过所有事件都会有以下属性或方法

    属性/方法 类型 读/写 说明
    bubbles Boolean 只读 表明事件是否冒泡
    cancelable Boolean 只读 表明是否可以取消事件的默认行为
    currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
    defaultPrevented Boolean 只读 为true表示已经调用了preventDefault()
    detail Interger 只读 与事件相关的细节信息
    eventPhase Interger 只读 调用事件处理程序的阶段1表示捕获阶段,2表示“处于目标“,3表示冒泡阶段
    preventDefault() Function 只读 取消事件默认行为
    stopImmediatePropagation() Function 只读 取消事件的进一步捕获或者冒泡
    stopPropagation() Function 只读 取消事件的进一步捕获或者冒泡
    target Element 只读 事件的目标
    trusted Boolean 只读 为true表示事件时浏览器生成的,false表示事是人为创建的
    type String 只读 被触发的事件类型
    view AbstractView 只读 与事件关联的抽象视图,等同于发生事件的window对象

    事件处理程序的内部,对象this始终等于currentTarget的值,而target只包含事件的实际目标(currentTarget为实际触发事件的元素,target为绑定事件的元素)

    //省略之前代码
    oBtn.onclick=function(event){
        console.log(event.currentTarget===this);    //true
        console.log(event.target===this);              //true
    }
  • 相关阅读:
    Mybatis Plus 代码生成器
    Vue中 scss不支持/deep/写法问题
    学习过程中看到的网站收藏
    mysql数据库的安装配置
    element表格样式修改
    vue甘特图gantt
    一个CSS动画生成工具,可自由配置各种动画特效,并自动生成代码
    《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统,完整而简洁,示例丰富,比官方文档更易读,非常适合作为初学者学习 TypeScript 的第一本书 —— 阮一峰
    程序员文档编辑器 Markdown
    Svn(小乌龟)的基本操作使用
  • 原文地址:https://www.cnblogs.com/sakura-log/p/5529997.html
Copyright © 2011-2022 走看看