zoukankan      html  css  js  c++  java
  • 大白跟着“菜鸟”学node——同名事件

    若存在两个同名事件,触发事件时,两个事件监听器的回调函数会被按次序先后调用

    实例来自菜鸟教程:

    var events=require('events');
    var emitter=new events.EventEmitter();
    emitter.on('someEvent',function(arg1,arg2){
        console.log('listener1',arg1,arg2);
    });
    emitter.on('someEvent',function(arg1,arg2){
        console.log('listener2',arg1,arg2);
    })
    emitter.emit('someEvent','arg1参数','arg2参数');

    运行结果:

     (图省事把名字命名成同名事件了……)

    来猜想一下JS中的同名事件……

    呀一下子记不太全JS的事件绑定方法有哪些和区别了……

    直接在DOM里绑定事件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同名事件测试</title>
    </head>
    <body>
            <button onclick="alert('1')" onclick="alert('2')">点击</button>    //谁会写这种代码啊???只是测试测试
        
    </body>
    </html>

    这样子绑定,结果弹出:1

    脚本里绑定:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同名事件测试</title>
    </head>
    <body>
            <button>点击</button>
            <script type="text/javascript">
                window.onload=function(){
                    var btn=document.getElementsByTagName('button')[0];
                    btn.onclick=function(){
                        alert('1')
                    }
                    btn.onclick=function(){
                        alert('2')
                    }
                }
            </script>
    </body>
    </html>

    这样子绑定,结果弹出:  2

    猜猜看这个的结果,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同名事件测试</title>
    </head>
    <body>
            <button onclick="alert('1')" onclick="alert('2')">点击</button>
            <script type="text/javascript">
                window.onload=function(){
                    var btn=document.getElementsByTagName('button')[0];
                    btn.onclick=function(){
                        alert('3')
                    }
                    btn.onclick=function(){
                        alert('4')
                    }
                }
            </script>
    </body>
    </html>

    结果是,弹出:

        直接在DOM里绑定事件和脚本里面绑定的事件有优先级吗?还是说会触发后绑定的。

    addeventListener可以同时绑定多个事件,且都会执行:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同名事件测试</title>
    </head>
    <body>
            <button onclick="alert('1')" onclick="alert('2')">点击</button>
            <script type="text/javascript">
                window.onload=function(){
                    var btn=document.getElementsByTagName('button')[0];
                    btn.addEventListener('click',function(){
                        alert('3')
                    });
                    btn.addEventListener('click',function(){
                        alert('4')
                    });
                }
            </script>
    </body>
    </html>

    结果,这里依次弹出 1,3,4  好厉害

  • 相关阅读:
    cf round #421 div2 D. Mister B and PR Shifts
    cf round #421 div2 C. Mister B and Boring Game(trick)
    UVa 12716 GCD XOR
    cf 821E Okabe and El Psy Kongroo(矩阵快速幂)
    hdu 6109 数据分割(并查集+set)
    poj 2887 Big String(块状链表)
    hdu 6119 小小粉丝度度熊(区间双指针)
    hdu 6118 度度熊的交易计划(可行费用流)
    hdu 6015 Gameia(树上博弈)
    hdu 6096 String(AC自动机巧妙建图)
  • 原文地址:https://www.cnblogs.com/em2464/p/7995081.html
Copyright © 2011-2022 走看看