this,target,currentTarget区别讲解

最新推荐文章于 2024-07-16 16:43:05 发布

chuaizepipp202729

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量182

点赞数

文章标签： xhtml javascript php ViewUI

原文链接：https://my.oschina.net/sqlghost/blog/714487

版权

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")来删除。

鼠标事件属性的currentTarget与target的区别. 在鼠标事件中返回的事件对象有currentTarget和target两个属性.看起来这个两个基本是一样的结果.而其实不然. currentTarget指向的是添加这个事件侦听的对象本身.如:mc.addEventListener(…), 则currentTarget返回的是mc本身. 而target返回的并不一定是mc本身.通过试验.我现在这样理解(或许不完全). target返回的是当前侦听对象里的位于鼠标下方的最底层的元件. 如: mc是一个多层嵌套的元件,结构为: mc mc11 mc12 mc121 mc122 当对mc进行事件侦听时 mc.addEventListener(MouseEvent.MOUSE_DOWN,down) 那么,事件返回中的事件对象里的currentTarget始终是指向的mc这个总元件. 而target则是根据鼠标在mc元件中不同的位置而确定的. 如果鼠标当前点击的点在mc.mc11则返回的target是mc11. 而如果鼠标当前点击的位置在mc12上,则返回的是鼠标在mc12上的位置决定的最底层的包含元件.mc121或mc122(鼠标在哪个上就返回哪个) 可以这么理解. target返回的是鼠标当前侦听的对象中最底层的事件接收元件.不管嵌套了多少层.都返回当前事件侦听对象的最底层的元件对象. 使用 currentTarget 事件属性和 target 事件属性事件处理函数接收到事件对象和事件相关信息。在 ActionScript 2.0 组件事件结构中, 您始终可以将 target 属性作为对广播该事件的对象的引用。而在 ActionScript 3.0 中, 事件对象的 target 属性可能并不引用该对象。我发现将侦听器直接指派到目标对象并使用 currentTarget 事件属性是处理所构建结构最可靠的方式; 例如:

import flash.events.MouseEvent; 
function clickHandler(event:MouseEvent):void{ 
    // Do something on click... 
    switch(event.currentTarget) 
    { 
        case my_btn1: // do something... Break; 
        case my_btn2: // do something... Break; 
        case my_btn3: // do something... Break;
    }
}
my_btn1.addEventListener(MouseEvent.CLICK,clickHandler);
my_btn2.addEventListener(MouseEvent.CLICK,clickHandler);
my_btn3.addEventListener(MouseEvent.CLICK, clickHandler);

如果要使用 target 属性而不是 currentTarget, 请务必注意与 addEventListener 方法相关的额外参数。我发现在 ActionScript 3.0 中, target 属性有时是空的, 这是因为事件系统在将目标引用发送到我的事件处理函数之前删除了该引用。为解决这个问题, 我通过调整显示在 addEventListener 方法末尾的可选参数, 更改了垃圾收集设置。例如: import flash.events.MouseEvent; function clickHandler(event:MouseEvent):void{ // Do something on click... switch(event.target) { case my_btn1: // do something... Break; case my_btn2: // do something... Break; case my_btn3: // do something... Break; }}addEventListener(MouseEvent.CLICK,clickHandler,false,0,true); 最后一个参数是 useWeakReference, 上述代码中它设置为 true。强引用会阻止对侦听器进行垃圾收集。因此, 将这个参数设置为 false 会导致事件系统不对事件目标的引用进行垃圾收集。

6.2.1 target和currentTarget 如我们刚才提到的，在事件被触发后，Flash Player就会创建事件对象，并逐一检查"事件旅程"上的节点是否针对发生的事件注册了侦听器，为事件对象赋值，并调用侦听器。事件对象源自flash.events.Event类。事件对象currentTarget属性的值会在事件流中改变，而target属性则不会变化。（关于事件对象，我们将在6.3节（见第106页）深入讨论）由此，开发者能够通过currentTarget属性获知事件旅程现在停在了哪个节点上。 currentTarget属性：事件旅程中，currentTarget属性代表了Flash Player正在检查的节点对象。比如，当Flash Player遍历到ctnButtons对象，那么event.currentTarget就是ctnButtons对象。 target属性：target属性就是发生事件的对象。在信号灯应用中，event.target就是用户所点击的按钮对象，在事件旅程中，该属性的值始终不变。信号灯应用中，侦听器myEventHandler利用event.target来获取被点击按钮上的标签数据。此时赋给event.currentTarget属性的则是HBox容器对象ctnButtons。

flash事件对象的target与currentTarget属性事件对象是Event类的实例，具有多个属性，其中target与currentTarget属性必须把它们分精楚。对于一个简单的事件处理过程，分清target与currentTarget并没有必要，因为它们一般指向同一个对象，如对一个简单的mc容器注册侦听器，在处理事件过程中，这两个属性都指向了这个mc。但在一个相对复杂的display list中，这两属性是不相同的，比如，在主场景中有一个实例名为mc的影片剪辑实例，此mc包含了一个子mc，假设实例名为mc1 如果为父级即mc注册一个click事件侦听器，当单击mc时，target与currentTarget都指向mc，当单击mc1时，target指向mc1，而currentTarget指向mc，因此，在很多应用中，可能有人会认为currentTarget会指向父级。如果为子级和父级都注册一个侦听器，那target是指单击的目标，而currentTarget是指在处理事件（即活动）的目标，因为as3的事件处理有3个阶段（捕获、目标、冒泡），并且缺省时采用冒泡机制，当单击子级mc1时，currentTarget应先指向底层，并向上冒泡，即先指向mc1，再指向mc 所以，currentTarget属性应具备两条件，一是它注册了侦听器，二是正在处理事件，而target就指事件流中的target。例如，单击了mc1，不管事件如何冒泡（不管currentTarget指向谁），target都指向mc1，小结：target属性在事件流的目标阶段，而currentTarget属性在事件流的冒泡阶段（如currentTarget有时指父级）和目标阶段（两属性的指向相同），当然也可以是捕获阶段。

转载于:https://my.oschina.net/sqlghost/blog/714487

chuaizepipp202729

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
this,target,currentTarget区别讲解

event.target说明：引发事件的DOM元素。this和event.target的区别js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；this和event.target的相同点this和event.tar...
复制链接

扫一扫