Home > Developer > Web Develop
1. Cancel Event bubbling
<title>Cancel Event Bubbling</title> <style>Div{Border:Solid 1px Black; } </style> <Scriptsrc= "Js/jquery-3.1.1.js"></Script> <Script> $(function () { $("#big"). Click (function() {alert ("I ordered a big box."); }); $("#small"). Click (function() {alert ("I ordered a small box."); Event=Event||window.eventif(event.stoppropagation) {//IE Browserevent.stoppropagation (); } Else { //non-IE browserevent.cancelbubble= true; } }); }); </Script></Head><Body> <DivID= "Big"style= "height:500px; width:500px; Background-color:yellow"> <DivID= "small"style= "height:300px; width:300px; Background-color:blue"></Div> </Div>
The effect is as follows without canceling the event bubbling, click on the small Div will continue to pop up "point a big box" tips
It won't be after the cancellation.
=_=
2. Cancellation of subsequent content execution
<title>Cancel subsequent content execution</title> <Scriptsrc= "Js/jquery-3.1.1.js"></Script> <Script> $(function () { $("a"). Click (function () { //return false; //Sub-browserEvent=Event||window.event; if(event.preventdefault) {//ie underEvent.preventdefault (); } Else { //non-IE underEvent.returnvalue= false; } }); }); </Script></Head><Body> <ahref= "Www.baidu.com"style= "font-size:30px">Go to Baidu</a></Body>
Such code click on the "Go Baidu" button above will not jump page
Because the subsequent events were canceled
3. Closure function
The function contains a child function, and finally the return child function .
What is the use of the closure function?
1, Cache: The most obvious benefit is that the data cache can be implemented, we can use a long-term variable to be set to the closure function of the local variable, in the child function directly using it. So the local variable is only defined once, but we can call the child function multiple times and use the variable. This is more efficient than the practice of defining initialization variables in child functions, multiple invocations, and multiple initializations. One of the common uses of closure functions is that we can implement the Count function. Define a count variable in the closure function, and do the + + operation in the child function. So each time the closure function is called, the count variable will be added 1.
2, implementation of encapsulation: As previously said, the closure function is like a "class", only in the closure function of the method can use its local variables, the closure function outside the method is not able to read its local variables. This enables object-oriented encapsulation, which is more secure and more reliable.
<Scripttype= "Text/javascript"> functionoutside (x) {x=x* 2; functioninside () {x++; returnx; } returninside (); } alert (Outside (2)); </Script>
The result is a pop-up message box that prompts the number 5
JQuery Cancel event Bubbling blocks subsequent content execution closure function (Learning Note)
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
