zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Flask&&人工智能AI -- 12
    Flask&&人工智能AI -- 11
    Flask&&人工智能AI -- 10
    Flask&&人工智能AI -- 9
    Flask&&人工智能AI -- 8
    Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview
    Flask&&人工智能AI -- 7 MongoDB
    Flask&&人工智能AI -- 6 人工智能初识,百度AI,图灵机器人
    Flask&&人工智能AI --5 Flask-session、WTForms、数据库连接池、Websocket
    [转]八款开源Android游戏引擎
  • 原文地址:https://www.cnblogs.com/hy-sunny/p/5595391.html
Copyright © 2011-2022 走看看