StartledSting

事件

浏览器窗口，文档等发生的一些特定的交互瞬间。对于 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码值。

事件类型

鼠标类型

 表单事件

 键盘事件

 浏览器窗口事件

元素属性系列

元素偏移量 offset 系列

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