JavaScript 事件

事件

浏览器窗口，文档等发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。

事件三要素

事件源：添加事件的元素。

事件类型：触发的事件。

事件处理：触发事件之后要执行的回调函数（代码）。

事件流

事件流三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。      

捕获阶段：从上到下进行逐级捕获：html => body => div => p，从父元素流向目标元素

冒泡阶段：从下往上进行事件冒泡： p =>div  => body => html，把事件一点一点向父元素传递。

事件委托

不直接给元素添加事件，而是给元素的父元素或者祖宗元素来添加事件，触发事件的时候，不是元素本身来处理事件，而是让他的父元素或者祖宗元素来处理事件。

这个自己不干活，让其他人干活的方式就叫做事件委托，利用的是事件冒泡的机制。

事件监听（事件绑定）

事件监听就是DOM对事件进行监听，知道什么时候发生了这个事件，从而执行一些写好的程序。

传统事件侦听
<button id="btn">事件侦听</button>
 
var btn = document.getElementById('btn')
btn.onclick = function () { 
    console.log("事件侦听")
}
 
btn.onclick = function() {
    console.log("删除事件侦听")
    btn.onclick = null
}

addEventListener() 事件侦听

addEventListener() 方法用于向指定元素添加监听事件。同一个元素可以添加多个侦听器（事件处理程序），配合 removeEventListener() 方法来移除事件。

参数一、事件名称，字符串，必填。

事件名称不用带 "on" 前缀，点击事件直接写："click"，键盘放开事件写："keyup"

参数二、执行函数，必填。

填写需要执行的函数，如：function(){代码...} 
当目标对象事件触发时，会传入一个事件参数，参数名称可自定义，如填写event，不需要也可不填写。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
function(event){console.log(event)}

参数三、触发类型，布尔型，可空 

true - 事件在捕获阶段执行
false - 事件在冒泡阶段执行，默认是false

addEventListener() 有三个参数
1. 事件名称，字符串，必填。事件名称不用带 "on" 前缀，直接写事件名称。
 
2. 执行函数。
 
3. 触发类型，布尔型，可空。
true - 事件在捕获阶段执行
false - 事件在冒泡阶段执行，默认是false
 
<button id="btn">事件侦听</button>
 
var btn = document.getElementById('btn')
 
btn.addEventListener('click', function() {
    console.log("addEventListener事件侦听")
}, false )

removeEventListener() 删除事件

<button id="btn">事件侦听</button>
 
var btn = document.getElementById('btn')
 
btn.addEventListener('click', fn)
 
function fn() {
  console.log("删除事件")
  btn.removeEventListener('click', fn)
}

事件对象 e

事件对象本质是对象,这个对象中里有事件触发时的相关的信息。

比如:鼠标点击事件的时候,事件对象中就保存了鼠标点在哪个位置的信息。

<button id="btn">事件对象</button>
 
var btn = document.getElementById('btn')
 
btn.addEventListener('click', fn)
 
function fn(e) {
  console.log("事件对象", e)
}

事件对象 e 属性

e.target ：返回当前事件触发的元素。

e.type ：返回当前事件类型，此属性只读。

e.preventDefault：阻止元素的默认事件。

e.stopPropagation：阻止事件冒泡。

e.clientX：相对浏览器宽口可视区 离左边（x轴）的距离（不包含滚动条）。

e.clientY：相对浏览器宽口可视区 离顶部（Y轴）的距离（不包含滚动条）。

e.pageX：相对浏览器宽口可视区 离左边（x轴）的距离（包含滚动条）。

e.pageY：相对浏览器宽口可视区 离顶部（Y轴）的距离（包含滚动条）。

e.screenX：相对电脑屏幕的 离左边（x轴）的距离。

e.screenY：相对电脑屏幕的 离顶部（Y轴）的距离。

e.currentTarget：返回当前事件触发的节点。

e.wheelDelta( 滚轮事件特有属性 )：返回鼠标滚轮滚动方向，鼠标往上滚为 120，鼠标往下滚为 -120。

e.key(键盘事件)：返回 键盘所按的某一个键。

e.keyCode(键盘事件)：返回 对应的ASCll码值。

事件类型

鼠标类型

click	鼠标点击触发
mouseover	鼠标经过触发
mouseout	鼠标离开触发
mousemove	鼠标移动触发
mouseup	鼠标弹起触发
mousedown	鼠标按下触发
contextmenu	鼠标右击触发
dblclick	鼠标双击触发
mousewheel	鼠标滚轮滚动触发

 表单事件

focus	输入框获得鼠标焦点触发
blur	输入框失去鼠标焦点触发
change	元素发生变化时触发
input	输入框值改变触发
select	选中输入框值时触发

 键盘事件

keyup	表单中，键盘弹起触发
keydown	表单中，键盘按下触发
keypress	表单中，键盘按下触发（不能识功能键）

 浏览器窗口事件

load	页面加载，当文档内容完全加载完成后触发
resize	宽口大小发生变化触发
scroll	滚动条滚动就会触发

元素属性系列

元素偏移量 offset 系列

获得元素距离带有定位父元素的位置，获得元素自身的大小。

offsetLeft
offsetTop
offsetWidth
offsetHeight
offsetParent