事件

一、事件流

事件捕获：由外到内
事件冒泡：由内到外
DOM事件流：先捕获再冒泡

捕获、冒泡、DOM事件流.png

---

二、接口

addEventListener：绑定事件的监听函数
removeEventListener：移除事件的监听函数
dispatchEvent：触发事件

1、addEventListener()使用

格式：

xxx.addEventListener(type, listener, useCapture);

type：事件类型
listener：事件处理方法
useCapture：布尔参数。true表示捕获阶段，false表示冒泡阶段。

---

addEventListener 不会被覆盖，可实现多个绑定。

效果

代码：

 <button id="btn">点击</button>
  <script>
    var btn = document.querySelector('#btn')
    btn.onclick = function () {
      console.log('哈哈哈')
    }
    btn.onclick = function () {
      console.log('我覆盖了哈哈哈')
    }
    btn.addEventListener('click', function () {
      console.log('嘿嘿嘿')
    }, false)
    btn.addEventListener('click', function () {
      console.log('嘻嘻嘻')
    }, false)
  </script>

事件捕获演示

捕获.gif

HTML

<div class="box1">
  box1
  <div class="box2">
    box2
    <div class="box3">
      box3
    </div>
  </div>
</div>

CSS：

.box1,.box2,.box3 {
  padding: 10px;
  border: 1px solid #000;
} 

js:

var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var box3 = document.querySelector('.box3')

box1.addEventListener('click', function () {
  console.log('这里是box1')
}, true)
box2.addEventListener('click', function () {
  console.log('这里是box2')
}, true)
box3.addEventListener('click', function () {
  console.log('这里是box3')
}, true)

事件冒泡演示

冒泡.gif

HTML、CSS与事件捕获演示的代码一样
js：

var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var box3 = document.querySelector('.box3')

box1.addEventListener('click', function () {
  console.log('这里是box1')
}, false)
box2.addEventListener('click', function () {
  console.log('这里是box2')
}, false)
box3.addEventListener('click', function () {
  console.log('这里是box3')
}, false)

2、removeEventListener()使用

removeEventListener方法用来移除addEventListener方法添加的事件监听函数。
格式与addEventListener一样。

注意：removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。（不支持匿名函数）

  <button id="btn">点击</button>
  <script>
    var btn = document.querySelector('#btn')
    var handler = function () {
      console.log('嘿嘿嘿')
    }
    btn.addEventListener('click', handler,false)
    btn.removeEventListener('click',handler,false)
  </script>

removeEventListener.gif

3、dispatchEvent()使用

4、常用事件对象

• target事件的目标元素
• stopPropagation()取消事件进一步捕获或冒泡
• preventDefault() 取消事件默认行为

target()使用

需求：当点击box输出当前box中的内容。

HTML：

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

js:

用querySelector

//声明$符号
function $(selector) {
  return document.querySelector(selector)
}
//声明$$符号
function $$(selector) {
  return document.querySelectorAll(selector)
}
$('.box').onclick = function () {
  console.log(this.innerText)
}//通过.querySelector()这个方法只能获取第一个box，其它box无法获取。

结果只能获取第一个box.gif

js:

用querySelectorAll + forEach

//需要找到所有的元素，然后遍历出来才可以。
$$('.box').forEach(function (params) {
  params.onclick = function () {
    console.log(this.innerText) 
  } 
})

querySelectorAll + forEach可以实现.gif

在父元素container + target(事件代理)

当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源子box。

$('.container').onclick = function (e) {
//如果点击该元素包含有box的class就执行 
if(e.target.classList.contains('box')){
//对应输出点击的内容
    console.log(e.target.innerText)
  }
}

解释：

为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.classList.contains('box')来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的box节点。从而可以获取到相应的信息，并作处理。

target.gif

stopPropagation()使用

HTML、CSS与事件捕获演示的代码一样

js:

var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var box3 = document.querySelector('.box3')

box1.addEventListener('click', function () {
  console.log('这里是 捕获阶段box1')
}, true)
box2.addEventListener('click', function (e) {
  console.log('这里是 捕获阶段box2 ')
  e.stopPropagation() //阻止事件进一步捕获
}, true)
box3.addEventListener('click', function () {
  console.log('这里是 捕获阶段box3')
}, true)

阻止事件进一步捕获.gif

preventDefault()使用
需求：判断是不是xx的链接，如果是就跳转，不是就不跳转。

<a href="http://baid.com">百度一下</a>
<script>
var a = document.querySelector('a')
a.addEventListener('click',function (e) {
  e.preventDefault()
  console.log(this.href)
    //test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配
  if(/baidu.com/.test(this.href)){ //判断是不是baidu.com。
    //Location 接口表示其链接到的对象的位置（URL）
    location.href = this.href
  }
},false)
</script>

preventDefault().gif

三、常用HTML事件

鼠标事件

mouseenter：指针移到有事件监听的元素内
mouseover：指针移到有事件监听的元素或者它的子元素内
mousemove：指针在元素内移动时持续触发
mousedown：在元素上按下任意鼠标按钮
mouseup：在元素上释放任意鼠标按键
click：在元素上按下并释放任意鼠标按键
dblclick： 在元素上双击鼠标按钮
contextmenu： 右键点击 (右键菜单显示前).
wheel：滚轮向任意方向滚动
mouseleave： 指针移出元素范围外（不冒泡）
mouseout： 指针移出元素，或者移到它的子元素上
select： 文本被选中

---

触摸事件

ontouchstart：当按下手指时
ontouchend：当移走手指时
ontouchmove：当移动手指时

---

键盘事件

keydown： 按下任意按键
keypress：除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)
keyup：释放任意按键

---

页面相关事件

onload：在页面或图像加载完成后立即发生
onmove：浏览器窗口被移动时触发
onresize：浏览器的窗口大小被改变时触发
onscroll：滚动条位置发生变化时触发

---

表单相关事件

onblur：元素失去焦点时触发
onchange：元素失去焦点且元素内容发生改变时触发
onfocus：元素获得焦点时触发
onreset：表单中reset属性被激活时触发)
onsubmit：表单被提交时触发
oninput：在input元素内容修改后立即被触发，兼容IE9+

---

编辑事件

onbeforecopy：当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut：当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus：当前元素将要进入编辑状态
onbeforepaste：内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate：当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu：当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy：当页面当前的被选择内容被复制后触发此事件
oncut：当页面当前的被选择内容被剪切时触发此事件
onlosecapture：当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste：当内容被粘贴时触发此事件
onselect：当文本内容被选择时的事件
onselectstart：当文本内容选择将开始发生时触发的事件

---

拖动事件

ondrag：当某个对象被拖动时触发此事件 [活动事件]
ondragdrop：一个外部对象被鼠标拖进当前窗口时触发
ondragend：当鼠标拖动结束时触发此事件
ondragenter：当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave：当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover：当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart：当某对象将被拖动时触发此事件
ondrop：在一个拖动过程中，释放鼠标键时触发此事件

---