javascript 事件基础

Posted 2020-10-26 柴小智

tags:

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

一：事件流

事件流描述的是从页面中接收事件的顺序。

事件冒泡

    <div id="one">
        <div id="two">
            <div id="three">点击</div>
        </div>
    </div>

    document.getElementById("one").addEventListener("click", clickOne);　　　　//默认最后一个参数为false，即表示事件冒泡机制
    document.getElementById("two").addEventListener("click", clickTwo);
    document.getElementById("three").addEventListener("click", clickThree);

    function clickOne() {
        console.log("点击的是one");
    }
    function clickTwo() {
        console.log("点击的是two");
    }
    function clickThree() {
        console.log("点击的是three");
    }

点击id为three的div，会依次打印出结果：点击的是three、点击的是two、点击的是one。

事件捕获

    document.getElementById("one").addEventListener("click", clickOne, true);　　　　//把最后一个参数改为ture,即实行事件捕获机制
    document.getElementById("two").addEventListener("click", clickTwo, true);
    document.getElementById("three").addEventListener("click", clickThree, true);

    function clickOne() {
        console.log("点击的是one");
    }
    function clickTwo() {
        console.log("点击的是two");
    }
    function clickThree() {
        console.log("点击的是three");
    }

将点击id为three的div，会依次打印出结果：点击的是one、点击的是two、点击的是three。

二：事件处理机制

1.HTML事件处理程序

    <div id="one">
        <div id="two">
            <div id="three" onclick="clickThree()">点击</div>
        </div>
    </div>

function clickThree() {
    console.log("点击的是three");
}

2.DOM0级事件处理程序

    var btn2 = document.getElementById("two");
    btn2.onclick = function () {
        console.log("点击的是two");
    }

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

3.DOM2级事件处理程序

DOM2级事件定义了2个方法，用于处理指定和删除事件处理程序的操作，addEventListener()和removeEventListener()。

所有DOM节点都包含这两个方法，他们包含三个参数，第一个参数为事件类型；第二个参数为事件函数，第三个参数为布尔值，

如果是true的话，说明是事件流是捕获事件，如果是false的话，那么事件流是冒泡事件；

    document.getElementById("one").addEventListener("click", clickOne);
    document.getElementById("two").addEventListener("click", clickTwo);
    document.getElementById("three").addEventListener("click", clickThree);
　　document.getElementById("one").removeEventListener("click",clickOne);　　//移除事件

    function clickOne() {
        console.log("点击的是one");
    }
    function clickTwo() {
        console.log("点击的是two");
    }
    function clickThree() {
        console.log("点击的是three");
    }

整体上来说，是哪个先注册，哪个先执行。另外老版本的IE和跨浏览器的问题就不赘述了，都是一些历史过时问题了。

三、事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息；包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

里面有一些重要常用的属性及方法，如：

type属性：用于获取事件类型

target属性：用于获取事件目标

stopPropagation方法：用于阻止事件冒泡

e.preventDefault()方法：阻止事件的默认行为（如a标签的跳转）

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e);
}

下面我们来看看最基本的成员的含义吧；如下：

属性/方法	类型	含义
bubbles	Boolean	事件是否冒泡
cancelable	Boolean	是否可以取消事件的默认行为
currentTarget	Boolean	事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	为true 表示已经调用了preventDefault()
detail	Integer	与事件相关的细节信息
eventPhase	Integer	调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
preventDefault()	Function	取消事件的默认行为。如果cancelable是 true，则可以使用这个方法
stopImmediatePropagation()	Function	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
stopPropagation()	Function	取消事件的进一步捕获或冒泡。如果bubbles 为true，则可以使用这个方法
target	Element	事件的目标
type	String	被触发的事件的类型
view	AbstractView	与事件关联的抽象视图。等同于发生事件的 window对象

理解currentTarget与target

在事件处理程序内部，this始终等于currentTarget值，即currentTarget是指当前被触发或者说正在处理事件的那个元素，而target是指当前的目标元素；

比如如下代码，对btn按钮触发点击事件，那么e.currentTraget指向了this，e.target也指向了this；如下代码：

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e.currentTarget == this); // true
    console.log(e.target == this);  // true
}

但是如果我对document.body触发点击的话，那么e.currentTarget就指向了document.body了，那么e.target 指向与 btn那个元素了，如下代码：

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

现在应该能理解currentTarget与target的区别吧！currentTarget就是指被点击的那个元素，但是target是当前点击的目标元素，

如上代码，由于btn上并没有注册事件，结果click事件就冒泡到了document.body，在那里事件才得到了处理。

4.事件类型：

4.1鼠标事件：当用户通过鼠标在页面操作时触发；