Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of event bubbling, event delegation, jQuery element node operation, wheel event and function throttling, which is very detailed and has a certain reference value. Interested friends must read it!

I. definition of event bubbling

Event bubbling means that a certain kind of event is triggered in an object (such as clicking the onclick event). If the object defines a handler for this event, then this event will call the handler. If no event handler is defined or the event returns true, then the event will be propagated to the object's parent object, from the inside out, or even handled (all similar events of the parent object will be activated) Or it reaches the top of the object level, the document object (some browsers are window).

Second, the role of event bubbling

Event bubbling allows multiple operations to be handled centrally (adding event handlers to a parent element to avoid adding event handlers to multiple child elements), and it also allows you to capture events at different levels of the object layer.

Third, stop the event from bubbling.

The event bubbling mechanism is sometimes unnecessary and needs to be stopped, through event.stopPropagation ()

Fourth, block the default behavior

Such as: block right-click menu

5. Merge blocking operation

In actual development, the combination of preventing bubbling and preventing default behavior is generally written as follows:

VI. Event delegation

Event delegation is to use the principle of bubbling to add the event to the parent, by judging the subset of the event source and performing the corresponding operation, the event delegate can first greatly reduce the number of event binding and improve the performance. secondly, the newly added child elements can also have the same operation.

1. How to write a general binding event:

2. the writing of event delegation: (in actual development, if you operate on large quantum elements, you should use event delegation to improve performance.)

7. Cancel the delegation of events

Usage: $("delegate object"). Undelegate ()

8. JQuery element node operation 1. Create a node

2. Insert node

A, append (), and appendTo () are inside the existing element, inserting the element from behind

The output is as follows:

B, prepend () and prependTo () are inside the existing element, inserting the element from the front

Output result:

C, after (), and insertAfter () are outside the existing element, inserting the element from behind

Output result:

D, before (), and insertBefore () insert the element from the front outside the existing element

Output result:

3. Delete a node

(selector) .remove ()

4. To do list (schedule list) instance

