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();这个是阻止事件冒泡的!

    声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
    转载请注明转自《jquery中使用event.target的几点

  • 相关阅读:
    微人事项目-mybatis-持久层
    通过外键连接多个表
    springioc
    Redis 消息中间件 ServiceStack.Redis 轻量级
    深度数据对接 链接服务器 数据传输
    sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取
    sqlserver 索引优化 CPU占用过高 执行分析 服务器检查
    sql server 远程备份 bak 删除
    冒泡排序
    多线程 异步 beginInvoke EndInvoke 使用
  • 原文地址:https://www.cnblogs.com/12go/p/2304502.html
Copyright © 2011-2022 走看看