jquery 關(guān)于event.target使用的幾點(diǎn)說(shuō)明介紹
event.target
說(shuō)明:引發(fā)事件的DOM元素。
this和event.target的區(qū)別
js中事件是會(huì)冒泡的,所以this是可以變化的,但event.target不會(huì)變化,它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素;
this和event.target的相同點(diǎn)
this和event.target都是dom對(duì)象,如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象:$(this)和$(event.target);
這使我想起了以前寫的一個(gè)例子:
//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//為什么要加上這一句?
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");
art.dialog.confirm('你確認(rèn)刪除該日志嗎?',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();則不會(huì)隱藏
//因?yàn)檫@里的this,并不是當(dāng)前的class="del"這個(gè)DOM對(duì)象了。而是jQuery的AJAX配置對(duì)象ajaxSettings。測(cè)試:alert(this.url);
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});
那么現(xiàn)在我可以將上面代碼通過(guò)$(event.target)這個(gè)方式來(lái)實(shí)現(xiàn)隱藏tr,而不用通過(guò)$(_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('你確認(rèn)刪除該日志嗎?',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>無(wú)標(biāo)題文檔</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>這是公告標(biāo)題1</li>
<li>這是公告標(biāo)題2</li>
<li>這是公告標(biāo)題3</li>
<li>這是公告標(biāo)題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>
在看一個(gè)例子
<!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()不帶參數(shù)的作用:
toggle有兩種作用:
toggle()
切換元素的可見(jiàn)狀態(tài)。
如果元素是可見(jiàn)的,切換為隱藏的;如果元素是隱藏的,切換為可見(jiàn)的。
toggle(fn,fn)
每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。
如果點(diǎn)擊了一個(gè)匹配的元素,則觸發(fā)指定的第一個(gè)函數(shù),當(dāng)再次點(diǎn)擊同一元素時(shí),則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這兩個(gè)函數(shù)的輪番調(diào)用。
可以使用unbind("click")來(lái)刪除。
相關(guān)文章
jquery關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼
jquery 關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法,需要的朋友可以參考下2015-11-11在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹(shù)形菜單,而這些樹(shù)形菜單都是使用樹(shù)形插件zTree來(lái)制作的,下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12基于jquery可配置循環(huán)左右滾動(dòng)例子
基于jquery可配置循環(huán)左右滾動(dòng)例子,喜歡的朋友可以參考下。2011-09-09jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易
眾所周知,Jquery以其簡(jiǎn)潔性讓無(wú)數(shù)人為之瘋狂?,F(xiàn)在我要像大家介紹一個(gè)jQuery Validation,一看到Validation大家肯定第一直觀感覺(jué)就是這肯定是一個(gè)驗(yàn)證框架,沒(méi)有錯(cuò),本文就是基于jQuery Validation展開(kāi)討論。2010-10-10jquery對(duì)所有input type=text的控件賦值實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery對(duì)所有input type=text的控件賦值實(shí)現(xiàn)方法。小編覺(jué)的挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12