addEventListener及事件流

addEventListener

定义和用法

addEventListener 用于向指定元素添加事件句柄(又称事件处理函数)

语法

element.addEventListener(event, function, useCapture)

element   文档节点,duocument,window。

event      必须有。是一个字符串,指定事件名(一般不使用“on前缀”,例如“click,mouseover”)。

function  必须有。指定要事件触发时执行的函数(可以是函数,也可以是函数名)。

useCapture 可选。布尔值(true 或者false)指定事件是否在捕获阶段还是在冒泡阶段执行,一般情况下默认值为false

1、如果为true则事件句柄在捕获阶段执行

2、如果为false则事件句柄在冒泡阶段执行

实例

通过点击按钮改变背景色(主要代码):

document.getElementById("Btn").addEventListener("click",function(){    document.getElementById("box").style.backgroundColor = ‘green‘;});

实例

可以在文档中添加多个事件,添加的事件不会覆盖已存在的事件, 该下实例演示了如何在<button>元素中添加两个点击事件:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #box{
        width:50px;
        height:50px;
        background-color: red;
    }
</style>
<body>
    <div id="box">
    </div>
    <button id="Btn">点击</button>
    <script type="text/javascript">
       document.getElementById("Btn").addEventListener("click",function(){
           document.getElementById("box").style.backgroundColor = ‘green‘;
       });
       document.getElementById("Btn").addEventListener("click",function(){
          this.style.backgroundColor = ‘red‘;
       });
    </script>
</body>
</html>

实例

可以通过函数名来引用外部函数(主要代码):

    document.getElementById("Btn").addEventListener("click",changeColor ,true);
       function changeColor(){
           document.getElementById("box").style.backgroundColor = ‘green‘;
       }

有useCapture值时:就要想到 addEventListener-事件流

当一个事件发生时,会有三个阶段

捕获触发  从根节点开始挨个往下,检测每个节点是否检查是否调用了事件处理函数。如果调用了事件处理函数,并且 useCapture 为 true,则调用该事件处理函数。

目标触发  触发在目标对象本身调用了事件处理函数。

冒泡触发  从目标节点到根节点,检测每个节点是否调用了事件处理函数。如果调用了事件处理函数,并且 useCapture 为 false,则调用该事件处理函数。

1、  捕获时,以下执行结果为 2,1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="Btn">点击</button>
    <script type="text/javascript">
        //捕获时触发, 当useCapture为true时触发,因此以下执行的结果是2,1
        var btn=document.getElementById(‘Btn‘);
        btn.addEventListener(‘click‘,function(){alert(‘1‘);},false);
        document.body.addEventListener(‘click‘, function(){alert(‘2‘);},true); //捕获时触发
    </script>
</body>
</html>

2、  冒泡时,以下执行结果为1,2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="Btn">点击</button>
    <script type="text/javascript">
        //冒泡时触发, 当useCapture为false时触发,因此以下执行的结果是1,2
        var btn=document.getElementById(‘Btn‘);
        btn.addEventListener(‘click‘,function(){alert(‘1‘);},false);
        document.body.addEventListener(‘click‘, function(){alert(‘2‘);},false); //冒泡时触发
    </script>
</body>
</html>
时间: 2024-10-15 07:00:34

addEventListener及事件流的相关文章

HTML 事件(三) 事件流与事件委托

本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件流 1.1 何为事件流 1.2 事件流的三个阶段 1.3 addEventListener()注册事件流的阶段 1.4 阻止事件流的传播 2. 事件委托 2.1 何为事件委托 2.2 ul.li场景示例 2.3 JQuery的事件委托

粗浅的总结下事件流

什么是事件流?以及为什么要有事件流? 简单的说,事件流就是,确认触发条件满足时,事件对应函数的调用顺序.举个例子,鼠标光标在某个按钮上点击了,按钮又绑定了mousedown事件,那么其对应的函数就会调用.而其实,光标落下的位置也在document.window的范围内,或许还可能在其他元素的和模型内.如果这些元素也都绑定了mousedown事件,那么哪个元素的mousedown事件对应的函数先调用呢?这就需要确认一个发生的顺序问题. 具体的说,事件流分为三个阶段,即捕获阶段.目标(处理)阶段.冒

JS事件流

事件流:当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件,事件传播的顺序叫做事件流. 一.事件流的分类 1.冒泡型事件(所有的浏览器都支持 w3c标准) 由明确的事件源到最不确定的事件源依次向上触发. 2.捕获型事件(IE不支持 w3c标准 火狐) 不确定的事件源到明确的事件源依次向下触发. addEventListener(事件,处理函数,false) addEventListener(事件,处理函数,true) 二.阻止事件流 IE: 事件对象.canc

浅谈js之事件流

这些日子我就把js的相关知识梳理一下,今天来说javascript中的事件流. 1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到win

事件流及事件冒泡机制

事件流 "DOM2级事件"规定的事件流包括三个阶段: 事件捕获阶段(为截获事件提供了机会) 处于目标阶段(实际的目标接收到事件) 事件冒泡阶段(可以在这个阶段对事件做出响应) IE9.Opera.Firefox.Chrome 和 Safari 都支持 DOM 事件流:IE8 及更早版本不支持 DOM 事件流. 事件冒泡机制 a.在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

DOM事件探秘之事件流与事件处理程序

1.事件流:描述的是从页面中接受事件的顺序 ①.事件冒泡流:即时间最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档).      栗子:若<body><div><input type="button"/></div></body>次结构,点击按钮时,默认点了按钮的容器 默认点了body,默认点了html,默认点了document. ②.事件捕获:不太具体的节点应该更早接收到事

addEventListener 的事件函数的传递【转载】

addEventListener 参数如下: addEventListener(type, listener[, useCapture]); type,事件名称 listener,事件处理器 useCapture,是否捕获 一直把 listener 记成是响应函数,function 类型.相信很多人也是这么理解的.多数时候是这么使用 elem.addEventListener('click', function(ev) { // todo }, false); 第一个参数没什么异议,第二个参数传

javascript事件流讲解和实例应用

当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定  顺序响应该元素的触发事件,事件传播的顺序叫做事件流. 一.事件流的分类 1.冒泡型事件(所有的浏览器都支持 w3c标准)              由明确的事件源到最不确定的事件源依次向上触发,有内向外. 2.捕获型事件(IE不支持 w3c标准 火狐)      不确定的事件源到明确的事件源依次向下触发,由外向内.       addEventListener(事件,处理函数,false)       addEventListen