zoukankan      html  css  js  c++  java
  • jquery中使用event.target的几点

    1.this和event.target的区别:

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

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

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

    < !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>
    <script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("li").live("click",function(event){
    $("#temp").html("clicked: " + event.target.nodeName);
    $(event.target).css("color","#FF3300");
    })
    });
    </script>
    </head>
    
    <body>
    <div id="temp"></div>
    <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    <li>第一行
    <ul>
    <li>这是公告标题1</li>
    <li>这是公告标题2</li>
    <li>这是公告标题3</li>
    <li>这是公告标题4</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    

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

    < !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>
    <script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("li").live("click",function(event){
    $("#temp").html("clicked: " + event.target.nodeName);
    $(this).css("color","#FF3300");
    event.stopPropagation();
    })
    });
    </script>
    </head>
    
    <body>
    <div id="temp"></div>
    <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    <li>第一行
    <ul>
    <li>这是公告标题1</li>
    <li>这是公告标题2</li>
    <li>这是公告标题3</li>
    <li>这是公告标题4</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    

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

  • 相关阅读:
    poj 3068 Bridge Across Islands
    XidianOJ 1086 Flappy v8
    XidianOJ 1036 分配宝藏
    XidianOJ 1090 爬树的V8
    XidianOJ 1088 AK后的V8
    XidianOJ 1062 Black King Bar
    XidianOJ 1091 看Dota视频的V8
    XidianOJ 1098 突击数论前的xry111
    XidianOJ 1019 自然数的秘密
    XidianOJ 1109 Too Naive
  • 原文地址:https://www.cnblogs.com/wjwen/p/3780529.html
Copyright © 2011-2022 走看看