[jquery] Advanced article--JS binding events

Reference: http://www.cnblogs.com/leejersey/p/3545372.html

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 ()

1 $ ("P"). Bind ("Click",function() {2 alert ("the paragraph was clicked.") ); 3 }); 4 $ ("P").  on ("click",function() {5 alert ("the paragraph was clicked.") ); 6 });

Delegate ()

1 $ ("#div1"). On ("click", "P",function() {2 $ (this). CSS (" Background-color "," Pink "); 3 }); 4 $ ("#div2"). Delegate ("P", "click",function() {  //Event delegate 5 $ (this). CSS ("Background-color "," pink "); 6 });

Live ()//not recommended

1 $ ("#div1"). On ("click",function() {2 $ (this). CSS ("Background-color" , "Pink"); 3 }); 4 $ ("#div2"). Live ("Click",function() {5 $ (this). CSS ("Background-color", "Pink"); 6 });

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.

 1  $ (document). Ready (function  Span style= "color: #000000;" > () { 2  $ ("P"). On ("click", function   () { 3  $ (this ). CSS ("Background-color", "Pink"  4  });  5  $ ("button"). Click (function   () { 6  $ ("P"). off  ("click"  7  });  8 }); 

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

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

Trigger () Binding event

$ (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() {$ ("P"). "myowneventfunction(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() {$ ({msg: "Just clicked Me!"  }(handlerName)});

Applies to elements that are not created

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

// Toggle the visible state of an element by using the slide effect (height change)

Slidetoggle Reference: Http://www.w3school.com.cn/jquery/effect_slidetoggle.asp

[jquery] Advanced article--JS binding events