持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

DOM 事件

什么是事件?

事件就是一件事情或者一个行为（对于元素来说，它的很多事件都是天生自带的），只要我们去操作这个元素，就会触发这些行为 “事件就是元素天生自带的行为，我们操作元素，就会触发相关的事件行为”

事件绑定：给元素天生自带的事件行为绑定方法，当事件触发，会把对应的方法执行

oBox.onclick=function(){}

元素天生自带的事件？

鼠标事件

click：点击 (PC 端是点击，移动端的 click 代表单击[移动端使用 click 会有 300MS 延迟的问题]) dblclick：双击 mouseover：鼠标经过 mouseout：鼠标移出 mouseenter：鼠标进入 mouseleave：鼠标离开 mousemove：鼠标移动 mousedown：鼠标按下（鼠标左右键都起作用，它是按下即触发，click 是按下抬起才会触发，而且是先把 down 和 up 触发，才会触发 click） mouseup：鼠标抬起 mousewheel：鼠标滚轮滚动 ...

键盘事件

keydown：键盘按下 keyup：键盘抬起 keypress：和 keydown 类似，只不过 keydown 返回的是键盘码，keypress 返回的是 ASCII 码值 input：由于 PC 端有实体物理键盘，可以监听到键盘的按下和抬起，但是移动端是虚拟的键盘，所以 keydown 和 keyup 在大部分手机上都没有，我们使用 input 事件统一代替他们（内容改变事件） ...

表单元素常用的事件

focus：获取焦点 blur：失去焦点 change：内容改变 ...

其它常用事件

load：加载完成 unload beforeunload scroll：滚动条滚动事件 resize：大小改变事件 window.onresize=function(){} 当浏览器窗口大小发生改变，会触发这个事件，执行对应的事情 ...

移动端手指事件

touch：单手指操作

touchstart：手指按下 touchmove：手指移动 touchend：手指离开 touchcancel：因为意外情况导致手指操作取消 [gesture：多手指操作] gesturestart：手指按下 gesturechange：手指改变 gestureend：手指离开 ...

H5 中的 AUDIO/VIDEO 音视频事件

canplay：可以播放（播放过程中可能出现由于资源没有加载完成，导致的卡顿） canplaythrough：资源加载完成，可以正常无障碍播放 ...

box.onclick = function () {
  console.log("click");
};
box.onmousedown = function () {
  console.log("down");
};
box.onmouseup = function () {
  console.log("up");
};
tempInp.onkeydown = function () {
  console.log("ok");
};

事件绑定

DOM0 级事件绑定

[element].onxxx=function(){}

DOM2 级事件绑定

[element].addEventListener('xxx',function(){},false); [element].attachEvent('onxxx',function(){}); [IE6~8]

目的

给当前元素的某个事件绑定方法（不管是基于 DOM0 还是 DOM2），都是为了触发元素的相关行为的时候，能做点事情（也就是把绑定的方法执行）；“不仅把方法执行了，而且浏览器还给方法传递了一个实参信息值 ==>这个值就是事件对象”

<div id="box"></div>

事件的默认

事件本身就是天生就有的，某些事件触发，即使你没有绑定方法，也会存在一些效果，这些默认的效果就是"事件的默认行为"

A 标签的默认行为

页面跳转

<a href="http://www.baidu.cn/" target="_blank">
  百度
</a>
// target='_blank'：让其在新窗口打开

锚点定位(HASH 定位[哈希定位])

首先会在当前页面 URL 地址栏末尾设置一个 HASH 值，浏览器检测到 HASH 值后，会默认定位到当前页面中 ID 和 HASH 相同的盒子的位置（基于 HASH 值我们还可以实现 SPA 单页面应用）

<a href="#box">百度</a>

INPUT 标签

输入内容可以呈现到文本框中
输入内容的时候会把之前输入的一些信息呈现出来（并不是所有浏览器和所有情况下都有）

SUBMIT 按钮也存在默认行为

点击按钮页面会刷新

在 FORM 中设置 ACTION，点击 SUBMIT，会默认按照 ACTION 指定的地址进行页面跳转，并且把表单中的信息传递过去（非前后端分离项目中，由服务器进行页面渲染，由其它语言实现数据交互，一般都是这样处理）

<form action="http://www.baidu.cn/">
    <input type="submit" value="提交">
</form>

如何阻止默认行为

阻止 A 标签的默认行为：很多时候我们使用 A 标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位

在结构中阻止

javascript:void 0/undefined/null...

<a href="javascript:;">百度</a>

在 JS 中也可以阻止

给其 CLICK 事件绑定方法，当我们点击 A 标签的时候，先触发 CLICK 事件，其次才会执行自己的默认行为

link.onclick = function (ev) {
  ev = ev || window.event;
  return false;
};

tempInp.onkeydown = function (ev) {
  ev = ev || window.event;
  ev.preventDefault ? ev.preventDefault() : (ev.returnValue = false);
  return false;
};

tempInp.onkeydown = function (ev) {
  ev = ev || window.event;

  let val = this.value.trim(), //=>TRIM 去除字符串首位空格(不兼容) this.value=this.value.replace(/^ +| +$/g,'')
    len = val.length;
  if (len >= 6) {
    this.value = val.substr(0, 6);

    //=>阻止默认行为去除特殊按键（DELETE\BACK-SPACE\方向键...）
    let code = ev.which || ev.keyCode;
    if (!/^(46|8|37|38|39|40)$/.test(code)) {
      ev.preventDefault ? ev.preventDefault() : (ev.returnValue = false);
    }
  }
};

JavaScript 基础-事件处理