Home > Developer > Web Develop
JQuery event processing and jquery events
JQuery does not support model capturing.
Analysis of the bubble model<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 (" bubble phenomenon "). append ("<div> <B> execution times" + I + "</B> </div> ")});
Output result: the number of executions is 3.
The same program is executed three times after a button is clicked. $ ("body, div, # bntShow") is bubbling and the click events of # bntShow, div, and body are triggered respectively, therefore, three I ++ operations were performed.
In JQuery, you can use the stopPropagation () method to prevent bubbles.
In the preceding script, the number of executions can be 1.
$ ("Body, div, # bntShow "). click (function () {I ++; $ (". classShow ").show().html (" bubble phenomenon "). append ("<div> <B> execution times" + I + "</B> </div>"); event. stopPropagation (); // you can also use return false to prevent bubbling });Event MethodBind () attaches one or more event processors to the Matching Element
Blur () triggers or binds a function to a blur event of a specified element.
Change () triggers or binds a function to a change event of a specified element.
Click () trigger, or bind the function to the click Event of the specified Element
Dblclick () triggers or binds a function to a doubleclick event of a specified element.
Delegate () attaches one or more event processors to the current or future child elements of the matching element.
Die () removes all event handlers added using the live () function.
An error () trigger or an error event that binds a function to a specified element.
Event. isDefaultPrevented () returns whether event. preventDefault () is called on the event object ().
The cursor position of event. pageX relative to the left edge of the document.
The cursor position of event. pageY relative to the top edge of the document.
Event. preventDefault () blocks the default action of an event.
Event. result contains the last value returned by the event processor triggered by the specified event.
Event.tar get the DOM element that triggers the event.
Event. timeStamp this attribute returns the number of milliseconds from January 1, January 1, 1970 to when the event occurred.
Event. type describes the event type.
Event. which indicates which key or button is pressed.
The focus () trigger, or bind the function to the focus event of the specified element.
Keydown () trigger, or bind the function to the key down event of the specified Element
Keypress () is triggered, or the function is bound to the key press event of the specified element.
Keyup () trigger, or bind the function to the key up event of the specified Element
Live () adds one or more event processors for current or future matching elements
Load () trigger, or bind the function to the load event of the specified Element
A mousedown () trigger or a mouse down event that binds a function to a specified element.
Mouseenter () is triggered, or the function is bound to the mouse enter event of the specified element.
Mouseleave () triggers or binds a function to a mouse leave event of a specified element.
The mouse move () event that triggers or binds a function to a specified Element
A mouseout () trigger or a mouse out event that binds a function to a specified element.
A mouseover () trigger or a mouse over event that binds a function to a specified element.
A mouseup () trigger or a mouse up event that binds a function to a specified element.
One () adds an event processor to the matching element. Each element can only trigger this processor once.
Ready () Document readiness event (When HTML documents are ready for use)
Resize () is triggered, or the function is bound to the resize event of the specified element.
Scroll () trigger, or bind the function to the scroll event of the specified Element
Select () triggers or binds a function to a select event of a specified element.
Submit () triggers or binds a function to a submit event of a specified element.
Toggle () is bound to two or more event processor functions and executed in turn when a click event occurs.
Trigger () All specified events matching elements
TriggerHandler () is the first specified event of the matched element.
Unbind () removes an added event processor from the Matching Element
Undelegate () removes an added event processor from the Matching Element, now or in the future
Unload () trigger, or bind the function to the unload event of the specified Element
Bind (type, [data], function) Method$ ("Div"). bind ("clickmouseout", function () {// bind multiple events, which can be separated by spaces })
Bind by ing
$("div").bind( { focus:function(){ }, change:function(){ } });
Conditions with Parameters
Var message = "The focus event is executed"; $ ("div "). bind ("focus", {msg: message}, function (event) {$ ("# div1 "). show (). html (event. data. msg );})Hover () methodThis method allows you to switch between elements in the event of mouse hover and mouse removal. This method can also be replaced by mouseenter and mouseleave.
$("a").hover( function(){ }, function(){ })
Equivalent
$("a").mouseenter( function(){ };)$("a").mouseleave( function(){ };)Toggle () methodThe function of this method is to call the defined functions 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 image, change one at a time, and execute three functions in sequence.
Unbind (type, function) Method$ ("Input: eq (0 )"). bind ("click", function () {$ ("# divtip "). append ("Click Event of Button 1") ;}); functionoClick () {{ ("# divtip "). append ("Click Event of Button 2") ;}; ("input: eq (1 )"). bind ("click", oClick); $ ("input: eq (2 )"). bind ("click", function () {$ ("input "). unbind (); // click event to remove all input forms // $ ("input "). unbind ("click", oClick); // only remove the event of Button 2 });<Input type = "button" value = "button 1" class = "bnt"/> <input type = "button" value = "button 2" 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 binding only once. Its usage is similar to that of bind ().
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>
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
