zoukankan      html  css  js  c++  java
  • js 事件侦听

    方法

    FireFox : addEventListener()方法

    IE : attachEvent()方法

     

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     
    <title>Javascript事件监听</title>
    </head>
    <body>
    <button id="Button1">测试</button>
    <script type="text/javascript">
    function addEventHandler(target, type, func) {
        
    if (target.addEventListener)
            target.addEventListener(type, func, 
    false);
        
    else if (target.attachEvent)
            target.attachEvent(
    "on" + type, func);
        
    else target["on" + type] = func;
    }
    function removeEventHandler(target, type, func) {
        
    if (target.removeEventListener)
            target.removeEventListener(type, func, 
    false);
        
    else if (target.detachEvent)
            target.detachEvent(
    "on" + type, func);
        
    else delete target["on" + type];
    }
    var Button1 = document.getElementById("Button1");
    var Button1Click = function() { alert(1); };
    addEventHandler(Button1, 
    "click",  Button1Click);
    addEventHandler(Button1, 
    "click"function() { alert(2); } );
    addEventHandler(Button1, 
    "click"function() { alert(3); } );
    removeEventHandler(Button1, 
    "click"function() { alert(2); } );
    removeEventHandler(Button1, 
    "click", Button1Click);
    </script>
    </body>
    </html>

    HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclickonmouseover)赋值。

    这两种方法处理事件还是有很大区别的!事件属性只能赋值一种方法,即:

    button1.onclick = function() { alert(1); };
    button1.onclick = function() { alert(2); };
    这样后面的赋值语句就将前面的onclick属性覆盖了。

    而添加事件监听就可以并行。

    特别是当团队合作时,事件并行的需求增多,比如:监听document对象的鼠标事件或者window对象的载入事件等。
    使用事件属性则很容易造成事件覆盖掉。

    经过测试IE(8)中先显示3再显示2,而firefox(3)中则先显示2再显示3,这个是为什么呢?测试的结果即真理,没啥好想

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>Javascript事件监听示例</title>
    </head>
    <body>
    <button id="Button1">测试</button>
    <script type="text/javascript">
    /// <summary>
    //
    / 添加事件监听
    //
    / </summary>
    //
    / <param name="target">载体</param>
    //
    / <param name="type">事件类型</param>
    //
    / <param name="func">事件函数</param>
    function addEventHandler(target, type, func) {
        
    if (target.addEventListener)
            target.addEventListener(type, func, 
    false);
        
    else if (target.attachEvent)
            target.attachEvent(
    "on" + type, func);
        
    else target["on" + type] = func;
    }
    /// <summary>
    //
    / 移除事件监听
    //
    / </summary>
    //
    / <param name="target">载体</param>
    //
    / <param name="type">事件类型</param>
    //
    / <param name="func">事件函数</param>
    function removeEventHandler(target, type, func) {
        
    if (target.removeEventListener)
            target.removeEventListener(type, func, 
    false);
        
    else if (target.detachEvent)
            target.detachEvent(
    "on" + type, func);
        
    else delete target["on" + type];
    }
    var Button1 = document.getElementById("Button1");
    var Button1Click = function() { alert(1); };
    addEventHandler(Button1, 
    "click",  Button1Click);
    addEventHandler(Button1, 
    "click"function() { alert(2); } );
    addEventHandler(Button1, 
    "click"function() { alert(3); } );
    removeEventHandler(Button1, 
    "click"function() { alert(2); } ); // 移不出
    removeEventHandler(Button1, "click", Button1Click); // 可以移除
    </script>
    </body>
    </html>
  • 相关阅读:
    bzoj 2178 圆的面积并 —— 辛普森积分
    hdu 1724 Ellipse —— 自适应辛普森积分
    洛谷 P4525 & P4526 [模板] 自适应辛普森积分
    bzoj 4530 大融合 —— LCT维护子树信息
    bzoj 3083 遥远的国度 —— 树链剖分
    CF 360 E Levko and Game —— 贪心+最短路
    「网络流24题」 9. 方格取数问题
    「网络流24题」 17. 运输问题
    [Luogu 1533] 可怜的狗狗
    「网络流24题」 2. 太空飞行计划问题
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/1433005.html
Copyright © 2011-2022 走看看