zoukankan      html  css  js  c++  java
  • javascript 事件处理程序

    1、DOM0级事件处理程序

     
    将一个函数值给一个事件处理程序属性。
     
    例如: var btn = document.getElementById("myBtn");
               btn.onclick = funtion(){
                   alert(this.id);     //"myBtn"
              }
     
    删除事件,btn.onclick = null;

     
    2、DOM2级事件处理程序
     
    先介绍,“DOM2级事件”定义的两个方法,用于处理指定和删除事件处理程序的操作:
     
              addEventListener()
              removeEventListener()
     
    所有DOM节点都包含这两个方法,接受3个参数:处理事件名、作为事件处理程序的函数、一个布尔值。
    最后的布尔值参数,true:表示在捕获阶段调用事件处理程序;false:表示在冒泡阶段调用事件处理程序。\
     
          var btn = document.getElementById("myBtn");
         btn.addEventListener("click",funciton(){
              alert(this.id);
         },false);
     
    用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。
     
    例如:
     
          var btn = document.getElementById("myBtn");
          btn.addEventListener("click",funciton(){
              alert(this.id);
         },false);
     
         btn.addEventListener("click",funciton(){
              alert(“Hello World!”);
         },false);
     
    这两个事件会按照顺序触发。
     
    通过 addEventListener()添加的事件只能用removeEventListener()移除。移除时传入的参数需与添加时的参数一致,也就是说匿名函数将无法移除。
     
       var btn = document.getElementById("myBtn");
         var handler = function(){
              alert(this.id);
         };
     
         btn.addEventListener("click" , handler , false);
     
         btn.removeEventListener("click", handler , false);
     
         大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,以便兼容各种浏览器。
     
     
         firefox、safari、chrome、opera支持DOM2级事件处理程序。
     

    3、IE事件处理程序
     
    IE实现了与DOM中类似的两个方法:
     
              attachEvent()
              detachEvent()
     
    这两个方法都接受两个参数:事件处理程序名称和事件处理程序函数。
    由于IE只支持时间冒泡,所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。
     
    例如:
     
               var btn = document.getElementById("myBtn");
                  btn.attachEvent("onclick" , function(){
                        alert("Clicked");
                   })
     
     
         注意,attachEvent()的第一个参数是“onclick”,而非 “click”。
     
    IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。
     
    1. DOM0级方法,事件处理程序会在所属元素的作用域内运行;
    2. attachEvent()方法,事件处理程序会在全局作用域中运行,因此 this等于 window。
     
    attachEvent()也可以为一个元素添加多个事件处理程序。
     
     var btn = document.getElementById("myBtn");
     
    btn.attachEvent(”onclick“ , function(){
         alert("clicked");
    })
     
    btn.attachEvent(”onclick“ , function(){
         alert("Hello World!");
    })
     
         与DOM方法不同的是,这些事件处理程序不是以添加顺序执行,而是以相反的方向执行。
     
    detachEvent() 的用法与removeEventListener()的用法一样。

     
    4、跨浏览器的事件处理程序
     
         var EventUtil = {
                  
              addHandler : function(element,  type ,  handler){
                   if (element.addEventListener){
                        element.addEventListener(type,  handler,  false);
                   } else if ( element.attachEvent){
                        element.attachEvent("on" + type , handler)
                   } else {
                        element["on" + type] = handler;
                   }
              
              },
     
              removeHandler: function( element , type , handler){
                   if ( element.removeElementListener) {
                        element.removeElementListener( type , handler , flase);
                   } else if ( element.detachEvent) {
                        element.detachEvent ( "on" + type , handler)
                   } else {
                        element["on" + type] = handler;
                   }
              }
     
              
         }
  • 相关阅读:
    状态压缩 + 暴力 HDOJ 4770 Lights Against Dudely
    简单几何(推公式) UVA 11646 Athletics Track
    简单几何(四边形形状) UVA 11800 Determine the Shape
    简单几何(求交点) UVA 11437 Triangle Fun
    计算几何模板
    简单几何(相对运动距离最值) UVA 11796 Dog Distance
    简单几何(求划分区域) LA 3263 That Nice Euler Circuit
    覆盖的面积 HDU
    Desert King 最小比率生成树 (好题)
    约会安排 (区间合并)毒瘤题
  • 原文地址:https://www.cnblogs.com/jingyi/p/2565693.html
Copyright © 2011-2022 走看看