码迷,mamicode.com
首页 > 其他好文 > 详细

事件3阶段

时间:2017-12-29 12:11:02      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:keycode   api   key   键盘   java   文本框   事件冒泡   键盘事件   事件对象   

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阶段

标签:keycode   api   key   键盘   java   文本框   事件冒泡   键盘事件   事件对象   

原文地址:https://www.cnblogs.com/pavilion-y/p/8142974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!