Analysis of principles and usage examples of jQuery event entrustment

This example describes the principles and usage of jQuery event entrustment. Share to everyone for your reference, the specification is as follows:

The event is to use the principle of the event, add the event to the parent, perform the corresponding operation by judging the subset of the event source. The event entrustment first can greatly reduce the number of event bindings, followed by adding newly added subset elements to the same operation.

 Title  Title   .list {background-color: gold; list-style-type: none; padding: 10px;} .list li {height: 30px; background-color: green; margin: 10px;}    $ (Function () {/ *). Click (Function () {$ (this) .css ({BackgroundColor: 'red'});}) * /// Write into an event entrustment, put the entrusted event in the parent $ ('. List'). Delegate ('li', 'click ", function () {$ (this) .css ({BackgroundColor : 'red'});}); // New LI element replication to $ li variable var $ li = $ (' 9 '); $ ('. list'). append ($ li) ; // put the new element in the last side of the UL subset. This is the node operation})     
  • 3
  • 4
      5
    • 6
    • 7
    • Key code, event entrust function
    • $ ('. List'). Delegate ('li', 'click ", function () {$ (this) .css ({BackgroundColor:' red '});
    The new node can also be used because there are event commission

    // New Li element copy to $ Li Variable VAR $ Li = $ ( ‘
    9 . Append ($ li); // Put the new element in the last side of the UL subset. This is the node operation
       
    jQuery event list

    BLUR () element lost focus
    FOCUS () element gets focus, in fact, the cursor is called getting focus in the input box Click () Click
     mouseOver () mouse to enter  mouseout () mouse off 
  • mouseEnter () mouse entry, enter the element does not trigger
  • mouseleave () mouse exit, leave the element does not trigger
    HOVER () simultaneously specifies the processing function for the MouseEnter and MouseEleave event
    ready () DOM loading resize () browser window size change
    scroll () scroll bar positionChange

    Submit () user submission form

    BLUR and FOCUS events and submit Submit



    If you want to submit a form, Form is written to write submit address Action, INPUT Name




    Title



    $ (FUNCTION () {/* $ (‘).foCus () {Alert (‘ gets focus’); /! * actually called the cursor when entering the box, it is called the focus *! /}) * //// What do you do when getting focus, $ (‘# INPUT01’). Focus (); // This is the focus $ (‘# INPUT01’) when you go in. BLUR (function () {/ * lost focus Time to handle functions * / alert (‘lost focus’);}) $ (‘# form1’). Submit (function () {Alert (‘submit’);})

     can be directly pasted.          Title    $ (Window) .resize (Function () {Var $ w = $ (WiNDOW) .width (); document.title = $ w;}       browser size occurs When you change, hit the browser width on Title, the Resize event is to be bound to the Window.  Interested friends can use  online HTML / CSS / JavaScript code run tool  http://tools.jb51.net/code/htmljsrun test the code running effect. 
    More about JQuery Related Contents Readers can view this site: “jQuery common event usage and skill summary”, “jQuery common plugin and usage summary”, “jQuery operation JSON data skills Summary, “jQuery extension skill summary”, “jQuery common classic special effects summary” and “jQuery selector usage summary”

    I hope this article will help you jQuery program design.

    © Copyright Notice
    THE END
    Just support it if you like
    like0
    share
    comment Grab the couch

    Please log in to comment