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 相关文章推荐
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php树型类实例
2014/12/05 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
Python读取网页内容的方法
2015/07/30 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python写一个随机点名软件的实例
2019/11/28 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
转党组织关系介绍信
2014/01/08 职场文书
户籍证明格式
2014/09/15 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
预备党员转正党小组意见
2015/06/01 职场文书