[JavaScript知识库]Javascript事件

JavaScript事件简介

事件：当我们点击一个按钮的时候，会弹出一个对话框。在JavaScript中，“点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事。

事件的组成：

1. 事件源：触发谁的事件

2. 事件类型：点击、移动等

3. 事件处理函数：事件触发之后产生的效果

事件对象event

每触发一个事件都会生成事件对象

获取事件对象：在每一个事件处理函数的行参位置，默认第一个就是事件对象

div.οnclick=function(e){
 ?  console.log(e)
}

IE兼容写法：

div.οnclick=function(e){
 ?  e=e || window.event
 ?  console.log(e.offsetX)
 ?  console.log(e.offsetY)
}

点击事件的光标坐标点获取

1. 相对事件源（你点击的元素）offsetX,offsetY

   <!--是相对于元素自身的边框内侧开始计算-->

2. 相对于浏览器窗口 clientX,clientY

   <!--是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标-->

3. 相对于页面 pageX,pageY

   <!--是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点-->

常见的事件（了解）

浏览器事件：

• load ： 页面全部资源加载完毕

• scroll ： 浏览器滚动的时候触发

• onresize 页面大小事件

鼠标事件:

• click ：点击事件

• dblclick ：双击事件

• contextmenu ： 右键单击事件

• mousedown ：鼠标左键按下事件

• mouseup ：鼠标左键抬起事件

• mousemove ：鼠标移动

• mouseover ：鼠标移入事件

• mouseout ：鼠标移出事件

• mouseenter ：鼠标移入事件

• mouseleave ：鼠标移出事件

键盘事件：

• keyup ： 键盘抬起事件

• keydown ： 键盘按下事件

• keypress ： 键盘按下再抬起事件

表单事件：

• change : 表单内容改变事件

• input : 表单内容输入事件

• submit : 表单提交事件

触摸事件：

• touchstart ： 触摸开始事件

• touchend ： 触摸结束事件

• touchmove ： 触摸移动事件

事件

鼠标事件：

鼠标移入移出改变样式：mouseover（鼠标移入）

mouseout（鼠标移出）

mousemove（鼠标移动）

表单事件：

表单提交事件onsubmit

内容转变事件onchange

焦点事件：

失去焦点onblur

获取焦点onfocus

键盘事件：

只给能在页面上选中的元素（表单元素） 和 document 来绑定键盘事件<!--不能给页面上一个 div 元素，设置键盘事件的-->

确定按键：键盘上每一个按键都有一个自己独立的编码

我们就是靠这个编码来确定我们按下的是哪个按键的

我们通过 事件对象.keyCode 或者 事件对象.which 来获取

因为 FireFox2.0 不支持 keycode 所以要用 which

document.keyup=function(e){
 ?  //事件兼容性写法
 ?  e=e || window.event
 ?  //获取键盘编码的兼容性写法
 ?  var keyCode=e.keyCode || e.which
}

常见的键盘码（了解）:

8： 删除键（delete）9： 制表符（tab）13： 回车键（ebter）16： 上档键（shift）17： ctrl 键18： alt 键27： 取消键（esc）32： 空格键（space）

事件的绑定方式：

事件属性：把事件写在标签的属性里面

<input type="button" οnclick="alertMessage()" value="按钮"/>

事件绑定：

缺点: 只能给一个元素注册一个事件，绑定一个事件，后一个会覆盖前一个

好处：符合“行为，样式，结构”相分离；便于操作当事对象；方便读取事件对象

事件监听：

addEventListener : 非 IE 7 8 下使用

语法：

元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)

attachEvent ：IE 7 8 下使用

语法：

元素.attchEvent('事件类型'，事件处理函数)

事件的执行机制

事件的传播：当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的上级元素也会触发相同的事件

在事件传播的过程中，有一些注意的点：

1. 只会传播同类事件

2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发

3. 内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发

事件的传播方向：

事件冒泡：就是从事件 目标 的事件处理函数开始，依次向外，直到 window 的事件处理函数触发也就是从下向上的执行事件处理函数

事件捕获：就是从 window 的事件处理函数开始，依次向内，只要事件 目标 的事件处理函数执行也就是从上向下的执行事件处理函数

实现事件捕获和事件冒泡：

• addEventListener的第三个参数决定了是事件捕获还是事件冒泡

• true:表示注册的事件在捕获阶段触发

• false:表示注册的事件在冒泡阶段触发-----默认值

事件目标对象 target：

target 这个属性是事件对象里面的属性，表示你点击的目标

当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

target 也不兼容，在 IE 下要使用 srcElement

事件委托:

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

默认行为:

阻止默认事件:

e.preventDefault() : 非 IE 使用e.returnValue = false ：IE 使用