jquery中使用event.target的几点说明 (转自http://blog.csdn.net/zm2714/article/details/8119642)

jquery中使用event.target的几点说明

event.target

说明：引发事件的DOM元素。

this和event.target的区别

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

this和event.target的相同点

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

这使我想起了以前写的一个例子：

  1. //del event
  2. $(".del").bind("click",function(event){
  3. var _tmpQuery=$(this);//为什么要加上这一句？
  4. var id=$("input[name=‘id‘]",$(this).parents("form:first")).attr("value");
  5. art.dialog.confirm(‘你确认删除该日志吗？‘,function(){
  6. $.post("myRun/managerlog_del.php",{id:id},function(tips){
  7. if(tips==‘ok‘){
  8. art.dialog.tips(‘成功删除‘);
  9. $(_tmpQuery.parents(‘tr:first‘)).hide();//如果不加第一句，这里用$($(this).parents(‘tr:first‘)).hide();则不会隐藏
  10. //因为这里的this，并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试：alert(this.url);
  11. }else{
  12. art.dialog.tips(tips,5);
  13. }
  14. });
  15. return true;
  16. });
  17. });

那么现在我可以将上面代码通过$(event.target)这个方式来实现隐藏tr，而不用通过$(_tmpQuery.parents(‘tr:first‘)).hide();这样的方式，具体代码如下：

[javascript] view plain copy

  1. $(".del").bind("click",function(event){
  2. //var _tmpQuery=$(this);这行代码可以删除
  3. var id=$("input[name=‘id‘]",$(this).parents("form:first")).attr("value");
  4. art.dialog.confirm(‘你确认删除该日志吗？‘,function(){
  5. $.post("myRun/managerlog_del.php",{id:id},function(tips){
  6. if(tips==‘ok‘){
  7. art.dialog.tips(‘成功删除‘);
  8. $(event.target).parents(‘tr:first‘).hide();
  9. }else{
  10. art.dialog.tips(tips,5);
  11. }
  12. });
  13. return true;
  14. });
  15. });

event.target和$(event.target)的使用

[html] view plain copy

  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>无标题文档</title>
  6. <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/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. <body>
  17. <div id="temp"></div>
  18. <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
  19. <li>第一行
  20. <ul>
  21. <li>这是公告标题1</li>
  22. <li>这是公告标题2</li>
  23. <li>这是公告标题3</li>
  24. <li>这是公告标题4</li>
  25. </ul>
  26. </li>
  27. </ul>
  28. </body>
  29. </html>

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

[javascript] view plain copy

  1. <script type="text/javascript">
  2. $(function(){
  3. $("li").live("click",function(event){
  4. $("#temp").html("clicked: " + event.target.nodeName);
  5. $(this).css("color","#FF3300");
  6. event.stopPropagation();
  7. })
  8. });
  9. </script>

在看一个例子

[html] view plain copy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7. function handler(event) {
  8. var $target = $(event.target);
  9. if( $target.is("li") ) {
  10. $target.children().toggle();
  11. }
  12. }
  13. $("ul").click(handler).find("ul").hide();//从这里也看出find只在后代中遍历，不包括自己。
  14. });
  15. </script>
  16. </head>
  17. <body>
  18. <ul>
  19. <li>item 1
  20. <ul>
  21. <li>sub item 1-a</li>
  22. <li>sub item 1-b</li>
  23. </ul>
  24. </li>
  25. <li>item 2
  26. <ul>
  27. <li>sub item 2-a</li>
  28. <li>sub item 2-b</li>
  29. </ul>
  30. </li>
  31. </ul>
  32. </body>
  33. </html>
时间： 2024-12-14 11:24:38

