JQuery Binding Event

in the daily writing code, there is bound code, for the Novice me, the JQ event in the binding custom of a general distinction.

The JQuery on () method is an officially recommended way to bind events.

$ (selector). On (Event,childselector,data,function, map)

Several of the previously common methods that have been extended are as follows.

bind ()

$ ("P"). Bind ("click",function() {alert ("I ' m ' You friend---mymingk.")　　);　　}); $ ("P"). On ("click",function() {alert ("I ' m friend---mymingk.")　　); });

delegate ()

$ ("#div1"). On ("click", "P",function() {$ (this). CSS ("Background-color", "Pink");　　}); $ ("#div2"). Delegate ("P", "click",function() {$ (this). CSS ("Background-color", "　　Pink "); });

Live ()

$ ("#div1"). On ("click",function() {$ (this). CSS ("Background-color", "Pink");　　});　　$ ("#div2"). Live ("Click",function() {$ (this). CSS ("Background-color", "Pink"); });

None of the above three methods are recommended after jQuery1.8, and the Live () method has been canceled by the official at 1.9, so it is recommended to use the on () method.

Tip: If you need to remove the method that is bound on (), you can use the off () method to process it.

$ (document). Ready (function() {$ ("P"). On ("click",function() {$ (This)　　. CSS ("Background-color", "Pink");　　});　　$ ("button"). Click (function() {$ ("P"). Off ("click"); });});

Tip: If your event requires only one operation at a time, you can use the one () method

$ (document). Ready (function() {$ ("P"). One ("click",function() {$ ()　　). Animate ({fontSize: "+=6px"}); });});

trigger () binding

$ (selector). Trigger (Event,eventobj,param1,param2,...) $ (document). Ready (function() {$ ("input"). Select (function() {$ ("input"). After ("Text marked!"　　);　　});　　$ ("button"). Click (function() {$ ("input"). Trigger ("select"); });});

Multiple events bound to the same function

$ (document). Ready (function() {$ ("P"). On ("MouseOver mouseout",function() {$ ("p　　"). Toggleclass (" Intro "); });});

Multiple events bind different functions

$ (document). Ready (function() {$ ("P"). ({mouseover:function() {$ ("body"). css ("Background-color", "Lightgray"), mouseout:function() {$ ("body"). CSS ("Background-color", " 　　LightBlue ");}, click:function() {$ (" body "). CSS (" Background-color "," yellow ");} });});

Binding Custom Events

$ (document). Ready (function() {    $(function(event, ShowName) {        $ (  this). Text (ShowName + "! What a beautiful name! " ). Show ();    });    $ ("button"). Click (function() {        $ ("P"). Trigger ("Myownevent", ["Anja"]);});        

Passing data to a function

function HandlerName (event) {    alert (event.data.msg);} $ (document). Ready (function() {    $ ("P"). On ("click", {msg: "You just clicked me!" }, HandlerName)});

Applies to elements that are not created

$ (document). Ready (function() {    $ (' div '). On ("click", "P",function() {        $ (  this). Slidetoggle ();    });    $ ("button"). Click (function() {        $ ("<p>this is a new paragraph.</p>"). InsertAfter ("button")     ;});

JQuery Binding Event