JavaScript

JavaScript 事件

Posted by 松一老贼 on February 28, 2018

什么是事件

元素默认自带事件行为，当操作元素时，会触发相应的事件；

元素的事件并不是因为后期的赋值才有，如果没有赋予相应的事件函数，事件也会触发，只是没有效果。

事件绑定

DOM0级事件绑定

属性值是一个函数，如果不是函数，那么不会改变默认属性值null.

oBox.onclick = function(){}

如果给一个元素对象的相同事件行为多次绑定函数，只有最后一个的函数有效。

移除事件方法：

oBox.onclick = null;

DOM2级事件绑定

addEventListener([String]type[事件类型],function[方法],boolean[true-捕获阶段执行/false-冒泡阶段执行，默认值])

oBox.addEventListener("click",function(){
  alert(1);
},false);
oBox.addEventListener("click",function(){
  alert(2);
},false);

DOM2级事件可以给同一个元素的相同事件行为绑定多个函数。

addEventListener 在IE8–不兼容

可以使用 oBox.attachEvent("onclick",function(){}) ，事件类型需要加 on.

attachEvent 绑定的函数中的 this 指向 window.

attachEvent的参数列表相同的情况下，也可以重复绑定，但 addEventListener 会把后边重复的绑定过滤掉。

执行顺序从后往前冒泡。

  oBox.attachEvent("onclick",function(e){
    console.log(1);
  });
  oBox.attachEvent("onclick",function(e){
    console.log(2);
  });
  // 问题：先输出2，后输出1

移除DOM2级事件方法：

oBox.removeEventListener("click",function(){},false);//与绑定的参数严格一致
oBox.detachEvent("onclick",function(){});

常见的事件行为

文本框事件：

onblur:失焦事件——》也可以元素.blur()

onfocus:聚焦事件—–》也可以元素.focus()

oninput:当input框内容发生变化时触发

键盘事件：

onkeydown:键盘按下

onkeyup:键盘抬起

onkeypress:在keydown事件触发之后才会触发，在keyup抬起前触发，在中文输入环境下不会触发。

鼠标事件：

onclick:单击

ondblclick:双击

onmouseover/onmouseout:鼠标滑过/滑出

onmouseenter/onmouseleave:鼠标滑入/离开—>阻止事件冒泡传播

onmousemove:鼠标移动

onload/onscroll/onresize:加载成功触发、滚动条滚动触发、当前窗口大小发生变化触发

移动端事件

  • 单手指：触摸事件 touchstart touchmove touchend
  • 多手指：gesturestart gesturechange gestureend
  • click:移动端点击，默认等待300ms触发

事件对象

当事件行为被触发时，会给方法传进一个事件信息，是一个对象，这个对象就是当前事件的事件对象。

oBox.onclick = function(e){//e--->事件对象
 console.log(e);
}

e:MouseEvent

e在IE8–下不存在：可通过window.event获取

clientX:当前鼠标点击的位置距离当前窗口左边的距离

clientY:当前鼠标点击的位置距离当前窗口上边的距离

pageX/pageY在IE8–不存在

pageX:当前鼠标点击的位置距离body左边的距离

pageY:当前鼠标点击的位置距离body上边的距离

target:eventTarget,事件源，当前事件被触发所对应的最开始的元素

target在IE8–不存在：但是有srcElement

e.preventDefault:阻止事件的默认行为，IE8–：e.returnValue = false；

e.stopPropagation:阻止事件冒泡传播，IE8–:e.cancleBubble = true;

事件的默认行为

阻止事件的默认行为：

e.preventDefault?e.preventDefault():e.returnValue = false;

事件的冒泡的传播机制

当子元素的某个事件行为被触发，所有的祖先元素相同的事件行为也会依次由内向外依次执行，这种由内向外传播的过程就是事件的冒泡传播。

阻止冒泡传播机制：

e.stopPropagation?e.stopPropagation():e.cancelBubble = true;

事件流

事件执行的流程：事件捕获—-》目标阶段—–》冒泡阶段

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

以前面简单的 HTML 页面为例，单击<div>元素会按照图13-3所示顺序触发事件。

在 DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档 .

多数支持 DOM 事件流的浏览器都实现了一种特定的行为；即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标，但 IE9、 Safari、 Chrome、 Firefox 等都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

事件委托

利用事件的冒泡机制，给最外层元素的事件行为绑定对应的方法，当里面的元素触发事件行为时，那么最外层的事件行为跟着触发，根据事件源的不同执行不同的功能。

CATALOG
    FEATURED TAGS
    css JavaScript html
    FRIENDS