jquery中使用event.target的几点说明 (转自http://blog.csdn.net/zm2714/article/details/8119642)的相关文章

JVM中java类的加载时机（转载：http://blog.csdn.net/chenleixing/article/details/47099725）

Java虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的加载机制.类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括了:加载(Loading).验证(Verification).准备(Preparation).解析(Resolution).初始化(Initialization).使用(using).和卸载(Unloading)七个阶段.其中验证.准备和解析三个部分统称为连接(Linki

Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】

<html> <head>  <script type="text/JavaScript"  src="jQuery-1.5.1.min.js"></script>  <script type="text/javascript">   $(function(){    $("#chk").bind({//绑定一个点击事件     click: function(){ 

[转]jquery中使用event.target的几点

转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target); 比如:event.target和$

linux下kill进程的N中方式（来源:http://blog.csdn.net/andy572633/article/details/7211546，请支持原创）

常规篇: 首先,用ps查看进程,方法如下: $ ps -ef ……smx       1822     1  0 11:38 ?        00:00:49 gnome-terminalsmx       1823  1822  0 11:38 ?        00:00:00 gnome-pty-helpersmx       1824  1822  0 11:38 pts/0    00:00:02 bashsmx       1827     1  4 11:38 ?       

在Eclipse中设置进行JNI的头文件编译方法（转 http://blog.csdn.net/mirkerson/article/details/17187109）

这两天在搞NDK开发,JNI的头文件进行编译的时候,要跑到对应的class文件路径下(通常是工程的bin目录),进行编译生成,很是不便,也容易出错,所以考虑在Eclipse中作为外部工具引入,所以便查了下资料,现记录下来. 方法是: 1.在Eclipse环境下,打开下图中的最右边那个按钮. 2.新建一个Program,写上名字比如“javaH”,然后填写下面几项内容: 2.1.Location:把JDK下面的javaH.exe的全路径填进来. 2.2.Working Directory: Jav

as3 页游中，新手指导中，屏蔽所有交互对象，但除了指定交互对象可用的方法【转http://blog.csdn.net/linjf520/article/details/9450945】

package { import flash.display.InteractiveObject; import flash.display.Stage; import flash.events.MouseEvent; /** * 新手指导管理器 * @author jave.lin * @date 2013-7-24 */ public class GuideManager{ private static var stage:Stage; /**设置舞台*/ public static fun

（二十八） Android中ViewStub组件使用（转载自：http://blog.csdn.net/mayingcai1987/article/details/6238609）

1. 概述: ViewStub组件和<include>标签的作用类似,主要是为了提高布局的重用性,及布局的模块化.它们之间最大的差别是,ViewStub中的布局不会随着它所在布局的渲染而渲染,而<include>标签中的布局会随着它所在布局的渲染而渲染,ViewStub中的布局只有在你需要的时候才会渲染到主界面中. 2. 效果图: (1)在ButtonOne与ButtonTwo之间存在一个ViewStub布局,如下图: (2)单击ButtonOne后渲染ViewStub中的布局,如

快速掌握 Android Studio 中 Gradle 的使用方法 [转http://blog.csdn.net/feelang/article/details/41783317]

Gradle是可以用于Android开发的新一代的 Build System, 也是 Android Studio默认的build工具. Gradle脚本是基于一种JVM语言 -- Groovy,再加上DSL(领域特定语言)组成的. 因为Groovy是JVM语言,所以可以使用大部分的Java语言库.所谓DSL就是专门针对Android开发的插件,比如标准Gradle之外的一些新的方法(Method).闭包(Closure)等. 由于Gradle的语法足够简洁,而且可以使用大部分的java包,当之

（二十）Android中处理崩溃异常（转载：http://blog.csdn.net/liuhe688/article/details/6584143）

大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程序安装到某款手机上说不定就出现崩溃的现象,开发者个人不可能购买所有设备逐个调试,所以在程序发布出去之后,如果出现了崩溃现象,开发者应该及时获取在该设备上导致崩溃的信息,这对于下一个版本的bug修复帮助极大,所以今天就来介绍一下如何在程序崩溃的情况下收集相关的设备参数信息和具体的异常信息,并发送这些信息到服务器供开发者分析和调试程序. 我们先建立一个crash项目,项目结构如图: 在MainActivity.ja