Home > Developer > JavaScript
Functions of the jQuery event model include:
Provides a unified method for establishing event handlers;
Multiple handlers can be created for each time type on each element;
Use a standard event type name, such as click or mouseover;
Event instances can be used as processing program parameters;
Normalize the most common attributes of Event instances;
Provides a unified method for canceling events and blocking default operations.
JQuery binds the event handler:
Bind () command
$ ('Img '). bind ('click', funciton (event) {alert ('Hi there') ;}); this statement binds the provided inline function to the image on the page, as the click event handler.
Create an event handler without requiring specific browser code
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Title> jQuery Events Example </title>
<Script type = "text/javascript" src = "../scripts/jquery-1.2.1.js">
</Script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Vstar ')
. Bind ('click', function (event ){
Say ('whee once! ');
})
. Bind ('click', function (event ){
Say ('whee twice! ');
})
. Bind ('click', function (event ){
Say ('whee three times! ');
});
});
Function say (text ){
$ ('# Console'). append ('<div>' + text + '</div> ');
}
</Script>
</Head>
<Body>
<Div id = "console"> </div>
</Body>
</Html>
Delete event Handlers unbind (event, listener), unbind (event)
Delete the event handler specified by the optional passed parameters from all elements of the package set. If no parameter is provided, all listeners (Event Handlers) are deleted from the element)
Listener toggle ()
Toggle (listenerOdd, listenerEven) builds a passed function as a one-to-one click event handler for all elements of the encapsulated set. Each time a click event is triggered, it switches to the other.
Each time a click event occurs, a complementary listener is called.
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Title> jQuery Toggle Command Example </title>
<Script type = "text/javascript" src = "../scripts/jquery-1.2.1.js">
</Script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Vstar'). toggle (
Function (event ){
Condition (event.target).css ('opacity ', 0.4 );
},
Function (event ){
Condition (event.target).css ('opacity ', 1.0 );
}
);
});
</Script>
</Head>
<Body>
</Body>
</Html>
Hover the mouse pointer hover (overListener, outListener) over the element to create a mouseover and mouseout event handler for the matched element. These handlers are triggered only when the area covered by the element is moved in and out, ignoring the migration of the mouse pointer from the parent element to the child element.
Mouse stop event
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Title> Hover example </title>
<Link rel = "stylesheet" type = "text/css" href = "hover.css">
<Script type = "text/javascript"
Src = "../scripts/jquery-1.2.1.js"> </script>
<Script type = "text/javascript">
Function report (event ){
$ ('# Console'). append ('<div>' + event. type + '</div> ');
}
$ (Function (){
$ ('# Outer1 ')
. Bind ('mouseover', report)
. Bind ('mouseout', report );
$ ('# Outer2'). hover (report, report );
});
</Script>
</Head>
<Body>
<Div class = "outer" id = "outer1">
Outer 1
<Div class = "inner" id = "inner1"> Inner 1 </div>
</Div>
<Div class = "outer" id = "outer2">
Outer 2
<Div class = "inner" id = "inner2"> Inner 2 </div>
</Div>
<Div id = "console"> </div>
</Body>
</Html>
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
