Home > Developer > Web Develop
Recently small yards , in research study Nodejs and related framework Webpack, Express, Reactjs and so on, for the future, in order to RMB, small brother remember self-charge, in case of a rainy day.
In the study of Reactjs, in the predecessor Ruanyifeng's blog post, saw a previously not much attention to the knowledge point. is related to the difference between this and event.target. At that time, the feeling was blindfolded, found that Event.target seems to be not deep ah, the moment small brother opened the run mode,,
All kinds of Baidu, a variety of chrome biying and so on, found that the distinction is not difficult, is more meticulous. Not fine analysis, a little dizzy!
First, a summary, combined with the explanation of the predecessors and their own understanding of the results:
1. as front-end personnel, for the context of the representative of this seems to be unfamiliar, strange is that sometimes it is easy to tell the last representative of WHO. On event registration and binding, this refers to the object element where the event is registered and bound. That is, who binds the click and other events, this general refers to WHO. In a simple event, this is also called the context.
2. However, as the front-end personnel, Event.target should not be unfamiliar, but also use not much,, in short, small brother see it when Meng B,, that event.target representative is God Horse? In his own writing demo, repeated experiments, finally figured out, it finally represents who! Event.target is not associated with event binding and registration, but there is a large correlation between the elements that are directly starting when the event occurs.
Above two points, is the text narration, a little pale, to small white front end, estimate also will Meng B ...
Practice is the only standard for testing truth, something that is said to the people. In the IT industry, the real demo code is the only standard for verifying that events can pass.
The code is as follows: (Hope new and old yards of agricultural light to see not spray, silently ha ~)
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<body class= "Obody" >
<ul class= "Oul" style= "Padding:30px;background: #ff0; margin:30px;" >
<li class= "OLi oLi1" >item 1
<ul class= "Ooul" style= "background: #f60;" >
<LI>SUB Item 1-a</li>
<LI>SUB Item 1-b</li>
</ul>
</li>
<li class= "OLi oLi2" >item 2
<ul class= "Ooul" style= "background: #06f;" >
<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 has a downward-catching phenomenon
$ (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>
The code as long as the jquery to your local files, you can run directly, compare the dried, will be a bit ha. The code introduces several event registration and binding writing methods, each with advantages and disadvantages, do not repeat. The main thing is to say that the paragraph is not annotated, the text is more pale, I hope you use the to, you can actually operate a bit.
This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1767564
JQuery Event Registration and binding and the difference between this and event.target
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
