DOM——事件对象和this

93 阅读1分钟

事件对象:

定义:事件触发时,handler函数内部会传入数据,这个数据就是触发时的信息。

  1. 事件处理函数形参ev(event)

  2. 全局对象 window.event(如果函数传入了实参,就用这个)

  3. 兼容性写法:

    1.var event= ev|| window.event
    
    2.e=(e.constructor==PointerEvent&&e)||window.event
    

image.png

image.png

属性值:path代表的是捕获和冒泡阶段

事件对象携带的信息:

事件源对象(就是被点击的对象)

event.target 火狐只有这个

event.srcElement IE6/78只有这个

这两个chrome都有:

兼容性写法: var ele=event.target|| event.srcElement target:目标对象

鼠标事件触发时:

altKey 鼠标事件发生时,是否按下alt键,返回一个布尔

ctrlKey 鼠标事件发生时,是否按下ctrl键,返回一个布尔

metaKey 鼠标事件发生时,是否按下windows/commond键,返回一个布尔

shiftKey 鼠标事件发生时,是否按下shift键,返回一个布尔

pageX 鼠标点击的 X 坐标;(包含body隐藏的)(相较于页面)

pageY 鼠标点击的 Y 坐标;(包含body隐藏的)

clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标,单位为像素(不包括body隐藏的)

screenX screenY返回鼠标位置相对于屏幕左上角的坐标,单位为像素

movementX,movementY返回一个位移值,单位为像素,表示当前位置与上一个mousemove事件之间的距离

offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关

键盘事件触发时:

charCode/keyCode 键码值

key 键码

37左 38上 39右 40下 13enter

this:哪个属性绑定的,this就是那个

1.第一种情况:

image.png

image.png

2.第二种情况:

image.png

image.png