The event handling of jquery

Source: Internet
Author: User

jquery does not support capturing models

Bubble Model parsing

<body>      <div>             <input id= "bntshow" type= "button" value= "click" class= "BNT"/>      </div>      <div class= "Classshow" >   </div></body>

var i =; $ ("Body,div, #bntShow"). Click (function () {      i++;      $ (". Classshow"). Show (). HTML ("bubbling Phenomenon")      . Append ("<div><b> execution Times" +i+ "</b></div>")});

Output: Number of executions 3

Click once button but executed 3 times the same program, $ ("Body,div, #bntShow") bubble phenomenon, respectively triggered the #bntshow, Div, body of the Click event, so performed three times i++ operation

You can use the Stoppropagation () method to block bubbling in jquery

Add this sentence to the above script, the number of executions can be 1

$ ("Body,div, #bntShow"). Click (function () {      i++;      $ (". Classshow"). Show (). HTML ("bubbling Phenomenon")      . Append ("<div><b> execution Times" +i+ "</b></div>");      Event.stoppropagation ();  You can also use return FALSE to block bubbling});

Event method

Bind () attaches one or more event handlers to the matching element

Blur () triggers, or binds a function to the blur event of a specified element

Change () triggers, or binds a function to a specified element

Click () to trigger, or bind the function to the click event of the specified element

DblClick () triggers, or binds a function to the DoubleClick event of a specified element

Delegate () attaches one or more event handlers to the current or future child elements of the matching element

Die () Removes all event handlers added through the live () function.

Error () triggers, or binds the function to the error event of the specified element

Event.isdefaultprevented () returns whether Event.preventdefault () is called on the event object.

Event.pagex the mouse position relative to the left edge of the document.

Event.pagey the mouse position relative to the top edge of the document.

The default action of the Event.preventdefault () block event.

The Event.result contains the last value returned by the event handler that is triggered by the specified event.

Event.target the DOM element that triggered the event.

Event.timestamp This property returns the number of milliseconds from January 1, 1970 to the time the event occurred.

Event.type describes the type of event.

Event.which indicates which key or button was pressed.

Focus event that triggers, or binds a function to a specified element

KeyDown () triggers, or binds a function to a key down event of a specified element

KeyPress () A key press event that triggers, or binds a function to a specified element

KeyUp () triggers, or binds a function to a key up event of a specified element

Live () adds one or more event handlers for the current or future matching element

Load () trigger, or bind function to the load event of the specified element

MouseDown () triggers, or binds a function to the mouse down event of a specified element

MouseEnter () triggers, or binds a function to the mouse enter event of a specified element

MouseLeave () triggers, or binds a function to the mouse leave event of a specified element

MouseMove () mouse move event that triggers, or binds a function to a specified element

Mouseout () triggers, or binds a function to the mouse out event of a specified element

MouseOver () mouse over event that triggers, or binds a function to a specified element

MouseUp () mouse up event that triggers, or binds a function to a specified element

One () adds an event handler to the matching element. The processor can only be triggered once per element.

Ready () Document readiness Event (when the HTML document is ready to be available)

Resize () triggers, or binds a function to the resize event of a specified element

Scroll () triggers, or binds a function to the scroll event of a specified element

Select event that triggers, or binds a function to a specified element

Submit () triggers, or binds a function to a specified element's submit event

Toggle () Binds two or more event handler functions that are executed when a rotating click event occurs.

Trigger () specified event for all matching elements

Triggerhandler () The first specified event of a matched element

Unbind () removes an added event handler from the matching element

Undelegate () Removes an added event handler from the matching element, now or in the future

Unload () triggers, or binds a function to the Unload event of a specified element

Bind (Type,[data],function) method

$ ("div"). Bind ("Clickmouseout", function () {  ///Bind multiple events, can be separated by spaces      })

Binding by mapping method

$ ("div"). Bind (      {             focus:function () {},             change:function () {}      });

Case with parameters

var message = "The Focus event is performed"; Bind ("Focus", {Msg:message},function (event) {      $ ("#div1"). Show ()      . HTML ( event.data.msg);})

Hover () method

This method allows the element to switch between mouse-over and mouse-removed events, which can also be replaced by MouseEnter and MouseLeave

$ ("a"). Hover (      function () {},      function () {})

Equivalent to

$ ("a"). MouseEnter (      function () {};) $ ("a"). MouseLeave (      function () {};)

Toggle () method

The function of this method is to invoke the defined function in sequence after each click

$ ("img"). Toggle (function () {      $ ("img"). attr ("src", "imags/1.jpg");      $ ("img"). attr ("title", This.src);},function () {      $ ("img"). attr ("src", "imags/2.jpg");      $ ("img"). attr ("title", This.src);},function () {      $ ("img"). attr ("src", "imags/3.jpg");      $ ("img"). attr ("title", This.src);});  Click the picture, change one at a time, execute three functions in turn

Unbind (Type,function) method

$ ("Input:eq (0)"). Bind ("click", Function () {      $ ("#divtip"). Append ("button one clicking Event");}); Functionoclick () {      $ ("#divtip"). Append ("button two click event"); $ ("Input:eq (1)"). Bind ("click", Oclick); $ ("Input:eq (2)"). Bind ("click", Function () {      $ ("input"). Unbind ();  Removes the Click event      //$ ("input") for all input forms. Unbind ("click", Oclick);  Only remove the event of button two});

<input type= "button" value= "buttons One" class= "BNT"/><input type= "button" value= "button two" class= "BNT"/><input Type= "button" value= "Delete event" class= "BNT"/><div id= "Divtip" > </div>

One (type,[data],function) method

This method is used to trigger only one event binding, similar to the bind () method

Trigger (Type,[data]) method

$ ("button"). Click (function () {   $ ("input"). Trigger ("select");});

Delegate (Childselector,event,data,function) method

$ ("div"). Delegate ("button", "click", Function () {    $ ("P"). Slidetoggle ();  });

<div style= "background-color:red" ><p> this is a paragraph. </p><button> Click here </button></div>


The event handling of jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.