事件

2019-08-27 本文已影响0人 zooeydotmango

JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）

JavaScript采用异步事件驱动编程模型

事件流

事件流描述的就是从页面中接收事件的顺序。而IE和Netscape提出了完全相反的事件流概念。IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

事件处理程序(Listener)

addEventListener()
removeEventLister()

他们都接受三个参数：

事件类型
事件处理方法
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);
</script>

使用addEventListener可以添加多个处理程序

通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);
    }

    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);
</script>

事件常用属性

stopPropagation()
阻止捕获和冒泡阶段中当前事件的进一步传播
preventDefault()
阻止默认事件
target
触发事件的对象 (某个DOM元素) 的引用，可以用来实现事件委托

$('.container').onclick = function(e){
  console.log(this)  
  console.log(e.target)
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}

HTML常用事件

鼠标事件

onmousedown, onmouseup, onclick, ondbclick, onmousewheel, onmousemove, onmouseover, onmouseout

触摸事件

ontouchstart, ontouchend, ontouchmove

键盘事件

onkeydown, onkeyup, onkeypress

页面相关事件：

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：在一个拖动过程中，释放鼠标键时触发此事件；

自定义事件

假如有两个功能是互相绑定的，可以使用这种方法实现解耦

var EventCenter = {
  on: function(type, handler){
    document.addEventListener(type, handler)
  },
  fire: function(type, data){
    return document.dispatchEvent(new CustomEvent(type, {  //发送一个事件
      detail: data
    }))
  }
}

EventCenter.on('hello', function(e){
  console.log(e.detail)
})

EventCenter.fire('hello', '你好')

事件

事件流