event 事件1

1、事件流

1.1 事件冒泡

IE8- 浏览器支持的事件流是事件冒泡。事件冒泡是事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）的过程。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="myDiv">Click me </div>

</body>

</html>

在上面的HTML页面中，如果点击了页面中的 div#myDiv ，那么事件就会按照如下顺序冒泡：div --> body --> html -->document。也就是说，click 事件在这些元素上都会发生。

所有现代浏览器都支持事件冒泡，IE9+、Firefox、Chrome、Safari 会将事件一直冒泡到 window 对象。

1.2 事件捕获

事件捕获与事件冒泡过程相反。事件捕获是由不太具体的节点先接收到事件，而最具体的节点最后接收到事件，由上而下触发事件。

以上面的HTML页面为例，如果点击了页面中的 div#myDiv ，那么事件就会按照如下顺序捕获触发：document --> html --> body -->div。

IE9+、Firefox、Chrome、Safari 都支持事件捕获，并且是由 window 对象开始捕获事件的。

1.3 DOM事件流

“DOM2级事件”规定事件流包括三个阶段，其顺序是：事件捕获阶段、处于目标阶段、事件冒泡阶段。

“DOM2级事件”规定要求捕获阶段不会涉及事件目标，但 IE9+、Firefox、Chrome、Safari、Opera9.5+ 都会在捕获阶段和冒泡阶段触发目标对象上的事件，即有两此处理目标对象事件的机会。IE8- 不支持DOM事件流。

2、事件处理程序

事件是用户或者浏览器自身执行的某个动作，诸如，click、load、mouseover等。事件处理程序（事件侦听器）是响应事件的函数，以“on“ 开头。为事件指定处理程序的方式有多种。

2.1 HTML 事件处理

每个元素值得每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值是能够执行的 JavaScript 代码。且这个值不能使用未经转义的HTML语法字符，如：&、”“、<、>等，如果要使用这些字符，需要使用转义值。

这样指定事件处理程序会创建一个封装着元素属性值的函数，这个函数有一个event变量指向事件对象，而且在这个函数内部，this 指向目标元素。这个函数扩展了它的作用域，可以访问document对象以及该元素本身成员。如果当前元素是一个表单元素，则作用域还会包含表单元

    <button onclick="alert('&quot;clicked&quot;')">点我</button>  <!--在此不能直接使用双引号（""） -->

    <button onclick="showMessage()">点我</button> <!--可以访问全局作用域中的函数 -->

    <button value="hello" onclick="alert(this.value +' '+event.type)">点我</button> <!--暗中包含 event事件对象 和 this（目标元素） -->

    <button id="helloid" onclick="alert(this.id +' '+event.type)">点我</button> <!--可以 this.attr 访问元素的属性 -->

    <button value="hello" onclick="alert(value +' '+event.type)">点我</button> <!--直接访问元素的属性，button在IE7-中 js访问的value值是button的文本值，其他浏览器则是value特性的值-->

    <button value="hello" onclick="showMessage(event,this)">点我</button> <!--传递参数 event 和 this -->

    <input type="button" value="hello" onclick="showMessage(event,this)"/> <!-- -->

    <form action="">

        <input type="text" name="username" value="">

        <input type="button" value="echo UserName" onclick="alert(username.value)"> <!--直接访问form表单的其他表单元素 -->
    </form>

function showMessage(event,element){
    console.log(event.type);
    console.log(element.value);
}

所有现代浏览器都支持这种方式添加事件处理程序。

2.2 DOM0 级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性，会覆盖HTML特性指定的事件处理程序。

每个元素（包括 window 和 document）都有自己的事件处理程序属性，通常是小写的，如 onclick。

使用DOM0 级方法指定的事件处理程序被认为是元素的方法，所以事件处理程序是在元素的作用域中运行的，即程序中 this 指向当前元素。DOM0的事件处理程序是在事件冒泡阶段被处理的。

var btn = document.getElementById("myBtn");

btn.onclick = function(){  // 覆盖HTML 特性指定的事件处理程序

    alert(this.id);  // this 指向btn

}

btn.onclick = null; // 删除事件处理程序

所有现代浏览器都支持这种方式。

2.3 DOM2 级事件处理程序

“DOM2 级事件”定义了两个方法，用于增加、删除事件处理程序的操作，addEventListener(eventType, handler, notBubble)，removeEventListener(eventType, handler, notBubble)，所有节点都包含这两个方法。

eventType：事件类型，"click"、"load"等；handler：事件处理函数；notBubble：是否在冒泡阶段处理，true（捕获阶段调用事件处理程序），false（冒泡阶段处理事件）。

使用 addEventListener() 可以添加多个事件处理程序，并按照添加的顺序执行，添加的事件处理程序是在元素的作用域中运行的，即程序中 this 指向当前元素。removeEventListener()不能移除用匿名函数添加的事件处理程序

function showMessage(){

    console.log("third event process");

}

var btn = document.getElementById("mybtn");

var btn2 = document.getElementById("mybtn2");

