JavaScript on method

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 ("the paragraph was clicked.");　　});　　$ ("P"). On ("click", Function () {alert ("the paragraph is clicked."); });　　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"). The One ("click", Function () {$ (this). 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 () {  $ ("P"). "Myownevent", 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"); });});

Excerpt from the jquery API

JavaScript on method