• 标签内联事件和event对象


    event对象在IE和firefox下表现是不同的。在IE下,event是window对象的一个属性,是在全局作用域下的,而在firefox里,event对象是做为事件的参数存在的:

    ===========================

    <input type="button" id="btn" value="click me" />

    <script type="text/javascript">

    document.getElementById("btn").onclick = function(){

         alert(arguments.length);

    };

    </script>

    ===========================

    这代代码在IE下弹出0,而在firefox下弹出1。在firefox下这个参数就是event对象了。

    如果在标签内联事件中触发事件会如何呢?

    ===========================

    <input type="button" id="btn" value="click me" onclick = "handler();" />

    <script type="text/javascript">

    function handler(){

         alert(arguments.length);

    };

    </script>

    ===========================

    在IE和firefox下,这段代码弹出的都是0.也就是说,标签内联事件并没有被替换成

    ===========================

    btn.onclick = handler;


    function handler(){


    alert(arguments.length);


    }

    ===========================

    而是替换成了

    ===========================

    btn.onclick = function(){

         handler();

    }


    function handler(){


    alert(arguments.length);


    }

    ===========================

    在标签内联事件中,我们使用arguments[0]可以在firefox下访问到event对象。

    ===========================

    <input type="button" id="btn" value="click me" onclick = "alert(arguments[0].type)" />

    ===========================

    因为不使用标签内联事件的话,我们可以给处理函数传参,从而指定arguments[0]的变量名,通常情况下,我们平时也的确是这么处理的:

    ===========================

    <input type="button" id="btn" value="click me" />

    <script type="text/javascript">

    document.getElementById("btn").onclick = function(e){

         e = window.event || e;                     //e兼容IE和firefox,指向event对象

    };

    </script>

    ===========================

    在标签内联事件中我们没办法指定参数名,是不是就没办法直接写个变量在IE和firefox下兼容地指event对象呢?不是的,可以用“event”这个变量名兼容地指向event对象,注意,只能是“event”,如果是“a”,“b”,“Event”之类的全都不行。可能是因为考虑到标签内联事件中无法指定参数变量名,所以故意留个了“event”这个关键字吧。

    ===========================

    <input type="button" id="btn" value="click me" onclick="alert(event.type);" />

    ===========================

    这段代码在IE和firefox下都可以正常地弹出“click”。

    有趣的是,标签内联事件中我们甚至可以写注释,可以使用字符串:

    ===========================

    //只弹出1

    <input type="button" id="btn" value="click me" onclick="alert(1);//alert(2);alert(3);" />

    //弹出1和3

    <input type="button" id="btn" value="click me" onclick="alert(1);/*alert(2);*/alert(3);" />

    //弹出“string”

    <input type="button" id="btn" value="click me" onclick="var a='abc';alert(typeof a);"/>

    ===========================

    如果我们既用标签内联事件绑定了事件,又用DomNode.onxxxx绑定了事件,又会如何呢?

    ===========================

    <input type="button" id="btn" value="click me" onclick="alert(123);" />

    <script type="text/javascript">

    document.getElementById("btn").onclick = function(){

         alert(456);

    };

    </script>

    ===========================

    会如何呢?会弹出456,不弹出123。相当于

    ===========================

    <input type="button" id="btn" value="click me" />

    <script type="text/javascript">

    document.getElementById("btn").onclick = function(){

         alert(123);

    };

    document.getElementById("btn").onclick = function(){

         alert(456);

    };

    </script>

    ===========================

    后面的处理函数把前面的处理函数覆盖掉了。如果我们给DomNode是通过attachEvent和addEventListener来绑定事件的呢?

    ===========================

    <input type="button" id="btn" value="click me" onclick="alert(123);" />

    <script type="text/javascript">

    function handler(){


    alert(456);


    }


    if(document.all){


    btn.attachEvent("onclick",handler);


    } else {


    btn.addEventListener("click",handler,false);


    }

    </script>

    ===========================

    很顺利地,先弹出了123,后又弹出了456。

  • 相关阅读:
    业务需求、用户需求和功能需求
    乐观锁的两种实现方式
    数据字典
    freemarker(ftl)标签用法
    commons-lang常用方法
    前端与后端分离
    jar包导入本地maven库的操作
    本地打jar包到本地的Maven出库
    MyEclipse中好用的快捷键汇总整理
    简单的反编译class文件并重新编译的方法
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426918.html
Copyright © 2020-2023  润新知