zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Java中的Java.lang.ThreadLocal类
    Java中线程的生命周期和状态
    Circular Linked List数据结构
    Linked List数据结构
    JVM如何工作
    JVM运行时数据区域
    queue数据结构
    stack数据结构
    Java中Set/HashSet的内部处理
    POJO,JavaBean 以及他们之间的区别
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5560547.html
Copyright © 2011-2022 走看看