溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近小碼哥，在研究學習nodejs以及相關框架webpack、express、reactjs等等，為了將來，為了RMB，小碼哥牢記自我充電，以備不時之需。
在學習reactjs的時候，在前輩ruanyifeng的博文里看到了一個以前沒怎么注意的知識點。是與this和event.target之間的區別有關的。當時感覺就蒙了，發現event.target貌似印象不深啊，，瞬間小碼哥開啟了奔跑模式，，，
各種baidu，各種Chrome biying等等，發現區分不難，就是比較細致。不細分析，有點暈！
先給個總結，結合前輩的講解和自己的理解得出：
1、作為前端人員，對于上下文的代表this貌似都不陌生，陌生的就是有時候容易分不清this最后代表的是誰了。在事件注冊和綁定上，this指代的是事件注冊和綁定的對象元素。即，誰綁定了click等事件，this一般指代誰。在簡單的事件里，this又叫上下文。
2、但是，作為前端人員，event.target并不應該陌生，但卻又用的不多，，總之，小碼哥看到它的時候萌B了，，那event.target代表的有是神馬呢？在自己寫的demo里，反復試驗，總算摸清了，它最終代表的是誰了！event.target和事件綁定及注冊關聯不大，但是和事件發生的時候，所直接出發的元素有大關聯。
以上兩點，是文字敘述，有點蒼白，，對小白前端來說，估計也會萌B。。。
實踐是檢驗真理的唯一標準，這是某個為人說的。在IT業，實實在在的demo代碼是檢驗事件是否能通的唯一標準。
代碼如下：（希望新老碼農光看勿噴，默默的哈~）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body class="oBody">
<ul class="oUl" >
<li class="oLi oLi1">item 1
<ul class="oOul" >
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li class="oLi oLi2">item 2
<ul class="oOul" >
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(function(){
$(".oUl").children().find("ul").hide();
// $(".oLi").click(function(){
// $(this).children("ul").toggle();
// });
// $(".oLi").on("click",function(){
// $(this).children("ul").toggle();
// });
$("body").on("click",function(){
alert(event.target.className);
$(event.target).children(".oOul").toggle();
//$(event.target).children().find(".oOul").toggle();
//$(this).children().find("ul").toggle();//this具有向下捕獲的現象
$(event.target).css("font-size","22px");
});
// $("body").on("click",".oLi",function(){
// alert(event.target.className);
// //$(event.target).children(".oOul").toggle();
// $(this).children(".oOul").toggle();
// });
});
</script>
</body>
</html>
代碼只要把jquery改為你本地的文件，可直接運行，比較干巴，將就一下哈。代碼里介紹了幾個事件注冊和綁定的編寫方法，各有優缺點，就不贅述了。主要想說的就是未注釋的那段，文字比較蒼白，希望大家用的到的，可以實際操作一下。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