var btn3 = document.getElementById("mybtn3");

btn.addEventListener("click",function(){   // 添加匿名处理函数，不能被移除; 第二个执行

    console.log("another event process");
    console.log(this.id);   // this 指向当前元素

},false); 

btn.onclick = function(){  //第一个执行

    console.log(this.id);
}

btn.addEventListener("click",showMessage,false); // 添加命名处理函数，可以被移除；第三个执行

btn2.onclick = function () { 
    btn.onclick = null; // 删除事件处理程序，使用addEventListener()添加的处理程序仍然存在 
} 
btn3.onclick = function () { 
    btn.removeEventListener("click",showMessage,false); // 删除事件处理程序
}

Chrome、Firefox、Safari、Opera、IE9+ 支持 addEventListener()，removeEventListener()

2.4 IE 事件处理程序

IE10- 实现了 attachEvent(eventType,handler)，detachEvent(eventType,handler)，来添加、去除事件处理程序，其中evenType是包含 "on"的，如"onclick"。IE11不支持。

因为IE8- 只支持事件冒泡，所以使用 attachEvent() 添加事件处理程序，会添加到事件冒泡阶段，并且事件处理函数会在全局作用域中执行，即 this 指向 widow 对象。也可添加多个事件处理程序，但IE8-按照以与添加顺序相反的顺序执行事件处理函数，而IE9、IE10 按照正序执行。

function showMessage(){

    console.log("third event process");

}

var btn = document.getElementById("mybtn");

var btn2 = document.getElementById("mybtn2");

var btn3 = document.getElementById("mybtn3");

btn.attachEvent("onclick",function(){   // IE8- 第三个执行，IE9、IE10第二个执行

    console.log("another event process");

    console.log(this == window);  //true，事件添加 this 指向 window 对象

});


btn.onclick = function(){     // 第一个执行
    console.log(this.id);
}

btn.attachEvent("onclick",showMessage); // IE8- 第二个执行，IE9、IE10第三个执行

btn2.onclick = function () {

    btn.onclick = null; // 删除事件处理程序

}

btn3.onclick = function () {

    btn.detachEvent("onclick",showMessage); // 删除事件处理程序

}

注意：在一个事件有多个处理程序时，如果其中一个处理程序某处发生错误了，只会影响该处理程序的后面的代码，并不影响其他的事件处理程序的执行，以及事件传播，不管这些事件程序是以什么方法添加的。

3、事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，包含着所有与事件有关的信息。只有在事件处理程序执行期间，event 对象才会存在，事件处理程序执行完后，event对象就会被销毁。

3.1 DOM中的事件

兼容DOM事件（包含DOM0和DOM2）的浏览器会将一个 event 对象传入到事件处理程序中。以HTML特性添加的事件处理程序也存在 event 对象，并且和DOM事件对象具有一样的操作。

DOM事件对象的属性和方法：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前正在处理事件的那个元素，等于 this 对象
defaultPrevented	Boolean	只读	为true表示已经调用了preventDefault()
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段，1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable是true，则可以使用这个方法
stopImmediatePropagation()	Function	只读	取消时间进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级）
stopPropagation()	Function	只读	取消事件进一步捕获或冒泡。如果bubbles为true，则可使用这个方法
target	Element	只读	事件的目标元素
trusted	Boolean	只读	为true表示事件是浏览器生成的，为false，表示事件是有开发者通过JavaScript创建的（DOM3级）
type	String	只读	事件的类型
view	AbstructView	只读	与事件关联的抽象视图，等同于发生事件的window对象

var btn = document.getElementById("mybtn");

var btn2 = document.getElementById("mybtn2");

var link = document.getElementById("myLink");

btn.onclick = function(event){

    console.log(event.type); // "click"

    console.log(event.currentTarget == this); //true

    console.log(event.target == this); // true

    console.log(event.eventPhase);  //

}

btn.addEventListener("click",function (event) {

    console.log(event.type);  // "click"

    console.log(event.eventPhase);  //

},false);

document.body.onclick = function(event){  // 事件冒泡到body

    console.log(event.currentTarget == document.body); // true

    console.log(this == document.body); // true

    console.log("body-bubbles:"+event.target.id); //

    console.log(event.eventPhase); //

}

document.body.addEventListener("click",function(event){

    console.log("body-capture: "+event.type +"，target: "+ event.target.id);

    //event.stopPropagation(); // 如果在捕获阶段阻止事件传播，目标元素定义的事件处理程序就不会执行了

    console.log(event.eventPhase); //

},true);

var handler = function(event){

    switch(event.type){

        case "click":

            console.log("clicked");break;

        case "mouseover":

            event.target.style.backgroundColor = "red";break;

        case "mouseout":

            event.target.style.backgroundColor = "";break;

    }

}

btn2.onclick = handler;

btn2.onmouseover = handler;

btn2.onmouseout = handler;

// <a href="https://www.baidu.com" target="_blank" id="myLink" onclick="event.preventDefault();">baidu</a>

link.onclick = function(event){

    event.preventDefault();

}

