Home > Web Front-end > JS Tutorial > body text

jQuery Learning 5 jQuery Event Model_jquery

WBOY
Release: 2016-05-16 18:35:18
Original
984 people have browsed it

The functions of the jQuery event model are:
Provides a unified method for establishing event handlers;
Allows multiple handlers for each time type on each element;
Adopts standard event type names, such as click or mouseover;
Uses Event instances that can be used as arguments to handlers;
Normalizes the most commonly used properties of Event instances;
Provides unified methods for canceling events and blocking default actions.
jQuery binding event handler:
bind() command
$('img').bind('click',funciton(event){alert('Hi there');}); the The statement binds the provided inline function to the image on the page as a click event handler.

Build event handlers without browser-specific code

Copy the code The code is as follows:


< html>

jQuery Events Example





< ;/div>




Delete event handlers unbind(event,listener),unbind(event)
Removes the event handler specified by the optional passed parameter from all elements of the wrapper set. If no parameters are provided, all listeners (i.e. event handlers) are removed from the element
Toggle listener toggle()
toggle(listenerOdd,listenerEven) establishes the passed function as owned by the wrapper set A pair of click event handlers for an element that switch to each other whenever a click event is triggered.
Whenever a click event occurs, call the complementary listener
Copy the code The code is as follows:



jQuery Toggle Command Example




< ;img id="vstar" src="vstar.jpg"/>




Hover over element The mouse pointer hover(overListener, outListener) establishes the mouseover and mouseout event handlers for the matched element. These handlers are only triggered when the area covered by the element is entered and exited, ignoring the migration of the mouse pointer from the parent element to the child element

Mouseover event
Copy code The code is as follows:




Hover example






Outer 1
Inner 1



Outer 2
Inner 2





Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template