• js的事件处理程序


    js事件处理程序一般有三种:

    1、HTML事件处理程序

    <body>
        <input type="button" value="点击" onclick="mes()" /> 
        <!--js-->
        <script>
           function mes(){
               document.write("hello world!");
           }
        </script>
    </body>

    这种事件方式一般不推荐,变更事件麻烦。

    2、DOM0级处理程序

    <body>
        <input type="button" value="点击" id="btn"/>
        <!--js-->
        <script>
            var btn = document.getElementById("btn");    
            btn.onclick = function(){
                document.write("hello world!");
            }
        </script>
    </body>    

    这里可以 = 一个匿名函数,也可以是已声明函数。

    DOM0级处理程序的清空:element.onclick = null;

    3、DOM2级处理程序

    DOM2级处理程序定义了事件添加和事件删除两个方法。分别是:addEventListener()removeEventListner()

    这两个方法都有三个参数:处理事件名(如:点击事件 click),事件处理的函数(可以是匿名函数也可以是已声明函数,这里一般用已声明函数,方便remove)布尔值(这里的值是调用事件的方式,true为事件捕获,false为事件冒泡,一般设置为事件冒泡)

    添加事件:

    <body>
    <input type="button" value="点击" id="btn"/>
    <!--js-->
    <script>
    var btn = document.getElementById("btn"); 
    btn.addEventListener('click',function(){
      document.write("hello world!");
    },false);
    </script>
    </body>

    删除事件:

    <body>
    <input type="button" value="点击" id="btn"/>
    <!--js-->
    <script>
    var btn = document.getElementById("btn"); 
    btn.addEventListener('click',mes,false);
    </script>
    </body>
  • 相关阅读:
    #575. 「LibreOJ NOI Round #2」不等关系
    P4494 [HAOI2018]反色游戏
    P6378 [PA2010] Riddle
    子集卷积
    躯壳
    C++11、14、17里的lambda表达式简介
    数据结构与算法复习——7、斐波那契堆和配对堆
    数据结构与算法复习——6、二项队列及其分析
    数据结构与算法复习——5、摊还分析入门
    高等代数(二)预习——4、唯一因式分解定理
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5560547.html
Copyright © 2020-2023  润新知