Home > Developer > Web Develop
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> run Times" +i+ "</b></div>")});
Output: Run times 3
Click button once but run 3 times the same program, $ ("Body,div, #bntShow") bubble phenomenon, triggered the #bntshow, Div, body, respectively, the click event, so run three times i++ operation
Ability to block bubbling with the Stoppropagation () method in jquery
Add this sentence in the above script, run the number of abilities to 1
Event method$ ("Body,div, #bntShow"). Click (function () { i++; $ (". Classshow"). Show (). HTML ("bubbling Phenomenon") . Append ("<div><b> run Times" +i+ "</b></div>"); Event.stoppropagation (); You can also use return FALSE to block bubbling});Bind () attaches one or more other 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 that are joined by 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 includes 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 types of events described.
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 () joins one or more event handlers for current or future matching elements
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 () joins the event handler to the matching element. Each element can only trigger the processor at a time.
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 run when a rotating click event occurs.
Trigger () The specified event for all matching elements
Triggerhandler () The first specified event of a matched element
Unbind () removes a joined event handler from the matching element
Undelegate () Removes a joined 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 a space })
Binding by mapping method
$ ("div"). Bind ( { focus:function () {}, change:function () {} });
Cases with a number of parameters
Hover () methodvar message = "The Focus event is running"; Bind ("Focus", {Msg:message},function (event) { $ ("#div1"). Show () . HTML ( event.data.msg);})This method enables the element to switch between mouse hover and mouse-over events, which can also be replaced by MouseEnter and MouseLeave
$ ("a"). Hover ( function () {}, function () {})
Equivalent to
Toggle () method$ ("a"). MouseEnter ( function () {};) $ ("a"). MouseLeave ( function () {};)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, run 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") from 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) methodThis method is used to trigger event bindings only once, and is used in a way similar to the bind () method
Trigger (Type,[data]) methodDelegate (Childselector,event,data,function) method$ ("button"). Click (function () { $ ("input"). Trigger ("select");});$ ("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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
