JavaScript 基础学习（三）

事件三要素

1.事件源： 绑定在谁身上的事件（和谁约定好）

2.事件类型： 绑定一个什么事件

3.事件处理函数： 当行为发生的时候，要执行哪一个函数

例如：

1.获取元素

var box = document.querySelector('div')

2.给 div 绑定一个点击事件

事件源：div

事件类型：click （点击行为）

事件处理函数：准备一个函数，在点击行为处罚的时候执行

on 是绑定事件的一种方式

click 叫做事件类型

当页打开点击在 box 这个元素上的时候，会执行后面的函数

box.onclick = function(){

console.log('我被点击了')}

常用的事件类型

在 JS 的事件类型里面，没有大写字母

1.鼠标事件

都是一些和鼠标相关的事件

click 点击事件

dblclick 双击事件

contextmenu 右键单击事件

mousedown 鼠标按下

mouseup 鼠标抬起

mousemove 鼠标移动

mouseover 鼠标移入

mouseout 鼠标移出

mouseenter 鼠标移入

mouseleave 鼠标移出

2.键盘事件

键盘事件无法确定我是在某一个元素上按下的键盘

所以一般来说我们键盘的绑定在表单元素或者 document 上

因为表单元素可以被选中，有没有焦点

因为 document 表示页面，你在这个页面中和不在这个页面中

keydown 键盘按下

keyup 键盘抬起

keypress 键盘按下

3.浏览器事件

load 加载完毕

resize 窗口滚动

scroll 滚动条滚动

4.表单事件

专门给 form 标签和 input 标签和 textarea 标签和 select 标签使用的

focus 聚焦事件

blur 失焦事件

change 改变事件

input 输入事件

submit 提交事件（绑定给 form 标签）

reset 重置事件（绑定给 form 标签）

5.移动端触摸事件

touchstart 触摸开始（手放在屏幕上的时候）

touchmove 触摸移动（手在屏幕上移动）

touchend 触摸结束（手离开屏幕的时候）

6.其他事件

transitionend 过渡动画结束需要绑定特殊的绑定方式

animationend 帧动画结束需要特殊的绑定方式

selectstart 开始框文本

事件对象

在每一个事件触发的时候都应该有一些描述性的信息

1.触发的是什么事件

2.鼠标事件的时候，光标坐标点是什么

3.键盘事件的时候，按下的是哪一个按键

当我们把这些信息放到了一个对象里面的时候

我们就管这个对象叫做事件对象

事件对象：就是一个保存了本次事件的描述信息的对象数据类型

当你触发事件的时候, 浏览器会帮我们记录好这些内容

你只要获取到事件对象, 去里面进行查看就可以了

当你绑定好一个事件的以后

当用户触发这个事件的时候

那么浏览器会帮我们把关于这个事件的所有信息都记录下来

给到我们, 让我们使用

如何在事件里面获取事件对象

标准浏览器 => 直接在事件处理函数的时候接收一个形参的形式

box.onclick = function (e) {}

e => 就是一个形参, 你可以写 event 或者 ev 或者 e

会在事件触发的时候, 由浏览器给我们传递实参

我们直接在事件处理函数里面使用 e 就可以了

得到的就是事件对象(里面包含本次事件的一些描述信息)

所有事件都有事件对象

IE 低版本 => 要使用 window.event 来获取

直接在事件处理函数里面使用 window.event 来获取

兼容方式

接收形参 e

在事件处理函数里面写 e = e || window.event

给形参 e进行重新赋值

赋值的内容, 如果有实参, 就使用实参, 如果没有, 就使用 window.event

事件对象里面的信息 - 鼠标事件

1.button 属性： 决定的是你按下的鼠标的哪一个按键

2.clientX 和 clientY 属性： 相对于浏览器可视窗口左上角的坐标

3.pageX 和 pageY 属性： 相对于页面左上角的坐标

4.offsetX 和 offsetY 属性： 相对于元素左上角的坐标

事件对象里面的信息 - 键盘事件

键盘事件里面的主要信息就是

1.按下的是哪一个按键

每一个键盘每一个按键都有一个自己的编码

通过事件对象里面的编码来确定按下时哪一个按键

获取编码的信息有两个

e.keyCode 标准浏览器

e.which 火狐 < 20 的版本

兼容处理

var dode = e.keyCode||e.which

2.你按下的是不是组合按键

在事件对象里面有四个属性

shiftKey 判断 shift 按键

ctrlKey 判断 ctrl 按键

altKey 判断 alt 按键

metaKey 判断 win 按键

他们四个的值是布尔值

默认是 false ，表示没有按下

当你按下去的时候，他就变成 true ，表示按下了

我们在判断组合按键的时候

只要多判断一个属性是不是 true 就能知道你按下的是不是组合按键

if(code === 65&&e.shiftKey === true && e.ctrlKey === true && e.altKey === true){

aletr('您按下的是 shift + ctrl + alt +a')

console.log(e)}

事件监听器

就是我们绑定事件的第二种方式

dom0级事件：使用 on 的方式进行绑定

dom2级事件：使用 监听器 的方式进行绑定

监听器：我们有两种监听器

标准浏览器使用的监听器

IE 低版本使用的监听器

1.标准浏览器的事件监听器

语法： 元素.addEventListener （'事件类型'，事件处理函数）

作用： 给元素添加一个事件处理函数，当事件触发的时候有函数执行

2.IE 低版本的事件监听器

语法： 元素.attachEvent （'on 事件类型'，事件处理函数）

作用： 给元素添加一个事件处理函数，当事件触发的时候有函数执行

3.dom0级和 dom2级的区别

dom0 级事件，只能给一种事件绑定一个事件处理函数

因为是 " = " 赋值，当赋值第二个值的时候，第一个就被覆盖了

dom2 级事件，可以给一种事件绑定多个事件处理函数

当事件触发的时候都会执行

dom2 级事件中，addEventLister 和 attachEvet 的区别

addEventLister

1.使用在标准浏览器

2.事件类型位置不需要 on

3.至少两个参数，一个是事件类型，一个是事件处理函数

4.当你给一个事件注册多个事件处理函数的时候

顺序注册，顺序执行

attachEvent

1.使用在 IE 低版本浏览器

2.事件类型位置需要 on

3.只有两个参数, 一个是事件类型, 一个是事件处理函数

4.当你给一个事件注册多个事件处理函数的时候

顺序注册, 倒叙执行