[JavaScript]基础事件

什么是事件

一个事件就是一个用户在访问网页时，所使用键盘或者鼠标对网页做出某种操作，这就是一个基础事件
在js中，用户与文档交互基础事件又分为鼠标事件与键盘事件
例如：

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时

示例演练：

  <div>我是一个div</div>
  <input type="text" id="input" value=''>
  <script>
    var oDiv = document.querySelector('div');
    //将事件匿名函数 赋值给 元素对象的 onclick属性 事件绑定
    //事件的回调函数 用户触发了 click操作的时候 执行了这个函数
    oDiv.onclick = function (event) {
      console.log(event); //event对象包含了当前这一次行为所有的事件信息
      console.log(event.target); //触发事件的目标 target 目标
      console.log(event.type); //事件类型
      console.log(event.pageX, event.pageY); //事件触发时 鼠标相对window的位置
      alert(this.innerText); //事件回调函数中的this指向 触发事件的对象 this => oDiv
    }
    var oInput = document.querySelector('#input');
    oInput.onkeydown = function () {//在input上敲下键盘按键的时候触发
      console.log(this.value);
    }
    oInput.onfocus = function () {//在input上敲下键盘按键的时候触发
      console.log('你聚焦在了input上');
    }
    oInput.onblur = function () {//在input上敲下键盘按键的时候触发
      console.log('input失去了焦点');
    }
  </script>

常见的事件

属性	此事件发生在何时…
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
oninput	input输入框接收到输入内容时触发 H5 API
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseenter	鼠标移到某元素之上。(不支持冒泡)
onmouseleave	鼠标从某元素移开。(不支持冒泡)
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

事件三要素

• 事件源:触发(被)事件的元素
• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
• 事件处理程序:事件触发后要执行的代码(函数形式)

事件阶段

事件有三个阶段:

event.eventPhase属性可以查看事件触发时所处的阶段 :

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

事件的捕获和冒泡

	1、事件捕获
	捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)
	也就是从外向内
	2、事件冒泡
	冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
	也就是从内向外

注意： 绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要）。这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件

事件对象的属性和方法

• event.type 获取事件类型
• clientX/clientY 所有浏览器都支持，窗口位置
• pageX/pageY IE8以前不支持，页面位置
• event.target || event.srcElement 用于获取触发事件的元素
• event.preventDefault() 取消默认行为

注：Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

event对象属性

属性	描述
altKey	返回当事件被触发时，“ALT” 是否被按下。
shiftKey	返回当事件被触发时，“SHIFT” 键是否被按下。
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。
metaKey	返回当事件被触发时，“meta” 键是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
keyCode	表示非字符按键的unicode值。
isChar	布尔值，表示当前按下的键是否表示一个字符
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
pageX	事件发生时相对于页面（如viewport区域）的水平坐标。
pageY	事件发生时相对于页面（如viewport区域）的垂直坐标。
currentTarget	事件冒泡阶段所在的当前DOM元素
target	返回触发此事件的元素（事件的目标节点）。
eventPhase	返回事件传播的当前阶段。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
type	返回当前 Event 对象表示的事件的名称。
timeStamp	返回事件生成的日期和时间。