zoukankan      html  css  js  c++  java
  • javascript事件处理程序的3个阶段

    第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数.

    1 <input  type="button" value="单击" onclick="test()"/>
    1 function test() {
    2             alert(0);
    3         }

    这种写法有2个缺点:
    1.存在时差问题.用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误.
    2.HTML和javascript紧密耦合,如果要更换事件处理程序,则就要同时修改HTML和jiavascript代码,给维护工作带来了很大的麻烦.


    第二阶段:DOM0级事件处理程序阶段

    1 <input type="button"  value="click" id="guoBtn"/>
    1 var btn = document.getElementById("guoBtn");
    2             btn.onclick = function () {
    3                 alert("你单击了我");
    4             }

     我现在有一个新的需求就是,我不光想要它在这个事件中弹出"你单击了我",我还要它在相同的事件名下,在弹出"其实你只单击了我一次,但是我却弹出2次"的提示.

    1 btn.onclick = function () {
    2                 alert("其实你只单击了我一次,但是我却弹出2次");
    3             }

     这种情况下,它只执行后面一个提示.实际上只执行一次click的事件处理程序.这个问题在第三阶段得到了解决.

    删除事件处理程序:

    1 btn.onclick = null;

    现在在单击这个按钮后,就不会再有弹出提示了.

    第三阶段:DOM2级事件处理程序,addEventListener()和removeEventListener();

    1 <input  type="button" value="addEventListener" id="guo"/>
    1 var btn = document.getElementById("guo");
    2             btn.addEventListener("click", function () { alert(this.value); }, false);

    第一个参数:事件名
    第二个参数:事件的处理程序
    第三个参数:true表示在事件捕获阶段调用时间处理程序;false表示在冒泡阶段调用事件处理程序.
    给同一个时间添加多个时间处理程序,这是事件处理程序的第二阶段所做不到的.

    1  btn.addEventListener("click", function () { alert("同一个单击,第二次执行"); }, false);

     这样的写法,是没有办法删除掉事件处理程序的,因为调用的匿名函数没有相应的应用(没有一个变量来接受)所以必须得做一些改动

    1 var hander = function () {//将处理程序提取出来
    2                 alert("同一个单击,第二次执行");
    3             }
    4             btn.addEventListener("click", hander, false);
    5             btn.removeEventListener("click",hander,false);

    现在在单击这个按钮的话,就没有了后面的提示了.

  • 相关阅读:
    某个应用使cpu使用率100%
    cpu上下文切换(下)
    kafka集群安装和kafka-manager
    cpu上下文切换
    oralce 记一次 External Procedure initial connection 处理
    Oracle 监听
    Oracle 序列
    Oracle 同义词
    发布到远程存储库时遇到错误: Git failed with a fatal error.
    报表加入参数
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/3637945.html
Copyright © 2011-2022 走看看