JavaScript 基础 学习（三）

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.当你给一个事件注册多个事件处理函数的时候

​ 顺序注册, 倒叙执行