最近小码哥，在研究学习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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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改为你本地的文件，可直接运行，比较干巴，将就一下哈。代码里介绍了几个事件注册和绑定的编写方法，各有优缺点，就不赘述了。主要想说的就是未注释的那段，文字比较苍白，希望大家用的到的，可以实际操作一下。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
