jquery中使用event.target的幾點說明

阿新 • • 發佈：2019-01-14

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")來刪除。

來源：http://bbs.blueidea.com/thread-2968960-1-1.html

在研究一下這裡面的程式碼：http://api.jquery.com/event.target/

在附加一個不錯的網站：http://jsfiddle.net/，可以直接線上寫html，js，css並進行結果輸出。測試程式碼非常方便。

說出JQuery中常見的幾種函數以及他們的含義是什麽？

對象 jquery 加載插入內容其中 ont expr class exp 　　jQuery中常見的函數如下：　　（1）get（）取得所有匹配的DOM元素集合。　　（2）get（index）取得其中一個匹配的元素。index表示取得第幾個匹配的元素。　　（3

flex中 event.target與 event.currentTarget的使用

target：事件指向的目標，但並非事件的派發者。在一個事件整個生命週期中所有被派發的事件處理函式內部的target物件是一樣的，每個被監聽者派發的事件處理函式中的target一定都是同一個物件。currentTarget：事件的派發者。呼叫註冊在事件上的回撥函式的那個

jquery中使用event.target的幾點說明 (轉自http://blog.csdn.net/zm2714/article/details/8119642)

board ngs 使用 net spa dtd meta xhtml function jquery中使用event.target的幾點說明 event.target 說明：引發事件的DOM元素。 this和event.target的區別 js中事件是

jquery中使用event.target的幾點說明

event.target 說明：引發事件的DOM元素。 this和event.target的區別 js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素； this和event.target的相同點 this

jQuery中的$(window)與$(document)幾個用法區別

圖片 document window function 準備就緒 [window對象] 它是一個頂層對象,而不是另一個對象的屬性，即表示瀏覽器中打開的窗口。 1、屬性　　defaultStatus 缺省的狀態條消息　　document 當前顯示的文檔(該屬性本身也是一個對象)　　f

【兼容性】IE10中使用vue.js出現event或event.target未定義問題。

界面 strong 部分 ron 定義函數 id未定義 console ont 問題描述在html界面用 v-bind:xx 的方式去綁定一個事件函數時IE10 控制臺報錯 “valid未定義” 問題代碼示例： <input type="text" v-bin

jQuery中幾個關於元素寬高方法的區別

contain ext 參數設置 oct ont doctype asc jquer cloud 幾個關於元素寬高的方法 height():帶參數設置，不帶參數獲取,參數是number類型 width():帶參數設置，不帶參數獲取,參數是number類型 innerHei

jQuery中bind（），one（），on（），live（）這幾個繫結事件函式的區別

1、bind（）方法為每個匹配元素的特定事件繫結事件處理函式。bind（）方法的底層邏輯是on（）方法。 .bind() 方法是用於往文件上附加行為的主要方式。所有JavaScript事件物件，比如focus, mouseover, 和 resize，都是可以作為type引數傳遞進來

aiax的請求過程以及在jquery中的幾種常用使用方式

在Java後端專案的開發過程中，由於涉及前端相關的東西，會經常遇到ajax請求的形式，學習一下，可以在開發後端的過程中更加的流暢。 ajax：Asynchronous JavaScript and XML 1、原始方法請求 function load(){

jquery中ajax的dataType屬性包括哪幾項

dataType 型別：String 預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智慧判斷，比如 XML MIME 型別就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 物件，而 script 則會執行這個

jquery中獲得table中第幾個td元素的值

a href='javascript:;' jquery 中給href賦值，並彈出新窗體，檢視檔案，target

頁面程式碼： <a href='javascript:;' title="檢視規則" id="btn_gz" class="btn btn_primaryTwo fr mar10 marT10"><span id="sp">檢視規則</span

淺談學習JS和JQuery中的幾點收穫

剛學習完了JQurey的視訊，覺得這段時間下來，收穫甚是少，想總結一下，由此引來了這篇部落格。一、學習中的那點事估計每個人都會遇到不想學習的時候，我看完了JS，

jQuery中引數e,event

與Flex類似,JavaScript中的事件也同樣存在,捕獲--觸發--冒泡三個節點.比較常見的情況是,在子DIV觸發事件時,如果父DIV也監聽同類事件,那麼也會一起觸發,並向上冒泡 jQuery對事件監聽函式,都會預設傳遞一個引數,一般命名為event或e(非必須,也可

JavaScript中event物件中currentTarget和target的區別

簡述名稱功能 currentTarget 其事件處理程式當前正在處理事件的那個元素 target 事件的目標區別在事件處理程式內部, 物件 t

JQuery中內容操作函數、validation表單校驗

調用方法 scrip 註意語言 rul asc javascrip 最前面插入獲取 JQuery:內容體拼接（可以直接拼接元素節點和內容節點）　　JQuery實現：　　　　方案1：A.append(B); == B.appendTo(A);A的後面拼接B 　　　

JQuery中阻止事件冒泡方式及其區別

use urn query class span 事件冒泡事件 clas nbsp 方式一：event.stopPropagation(); 1 $("#div1").mousedown(function(event){ 2 event.stopPropa

jquery中prop()方法和attr()方法的區別淺析

clas ttr over dex idt pro query selected accesskey jquery1.6中新加了一個方法prop()，一直沒用過它，官方解釋只有一句話:獲取在匹配的元素集中的第一個元素的屬性值。大家都知道有的瀏覽器只要寫disabled，c

jQuery中的ajax

span cti 參數例如 param res rom syn from jquery對象.load(url,params,function(數據){});$.get(url,params,function(參數){},type); 發送get請求的ajax url

JQuery中$.ajax()方法參數詳解（轉載）

瀏覽器 object 服務器字符串 false type: 要求為String類型的參數，請求方式（post或get）默認為get。註意其他http請求方法，例如put和 delete也可以使用，但僅部分瀏覽器支持。timeout: 要求為Number類型的參數，設置請求超時時

jquery中使用event.target的幾點說明

event.target

this和event.target的區別

this和event.target的相同點

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

相關推薦