3.2 IE中的事件对象

1）DOM0级添加的事件处理程序，事件对象是作为 window 对象的一个属性（event）而存在。在IE9+中事件对象对象也会作为参数传入事件处理程序函数（其实是IE9+开始支持DOM事件对象）。

2）attachEvent() 添加的，事件对象对象作为参数传入事件处理程序函数，同时也可以通过 window.event 得到事件对象

3）通过 HTML 指定的事件处理程序，也可以通过 event 变量访问事件对象（与DOM中一样）

IE事件对象的属性和方法：

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认值为false，将其设置为true就取消事件传播
returnValue	Boolean	读/写	默认值为true，设置为false取消事件的默认行为
scrElement	Element	只读	事件的目标元素
type	String	只读	事件类型

var btn = document.getElementById("mybtn");

var link = document.getElementById("myLink");

btn.attachEvent("onclick",function(event){

    console.log(this == window);  //true

    console.log(event.srcElement.tagName);  //

    console.log(window.event.srcElement.tagName); // event 和 window.event 是不相等的

});

btn.onclick = function(event){

   console.log(this == window.event.srcElement);  // true

    事件对象

   console.log(event); // 在IE8- 中， 参数 event 的值是undefined

   console.log(window.event.type); //click, 所有IE 都支持，新版本的Chrome、edge也支持，Firefox不支持

    console.log(event == window.event); // false, IE9+ 开始支持DOM 事件对象，但参数event 和 原本 window.event 不是同一个事件对象

    event.stopPropagation();  // 在IE9+ 中能运行。IE8-报错

    event =  window.event;

    event.cancelBubble = true; // 阻止事件传播

}

document.body.onclick = function(){  // 事件冒泡到body

    console.log("body clicked");

}

link.onclick = function(event){  //在IE8- 中， 参数 event 的值是undefined

    var event =  window.event;

    event.returnValue = false; // 阻止默认行为

}

4、事件类型

event 事件1的更多相关文章

[.NET] C# 知识回顾 - Event 事件
C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序昨天,通过<C# 知识回顾 - ...
Event事件
妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...
JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果一.鼠标事件 onclick ---------------鼠标点击事 ...
JS(event事件)
常用的event事件: 属性此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事 ...
event事件学习小节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Javascript 事件对象（二）event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
PHP event 事件机制
PHP event 事件机制 <?php /* * PHP 事件机制 */ class baseClass{ private $_e; public function __set($name ...
trigger()的event事件对象之坑
问题引入,先贴一段有问题的代码,如果你对 trigger() 这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...
Event事件详解
首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...

随机推荐

工控随笔_03_西门子_Step7项目打开后CPU显示问号解决方法
我们在利用西门子的S7-300/400 PLC的编程软件Step7的时候会出现下面如图所示的问题. 在打开项目的时候,我们会在Simatic Manager里面看到CPU以及一些其他一些组件显示问号. ...
WEB 性能优化导图
看了一下网上对于web性能优化的一些帖子,不是很直观,花了点时间画了一个思维导图. refers: https://segmentfault.com/a/1190000011936772 https: ...
关于Oracle字符集在dmp文件导入导出中的乱码影响
Oracle 在进行dmp备份和还原的时候,服务器端字符集和客户端字符集会对这个过程有较大影响,特别是数据表中存储了中文.存储过程中使用了中文编码(注释)的时候,如果没有处理好字符集的问题,在进行还原 ...
京东饭粒捡漏V1.0.7
20180614 更新 V1.0.71.修改捡漏策略功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用户监控抢购商品,有库存的时候进行抢单,主要是通过添加商品ID - ...
使用Netty开发RPC的技术原理
本片文字摘抄自https://www.cnblogs.com/jietang/p/5615681.html 1.定义RPC请求消息.应答消息结构,里面要包括RPC的接口定义模块,包括远程调用的类名.方 ...
多任务fork、multiprocessing、进程池、进程间通信-Queue
并发:一个处理器同时处理多个任务. 并行:多个处理器或者是多核的处理器同时处理多个不同的任务. fork创建子进程 import os import time #fork出一个子进程,子进程也从这一行 ...
ocr_vote disk损坏恢复
1. 检查votedisk和 ocr备份[root@rh6rac1 bin]./ocrconfig -showbackuprh6rac1 2019/03/19 16:57:40 /or ...
dis集群研究和实践（基于redis 3.0.5）《转载》
https://www.cnblogs.com/wxd0108/p/5798498.html 前言 redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用.现在的 ...
Allegro16.6 PCB 导入DXF 外框后曲线不闭合
Allegro16.6 PCB 导入DXF 外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...
（转）Mysql哪些字段适合建立索引
工作中处理数据时,发现某个表的数据达近亿条,所以要为表建索引提高查询性能,以下两篇文章总结的很好,记录一下,以备后用. 数据库建立索引常用的规则如下: 1.表的主键.外键必须有索引: 2.数据量超过3 ...

event 事件1

event 事件1的更多相关文章

随机推荐

热门专题