事件3阶段

Posted pavilion-y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件3阶段相关的知识,希望对你有一定的参考价值。

1. 事件

1.1. 事件冒泡

当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。

说白了就是:当我们触发了子元素的某个事件后,父元素对应的事件也会触发。 技术分享图片

通常情况,事件冒泡对于我们来说是没有问题的,我们直接不管就行了,但是如果当事件冒泡给我们带来影响的时候,我们需要阻止事件冒泡。

 

阻止事件冒泡有浏览器兼容性问题

正常浏览器:

link.onclick = function (event) {
    event = event || window.event;
    //stop :停止  propagation:传播
    event.stopPropagation();
}

IE678浏览器:

link.onclick = function (event) {
    event = event || window.event;   
    event.cancelBubble = true;
}

兼容性处理

link.onclick = function (event) {
    event = event || window.event;
    if(event.stopPropagation){
          event.stopPropagation();
    }else {
          event.cancelBubble = true;
    }
}

1.2. 事件捕获(了解)

事件捕获是火狐浏览器提出来的,IE678不支持事件捕获(基本上,我们都是用事件冒泡) 事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递

【04-事件捕获.html

技术分享图片

//当addEventListener第三个参数为true时,表示事件捕获
arr[i].addEventListener("click", function () {
    console.log(this);
},true);

1.3. 事件的三个阶段

  1. 事件的捕获阶段
  2. 事件的目标阶段
  3. 事件的冒泡阶段

    技术分享图片

事件有三个阶段,首先发生的是捕获阶段,然后是目标阶段,最后才是冒泡阶段,对于捕获和冒泡,我们只能干预其中的一个,通常来说,我们可能会干预事件冒泡阶段,而不去干预事件捕获阶段。

1.4. 常见的事件

常见的鼠标事件

onmousedown:鼠标按下事件

onmouseup:鼠标弹起事件

onclick:单击事件

ondblclick:双击事件

onmouseover:鼠标经过事件

onmouseout:鼠标离开事件

onmousemove:鼠标移动事件

onfocus:鼠标获得焦点事件

onblur:鼠标失去焦点事件

常见的键盘事件

onkeydown:键盘按下时触发

onkeyup:键盘弹起时触发

 

keypress输出的keycode是ascii码
 
想要获取按下的是哪个键,只能keydown  keyup
var input = document.querySelector("input");
  input.onkeypress = function (e) {
    //keypress输出的keycode是ascii码
//    console.log(e.keyCode);
  }
  //想要获取按下的是哪个键,只能keydown  keyup  (如果想要获取文本框的值,)
  input.onkeydown = function (e) {
    console.log(e.keyCode);
  }

 

对于鼠标事件,事件对象中有一系列的XY记录了鼠标的位置信息。而键盘事件中,事件对象有一个event.keyCode属性,记录了按下去的键的键盘码

 

以上是关于事件3阶段的主要内容,如果未能解决你的问题,请参考以下文章

事件高级 DOM事件流 捕获阶段/冒泡阶段

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段

Reactreact概述组件事件

事件捕获和事件冒泡理解

事件3阶段

如何使用事件侦听器来加载动画片段的循环