DAY12JS学习--事件

一、事件介绍

当我们点击一个按钮的时候，会弹出一个对话框，在js中’点击‘这个事情看作一个事件，’弹出对话框‘就是点击事件中做的一些事

二、事件三要素 

1、事件源

触发事件的元素--如按钮

2、事件类型

如何触发：点击，双击，移动等

3、事件处理函数

事件做什么

三、事件对象

1、处理事件

与事件相关的

2、当触发事件，自动生成一个对象

例如：window--打开浏览器窗口自动生成window对象

3、获取事件对象

（1）在事情处理函数中获取名为event

（2）更改事件对象名

事件处理函数定义一个形参，接收事件对象

四、事件对象兼容性

1、IE浏览器

windo.event

2、获取事件对象

标签名.οnclick=function(e){

   e=e||window.even

}

五、事件对象位置属性

1、相对于事件源（点击的元素）

e.offsetX   e.offsetY

2、相对于浏览器窗口

e.clientX  e.clientY

3、相对于页面

e.pageX  e.pageY

六、鼠标事件

1、mouseover 鼠标移入

2、mouseout 鼠标移出

3、mousemove 鼠标移动

4、contextmenu 鼠标右击

5、mousedown 鼠标左键按下

6、mouseup 鼠标左键抬起

注意：pointer-events:none 移入当前元素，事件不起作用

七、表单事件

1、表单提交事件---默认行为

（1）触发表单提交事件

submit 是表单form元素

作用：表单验证、表单输入框内容不能为空（非空）

（2）默认行为

执行action属性指定的url地址跳转，同时获得表单输入框内容，以名称值对形式作为参数传递

（3）阻止表单默认行为

e.preventDefault()

2、内容转变事件

onchange  表单项内容发生变化时触发

3、input事件

表单内输入内容触发

八、焦点事件

focus获取焦点

blur 失去焦点

九、键盘事件

注意：事件源是document

(1) 键盘事件

keyup抬起

keydown 放下

keyress按住

键码 keyCode

获取键码 e.keyCode

火狐2.0版本兼容写法

e.keyCode || e.which

（2）键盘组合键事件

事件对象的属性

altkey  

shiftkey 

ctrlkey 

十、浏览器事件

1、load 文档加载完成事件

     scroll 滚动事件

     resize 窗口尺寸改变事件

2、window.οnlοad=function(){

这里面的代码，是html文档加载完成之后执行

}

十一、触摸事件（移动端）

注意：事件源是document

touchstart 触摸开始

touchend 触摸结束

touchmove 触摸移动