DOM事件(二)
2018-09-12 本文已影响8人
zhaochengqi
一、 事件对象
1.1 DOM中的事件对象
在触发DOM上的某个事件时,会产生一个事件对象event:
event对象只存在于事件处理程序执行期间
//======常用属性======
MouseEvent {
type: "click",
bubbles: true, //事件是否冒泡
cancelable: true, //是否可以取消事件的默认行为
currentTarget: null, //事件处理程序当前正在处理事件的那个元素
defaultPrevented: false, //为true表示已经调用了preventDefault()
detail: 1, //与事件相关的信息
eventPhase: 1, //调用事件处理程序的阶段 1:捕获阶段 2:处于目标 3:冒泡阶段
target: null, //事件的目标
trusted: true, //为true表示事件是由浏览器生成的,为false表示
//事件是由开发人员通过JavaScript创建的
view: Window {//与事件关联的抽象视图,等同于发生事件的window对象
postMessage: ƒ,
blur: ƒ,
focus: ƒ,
close: ƒ,
frames: Window,
…
},
}
Event方法:
event.preventDefault()
//取消事件的默认行为,如果cancelable是true就可以使用这个方法
event.stopImmediatePropagation()
//取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用
event.stopPropagation()
//取消事件的进一步捕获或冒泡,如果bubbles为true就可以使用这个方法
-
currentTarget VS target
在事件处理程序内部,this始终等于currentTarget的值(绑定处理程序的元素对象);
而target则只包含事件的实际目标(用户点击的最具体的元素对象)分别点击inner、inner1、inner2、inner3、inner4:
image
1.2 IE中的事件对象
IE 中 event DOM 中有,不不。
不同事件处理程序指定方式获取event:
- DOM0:event对象作为window对象的一个属性存在
- attachEvent:event对象作为参数被传入是阿金处理程序函数中,event对象也同样存在于window的属性中
event常用属性:
- cancelBubble: true 默认false,将其设为true可以取消事件冒泡【==stopPropagation()】
- returnValue: true 默认true,将其设为false就可以取消事件的默认行为【==preventDefault()】
- srcElement: Element 事件的目标【==target】
- type: String 事件类型