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
    }
  • 相关阅读:
    BasKet Note Pads-运用软件作笔记
    K3b-全功用的光盘烧录器材
    GShutDown:自动化关机小工具
    Xournal-条记抄写软件
    Metisse:相称酷的窗口操持器
    Realtek ALC268集成声卡驱动成绩在ubuntu下的处置责罚方案
    Wixi-桌面端 Wiki 运用
    Avant Window Navigator:Dock 类的窗口导航要领
    DDM:剪贴板办理及截取屏幕
    快速搞定Windows Xp Pro繁体中文版的简体支持
  • 原文地址:https://www.cnblogs.com/sakura-log/p/5529997.html
Copyright © 2011-2022 走看看