jquery 关于event.target使用的几点说明介绍


Posted in Javascript onApril 26, 2013

event.target
说明:引发事件的DOM元素。

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

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

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

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

那么现在我可以将上面代码通过$(event.target)这个方式来实现隐藏tr,而不用通过$(_tmpQuery.parents('tr:first')).hide();这样的方式,具体代码如下:
$(".del").bind("click",function(event){
    //var _tmpQuery=$(this);这行代码可以删除
    var id=$("input[name='id']",$(this).parents("form:first")).attr("value");
    art.dialog.confirm('你确认删除该日志吗?',function(){
        $.post("myRun/managerlog_del.php",{id:id},function(tips){
            if(tips=='ok'){
                art.dialog.tips('成功删除');
                $(event.target).parents('tr:first').hide();
            }else{
                art.dialog.tips(tips,5);
            }
        });
        return true;
    });
});

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 language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.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
<script type="text/javascript">
$(function(){
    $("li").live("click",function(event){
        $("#temp").html("clicked: " + event.target.nodeName);
        $(this).css("color","#FF3300");
        event.stopPropagation();
    })
});
</script>

在看一个例子
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
    function handler(event) {
      var $target = $(event.target);
      if( $target.is("li") ) {
        $target.children().toggle();
      }
    }
    $("ul").click(handler).find("ul").hide();//从这里也看出find只在后代中遍历,不包括自己。
});
</script>
</head>
<body>
<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>
</body>
</html>

toggle()不带参数的作用:

toggle有两种作用:
toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

toggle(fn,fn)
每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
可以使用unbind("click")来删除。

Javascript 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 #Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 #Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 #Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 #Javascript
jQuery.Validate验证库的使用介绍
Apr 26 #Javascript
You might like
php连接mysql数据库代码
2009/03/10 PHP
php 分库分表hash算法
2009/11/12 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
非常实用的php验证码类
2016/05/15 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
python 实现控制鼠标键盘
2020/11/27 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
大学毕业感言50字
2014/02/07 职场文书
培训班主持词
2014/03/28 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
男生贾里读书笔记
2015/06/30 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
python Tkinter模块使用方法详解
2022/04/07 Python
python井字棋游戏实现人机对战
2022/04/28 Python