event.srcElement和event.target

最新推荐文章于 2019-12-02 21:16:35 发布

vxiaobaitu

最新推荐文章于 2019-12-02 21:16:35 发布

阅读量417

点赞数

分类专栏： JavaScript 读书笔记

本文链接：https://blog.csdn.net/vxiaobaitu/article/details/25311941

版权

JavaScript 读书笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在《JavaScript：The Definetive Guide》（《JavaScript权威指南》）一书中看到一个这样的例子：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-encoding" content="text/html" charset="utf-8">
    <title>Chapter 01</title>

    <script type="text/javascript">

       window.onload = function(){
           var images = document.getElementsByTagName("img");
           for(var i = 0; i < images.length; i++){
               var image = images[i];
               if(image.addEventListener)
                    image.addEventListener("click",hide,false);
               else
                    image.attachEvent("onclick",hide);
           }
           function hide(event) {
               ev.target.style.visibility = "hidden";}

       };
    </script>
</head>
<body>
    <img src="images/01.jpg" alt=""/>
    <img src="images/01.jpg" alt=""/>
</body>
</html>

在让人头疼的IE6，IE7，IE8面前会弹出"target.style" is null or not an Object的提示。这是为什么呢？

以下是转载自网友的一篇文章

地址：http://houmaolin0521.blog.163.com/blog/static/11335164920096682117746/ 在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性.。

解决方法：使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.。同时注意event的兼容性问题。
感觉这个挺好，可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示，如"TD","TR","A"等。所以把看过的一些抄下来，不记得的时候再来看看。

<script type="text/javascript">

    function tdclick(){

        if(event.srcElement.tagName.toLowerCase()=='td')

             alert("行："+(event.srcElement.parentNode.rowIndex+1)+"列："+(event.srcElement.cellIndex+1));

     }

</script>

event.srcElement从字面上可以看出来有以下关键字：事件,源他的意思就是：当前事件的源，我们可以调用他的各种属性就像:document.getElementById("")这样的功能，经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明：
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：
firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie中,事件对象是全局的,随处都可以访问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为参数传递.以下代码已经实验通过!

按照以上的解释，把源码改如下，页面就能在IE6，IE7，IE8下正常运行啦~

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-encoding" content="text/html" charset="utf-8">
    <title>Chapter 01</title>

    <script type="text/javascript">

       window.onload = function(){
           var images = document.getElementsByTagName("img");
           for(var i = 0; i < images.length; i++){
               var image = images[i];
               if(image.addEventListener)
                    image.addEventListener("click",hide,false);
               else
                    image.attachEvent("onclick",hide);
           }
           function getEventTarget(event){
               event = window.event || event;
               return event.srcElement || event.target;
                }
           function hide(event) {
               var ev = getEventTarget(event);
               ev.style.visibility = "hidden";}

       };
    </script>
</head>
<body>
    <img src="images/01.jpg" alt=""/>
    <img src="images/01.jpg" alt=""/>
</body>
</html>