一个奇怪的问题

这段代码在firefox中有错
<script>
function bb()
{
if (!window.Event) {
  var Event = new Object();
} Event.element=function(event){return event.target || event.srcElement;};
var element   = Event.element(event||window.event);
alert(element.tagName);
}</script>
<img onclick="bb()">而我这么写确可以通过
<script>
if (!window.Event) {
  var Event = new Object();
}Event.element=function(event){return event.target || event.srcElement;};
</script>
<img onclick="var element   = Event.element(event||window.event);alert(element.tagName);">请问怎样让第一种也通过呢，注意，bb函数调用的时候不要传this

解决方案 »

  1.   

    是够奇怪了，以前还没发现<img id="img1">
    <input type="button" value="测试" onclick="bb()"/>
    <script type="text/javascript">
    var bb=function(e)
    {
        e=window.event || e;
        var element=e.srcElement ||e.target;
        alert(element.tagName);
    }
    document.getElementById("img1").onclick=bb;//这样Firefox里参数e才会有效，才能使用e.target
    </script>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript"></script>
    </head><body>
    <script>
    if (!window.Event) {var Event = new Object();}
    function bb(obj,W3CEvent)
    {

    Event.element = function(W3CEvent){
    return W3CEvent.target || W3CEvent.srcElement;
    }
    var W3CEvent = getEventObject(W3CEvent);
    var element = Event.element.call(this,W3CEvent);

    alert(element.tagName);
    }

    function getEventObject(W3CEvent){
    return W3CEvent || window.event;
    }</script>
    <img src="u=1735614678,2871149467&fm=0&gp=-4.jpg" onclick="bb(this,event);">
    </body>
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript"></script>
    </head><body>
    <script>
    if (!window.Event) {var Event = new Object();}
    function bb(W3CEvent)
    {

    Event.element = function(W3CEvent){
    return W3CEvent.target || W3CEvent.srcElement;
    }
    var W3CEvent = getEventObject(W3CEvent);
    var element = Event.element.call(this,W3CEvent);

    alert(element.tagName);
    }

    function getEventObject(W3CEvent){
    return W3CEvent || window.event;
    }</script>
    <img src="u=1735614678,2871149467&fm=0&gp=-4.jpg" onclick="bb(event);">
    </body>
    </html>不传this版本~`
      

  4.   

    上面各位都没有说到此段代码失效的真正原因，失效的根本原因在于javascript的作用域机制和预定义机制。
    我们来看一个例子：var val = "Not";
    function fn() {
        if(false) {
            var val = "OK";
        }
        alert(val);
    }
    fn();你说执行fn函数之后alert语句输出什么？说输出Not的朋友都错了，其实输出的是undefined!
    在这里，当Javascript引擎解析上面的代码时是这样工作的：
    1. 在global作用域中声明一个变量val
    2. 开始解析函数fn，扫描函数体之后发现在if语句中有变量的声明，这时Javascript开始在函数fn的作用域内预定义变量val(即使if语句永远也执行不到)，并初始化其默认值为undefined
    3. 执行函数fn，当代码执行到alert(val);时，Javascript引擎开始查找在函数fn作用域下是否有变量val的定义，这时便发现了之前已经在此作用域预定义了这个值为undefined。
    4. 弹出对话框，显示undefined好了，知道上述代码是如何工作的之后，让我们回头来看看楼主的那段代码：function bb()
    {
        if (!window.Event) {
          var Event = new Object();
        }    Event.element=function(event){return event.target || event.srcElement;};
        var element   = Event.element(event||window.event);
        alert(element.tagName);
    }首先我们要明确非IE内核浏览器中已经预定义了一个对象Event，作用域为global的。
    然后我们来分析代码：function bb()
    {
        if (!window.Event) {
          var Event = new Object();
        }
        // ...more code
    }由刚才的分析不难看出，此段代码在经过Javascript引擎解析后已经在函数bb的作用域内声明了变量Event并且默认值为undefined，所以此时函数bb中的Event和全局(global)作用域下的Event是两个完全不同的对象。故而下一条语句Event.element = function(event){/*more code*/};才会报错，因为我们不能像undefined类型的变量中添加属性！function bb()
    {
        // ...more code
        // Wooops, error occurs here!
        Event.element=function(event){return event.target || event.srcElement;};
        // more code
    }出错后，浏览器立即终止解析，所以alert语句没有执行到。好了，解释完代码出错的原因之后，我们就很容易解决问题了
    最简单的方法是把
    var Event = new Object();
    换成
    Event = new Object();
    这样，只要!window.Event条件始终不为真，整个作用域链中就只有全局(global)作用域中含有Event对象的定义了。另外，由于非IE内核浏览器是按照W3C的标准来实现event对象的，所以我们还要做一些浏览器兼容的工作。综上所述，修改后的代码如下,IE，firefox以及Chrome浏览器中均已测试通过。<script>
    function bb(event/*you need add event as an argument*/)
    {
    if (!window.Event) {//alert('ff');
          /*var */Event = new Object();
        }
        Event.element = function (event){
    return event.target || event.srcElement;
    };
        var element   = Event.element(event||window.event);
        alert(element.tagName);

    }
    </script>
    <img src="http://www.baidu.com/img/baidu_logo.gif" onclick="bb(event);">
    Enjoy!!
      

  5.   


    <script>
    function bb()
    {
    window.Event = window.Event || new Object();
    Event.element = Event.element || function(event) { return event.target || event.srcElement; };
    // 问题主要出在这里,在 firefox 你没有获取到 event, 你仔细想想: 在函数 bb() 中, 没有 var event 也没有接收 名为 event 的参数, 那你这里的 event 会是什么...
    // var element = window.Event.element(event||window.event);

    var event = window.event || arguments.callee.caller.arguments[0];
    var element = window.Event.element(event);
    alert(element.tagName);
    }</script>
    <img onclick="bb()">
      

  6.   

    根本没有传参啊！！！
    应该为<img onclick="bb(event)">