.con {width:360px; margin:30px auto;} .con > h4 {margin-bottom:15px;} .con input {width:290px; height:30px;} .con button {width:60px; height:34px; border:0;} .con ul li {display: flex; margin-top:15px; border-bottom:1px solid # ccc; justify-content: space-between } .con li p {/ * clear the gap between an elements * / font-size:0;} .con li p a {color:#1b5fdd; font-size:16px; margin-left:10px;} / * pop _ con {position:fixed; top:0; right:0; bottom:0; left:0; background:#000; display: none;} .pop {width:400px; height:220px Position:absolute; left:50%; margin-left:-200px; top:50%; margin-top:-150px; background:#fff;} .pop .pop _ title {padding:15px; display: flex; justify-content: space-between;} .pop .pop _ title a {width:36px; height:36px; line-height:36px; border-radius:50%; background:#c7254e; color:#fff; text-align: center; position:absolute Top:-18px; right:-18px; transition: all 1s ease;} .pop _ title h4 {letter-spacing: 2px; font-weight: normal;} .pop _ title a:hover {transform: rotate (360deg);} .pop _ message {height:110px; line-height:110px; text-align: center;} .pop _ confirm {height:36px; text-align: center;} .pop _ confirm button {height:36px; line-height: 36px Padding:0 15px; background: # c7254e; border:none; color:#fff; outline: none;} $(function () {/ / declare the variable var $input = $("# input"); $(".pop") .click (function () {return false;}); $(".pop _ confirm") .click (function () {$(".pop _ con"). FadeOut ();}) (".close") .click (function () {$(".pop _ con") .fadeOut ();}); $(".pop _ con") .click (function () {$(this). FadeOut ();}); / / Click the add button to add the element $("# add") .click (function () {var $inputVal = $input.val ()) / / if the input value is empty, a pop-up box prompts if ($inputVal = = "") {$(".pop _ con") .fadeIn (); return false} $input.val (""); var $li = $("" + $inputVal+ ")

Delete move up and down

"); $(" ul ") .append ($li);}) / / write together using event delegates Improve performance $("ul") .delegate ("li a", "click", function () {/ / first determine which an if ($(this) .attr ("class") = = "prev") {/ / determine whether the element if ($(this) .closest ("li"). Prev (). Length = 0) {$(".pop _ message"). Html ("Top!") $(".pop _ con"). FadeIn (); return false} $(this) .closest ("li"). Prev (). Before ($(this) .closest ("li"));} else if ($(this) .attr ("class") = "next") {if ($(this) .closest ("li"). Next (). Length = 0) {$(".pop _ message"). Html ("bottom!") $(".pop _ con") .fadeIn ();} $(this) .closest ("li"). Next (). After ($(this) .closest ("li"));} else {$(this) .closest ("li"). Remove ()}) To do list adds learning html

Delete move up and down

Learning css

Delete move up and down

Learning ps

Delete move up and down

Prompt message X input box cannot be empty. I know.

9. Roller event and function throttling 1. Use of jquery.mousewheel plug-in

There is no wheel event in jquery, the mouse wheel event in native js is not compatible, you can use jquery's wheel event plug-in jquery.nousewheel.js.

2. Function throttling

Some events in javascript are triggered very frequently, such as onresize events (resize in jq), onmousemove events (mousemove in jq) and mouse wheel events mentioned above. Functions that trigger binding multiple times in a short period of time can skillfully use timers to reduce the number of triggers and achieve function throttling.

3. Full screen scrolling example

Scrolling the whole screen. Page _ con {width:100%; / * must be fixed, otherwise there will be problems * / position:fixed; top:0; left:0; overflow: hidden;} .page {position:relative;} .page .main _ con {width:900px; height:400px; position:absolute; left:50%; top:50%; margin-top:-200px; margin-left:-450px } .page .main _ con .left _ img {width:363px; height:400px;} .page .main _ con .left _ img,.page .main _ con .right _ img {opacity: 0; position: relative; filter:alpha (opacity = 0); transition:all 1s ease 300ms;} .page .main _ con .right _ info {width:500px; height:300px } .page .main _ con .right _ info,.page .main _ con .left _ info {font-size:20px; line-height:50px; color:#666; text-indent:2em; text-align:justify; position:relative; opacity:0; filter:alpha (opacity=0); transition:all 1000ms ease 300ms;} .main _ con .right _ img {width:522px; height:400px; top:-50px;} .main _ con .left _ info {width:350px Height:300px; bottom:-50px;} .main _ con .left _ img,.main_con .left _ info {left:-50px;} .main _ con .right _ img,.main_con .right _ info {right:-50px;} .main _ con .center _ img {opacity: 0; filter:alpha (opacity = 0); text-align: center; transition: all 1s ease 300ms } .moving .main _ con .left _ img,.moving _ con .left _ info,.moving .main _ con .center _ img {left:0; opacity: 1; filter:alpha (opacity = 100);} .moving .main _ con .center _ img {transform: scale;} .moving .main _ con .right _ info,.moving .main _ con .right _ img {margin-top:50px; right:0; opacity: 1; filter:alpha (opacity = 100) } .moving .main _ con .right _ img {/ * top:25px;*/} .page1 {background:orange;} .page2 {background:lightgreen;} .page3 {background:cyan;} .page4 {background:pink;} .page5 {background:lightblue;} .points {width:16px; height:176px; position:fixed; top:50%; right:20px; margin-top:-88px;} .points li {width:16px Height:16px; line-height:16px; margin-top:15px; border:1px solid # 666; border-radius:50%;} .points li:hover,.points li.active {width:6px; height:6px; cursor: pointer; border:6px solid # fff70c;} $(function () {$(".page1") .addClass ("moving"); var page = $(".page"); var len = page.length; var currentPage = 0; var timer = null / / get the height of the display area var $h = $(window). Height (); page.css ({height:$h}); $(window) .mousewheel (function (event,dat) {/ / slide dat to-1, slide up to 1 / / to clear the timer opened earlier to achieve function throttling clearTimeout (timer); timer = setTimeout (function () {if (dat =-1) {currentPage++) If (currentPage > len-1) {/ / if it is greater than 4, do not slide down currentPage=len-1;}} else {currentPage--; / / to determine whether the current page is less than 0, and if so, do not slide up. If (currentPage

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.