event.target【转载】

男娘i 2022-01-06 06:15 115阅读 0赞

\[转载\]

1.this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

**比如：event.target和$(event.target)的使用：**

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title>event.target</title>
     6     <script type="text/javascript" src="js/jquery.js"></script>
     7     <script type="text/javascript">
     8     $(function(){
     9         $("li").live("click",function(event){
    10         $("#temp").html("clicked: " + event.target.nodeName);
    11         $(event.target).css("color","#FF3300");
    12         })
    13     });
    14     </script>
    15     </head>
    16 
    17     <body>
    18         <div id="temp"></div>
    19         <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    20             <li>第一行
    21                 <ul>
    22                     <li>这是公告标题1</li>
    23                     <li>这是公告标题2</li>
    24                     <li>这是公告标题3</li>
    25                     <li>这是公告标题4</li>
    26                 </ul>
    27             </li>
    28         </ul>
    29     </body>
    30     </html>

上面的例子如果改成使用this：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title>event.target</title>
     6     <script type="text/javascript" src="js/jquery.js"></script>
     7     <script type="text/javascript">
     8     $(function(){
     9         $("li").live("click",function(event){
    10         $("#temp").html("clicked: " + event.target.nodeName);
    11         $(this).css("color","#FF3300");
    12         event.stopPropagation();
    13         })
    14     });
    15     </script>
    16     </head>
    17 
    18     <body>
    19         <div id="temp"></div>
    20         <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    21             <li>第一行
    22                 <ul>
    23                     <li>这是公告标题1</li>
    24                     <li>这是公告标题2</li>
    25                     <li>这是公告标题3</li>
    26                     <li>这是公告标题4</li>
    27                 </ul>
    28             </li>
    29         </ul>
    30     </body>
    31     </html>

注意这里的event.stopPropagation();这个是阻止事件冒泡的！

若不加event.stopPropagation 将会出现下列效果

![27141222-af0ca57f714242c0947ba5e629768575.jpg][]

ie下不兼容 event.target || event.srcElement

案例：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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=utf-8" />
    <title>无标题文档</title>
    <link href="css/admin.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
    body {
          
        background:#EBF4F9 url(images/sellcard1_03.jpg) repeat-x;
    }
    .now>a{
           color:#000;}   //ie6不支持子选择符
    </style>
    </head>
    <body>
    <div class="sidesection">
      <h2 class="sideh2"><a href="#"><img src="images/sellcard1_06.jpg" alt="返回我的工作台" /></a></h2>
    </div>
    <div class="sidesection">
      <h2 class="sideh2"><img src="images/sellcard1_09.jpg" alt="功能权限" /></h2>
      <ul class="sideul">
        <li class="titleli">
            <a target="main" href="订单服务.html">订单服务</a>
            <ul>
                <li class="titleli"><a target="main" href="处理中订单.html">处理中订单</a></li>
                <li class="titleli"><a target="main" href="已完结订单.html">已完结订单</a></li>
            </ul>
        </li>
      </ul>
    </div>
    <script type="text/javascript">
    $(function(){
        $('.titleli').click(function(event){
            event.stopPropagation();
            $('.sideul').find('li.now').removeClass('now');
            $(this).addClass('now');
        })
    })
    </script>
    </body>
    </html>

//ie6不支持子选择符

![201116487536223.jpg][]

冒泡：点击 “已完结订单” 上面的 “订单服务” 也会选中，并且变黑

$(this)在冒泡的情况下会发生变化，使用$(event.target)代替$(this) 此时单击已完结订单项的时候event.target指向的是a。而不是li

本文转自《[jquery中使用event.target的几点][jquery_event.target]》

转载于:https://www.cnblogs.com/positive/p/3445577.html

[27141222-af0ca57f714242c0947ba5e629768575.jpg]: /images/20211227/692bcf7e3d764f0782ea784ae04a797d.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211227/398edc0ac265451a9ccaf391e3a2529d.png
[201116487536223.jpg]: /images/20211227/cc46af25aa494e9f8425c0565895d60f.png
[jquery_event.target]: http://www.css88.com/archives/2476