DOM：事件对象

事件中的this和事件对象

this

1.行内:

<button type="button" onclick="fn(this)">xxx</button>
<script type="text/javascript">
        function fn (e) {
            console.log(e,this)//btn和window
        }
</script>
//行内绑定时  行内的环境对象是btn  函数的调用者是window 无法获取事件对象

2.元素属性:

this指向的是dom元素本身 事件对象在参数中

3.addEventListener:

this指向的是dom元素本身 事件对象在参数中

4.attachEvent:

this指向 window 事件对象在参数中

 

事件对象

事件对象上存储着事件发生时的相关信息(例如:event.which)

a) 事件处理函数形参ev(event)，W3C制定的标准，IE9以下不行
b) 全局对象 window.event用于IE9以下
兼容性写法 var event= ev|| window.event

事件对象携带的信息

事件源对象：

event.target 火狐只有这个
event.srcElement IE6/78只有这个
这两个chrome都有
  兼容性写法 var ele=event.target|| event.srcElement

鼠标事件触发时:

 

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 跟它是否是定位的元素无关

 

获取节点的三种方式：

1、xx.value

2、this.value

3、xx.target.value

 

键盘事件触发时:

charCode/keyCode  键码值  key  键码
常用的键码：
37左
38上
39右
40下 
13enter