"Summarize and Organize" jquery Basic Learning---Events

The Click and Dbclick events of the jquery mouse event

In the interactive operation, the simplest and most straightforward operation is the click action. jquery provides two methods one is the click Method for listening for user clicks, and the other is the Dbclick method used to listen for user double-click operations. The use of these two methods is similar, as in the Click () event, for example

It's very easy to use:

Method One: $ele. Click ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). Click (function () {    alert (' Trigger specified event ')}) $ ("#test"). Click (Function () {     $ ("Ele"). Click ()  //Manually specify the trigger event});

Method Two: $ele. Click (Handler (EventObject))

Binding the $ele element, each time the $ele element triggers a click action executes the callback handler function, which can do a lot of action on the feedback of the event, which is the element that points to the bound event

<div id= "Test" > Click Trigger <div>$ ("#test"). Click (function () {    //this points to div element});

Method Three: $ele. Click ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). Click (11111,function (E) {    //this points to div element    //e.data  = > 11111 Pass Data});

The usage of DblClick () is similar to the use of Click (), which can be referenced by the use of click () above.

The Dbclick differs from the Click event:

The Click event trigger requires the following points:

• The Click event is actually made up of 2 actions by MouseDown and MouseUp, so the clicked action is only triggered when you let go.

Ps:mousedown and MouseUp the next section will cover

The following points are required for DblClick event triggering:

DblClick is also superimposed by 2 Click, so the DblClick event can only be triggered if the following conditions are met

• Click when the mouse pointer is inside the element.
• The mouse pointer is released inside the element.
• The mouse pointer inside the element when the click, click the interval time, is system-determined.
• When the mouse pointer is inside the element, it is released again.

Note: It is not advisable to bind both the click and DblClick events on the same element. The order in which each browser event is triggered is different, and some browsers accept two click events before DblClick, while some browsers accept only one click event. Users can often configure double-click sensitivity via different operating systems and browsers

MouseDown and MouseUp events of jquery mouse events

User interaction operation, the simplest direct operation is the click operation, so jquery provides a mousedown quick way to listen to the user mouse down the action, and its corresponding to a method MouseUp Quick Method can listen to the user mouse bounce action. The two methods are similar, with MouseDown () as an example

It's very easy to use:

Method One: $ele. MouseDown ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered and may be less commonly used

<div id= "Test" > Click Trigger <div>$ ("Ele"). MouseDown (function () {    alert (' Trigger specified event ')}) $ ("#test"). MouseDown ( function () {     $ ("Ele"). MouseDown ()  ///Manually specify trigger event});

Method Two: $ele. MouseDown (Handler (EventObject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseDown (function () {    //this points to div element});

Method Three: $ele. MouseDown ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseDown (11111,function (e) {    //this points to div element    //e.data  = 11111 Pass Data});

The following points are required for MouseDown event triggering:

• MouseDown emphasis is on the trigger
• If you hold down the mouse on an element and drag the mouse away from the element and release the mouse button, this is still counted as the MouseDown event
• MouseDown events can be triggered when any mouse button is pressed
• Use the event object's which to distinguish the key, hit the left mouse button which value is 1, hit the mouse key which value is 2, the right mouse button to which the value is 3

The following points are required for MouseUp event triggering:

• MouseUp stress is to let go of the trigger, and MouseDown is the opposite
• MouseUp and MouseDown together are the Click event
• If the user presses the mouse button on an element and drags the mouse away from the element, then releases the mouse button, which is still counted as the MouseUp event
• Any mouse button can trigger the MouseUp event when it's off
• Use the event object's which to distinguish the key, hit the left mouse button which value is 1, hit the mouse key which value is 2, the right mouse button to which the value is 3

It is also important to note that:

The difference between click and MouseDown:

• The Click event is actually made up of 2 actions by MouseDown in MouseUp, so the clicked action is only triggered after letting go.

MouseOver and mouseout events of jquery mouse events

When learning JS, you remember there are two ways to call the move out event? onMouseOver () and onmouseout () events ~

jquery also provides such an event to listen to the user's move-out operations, MouseOver () and mouseout () events, the use of both similar, the following mouseover as an example:

Method One: $ele. MouseOver ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). MouseOver (function () {    alert (' Trigger specified event ')}) $ ("#test"). Click ( function () {     $ ("Ele"). MouseOver ()  //Specify trigger event});

Method Two: $ele. MouseOver (Handler (EventObject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Slide trigger <div>$ ("#test"). MouseOver (function () {    //this points to div element});

Method Three: $ele. mouseover ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseOver (11111,function (e) {    //this points to div element    //e.data  = 11111 Pass Data});

MouseEnter and MouseLeave events of jquery mouse events

In an interactive operation, it is often necessary to know whether the user has moved the mouse to the inside or outside of the element, so jquery provides a quick way to MouseEnter and MouseLeave to listen to the actions of the user moving to the inside

It is very simple to use, three parameters are passed in the same way as the mouseover and mouseout, so there is no repetition here, mainly speaking of differences, the following mouseenter as an example:

MouseEnter JavaScript events are proprietary to Internet Explorer. Since this event is useful in peacetime, jquery simulates this event so that it can be used in all browsers. The event is triggered when the mouse is moved over the element. Any HTML element can accept this event.

The difference between MouseEnter events and MouseOver

The key point is: The bubbling way to deal with the problem

A simple example:

MouseOver For example:

<div class= "Aaron2" >    <p> mouse out of this area to trigger MouseLeave events </p></div>

If the P element and the DIV element are bound to the MouseOver event, the mouse leaves the P element, but does not leave the DIV element when the result is triggered:

1. P Element Response Event
2. div element Response Event

The question here is why does Div get triggered? The reason is the event bubbling problem, p element triggered mouseover, he will always look up on the parent element of the MouseOver event, if the parent element has MouseOver event will be triggered

So under this scenario, jquery recommends that we use the MouseEnter event

The MouseEnter event is called only on the element that binds it, not on the descendant node.

Hover events for jquery mouse events

Learn the MouseOver, mouseout, MouseEnter, MouseLeave events, also understand the four events of the same point and different points, now can be used to make a simple switch effect of the element

Move the element on the move out to toggle its color change, generally through 2 event mates can be achieved, here with MouseEnter and MouseLeave, so as to avoid bubbling problem

$ (ele). MouseEnter (function () {     $ (this). CSS ("Background", ' #bbffaa ');}) $ (ele). MouseLeave (function () {    $ (this). CSS ("Background", ' Red ');})

This goal is achieved, the code a little bit more, for such a simple logic jquery directly provides a hover method that can be easily handled

You only need to pass 2 callback functions in the hover method, you do not need to show the binding 2 events

$ (selector). Hover (Handlerin, handlerout)

• Handlerin (EventObject): event function that triggers execution when the mouse pointer enters an element
• Handlerout (EventObject): event function that triggers execution when the mouse pointer leaves an element

Focusin events for jquery mouse events

When an element, or any element within it, receives the focus, for example, the input element, when the user clicks on the focus, jquery provides a Focusin event when the developer needs to capture the action.

It's very easy to use:

Method One: $ele. Focusin ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, typically with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). Focusin (function () {    alert (' Trigger specified event ')}) $ ("#test"). MouseUp ( function () {     $ ("Ele"). Focusin ()  //Specify trigger event});

Method Two: $ele. Focusin (Handler)

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusin (function () {    //this points to div element});

Method Three: $ele. Focusin ([EventData], handler)

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusin (11111,function (e) {    //this points to div element    //e.data  = > 11111 Pass Data});

Focusout events for jquery mouse events

When an element, or any element within it, loses focus, such as the input element, when the user clicks the lost point, and if the developer needs to capture the action, jquery provides a focusout event

It's very easy to use:

Method One: $ele. Focusout ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered and may be less commonly used

<div id= "Test" > Click Trigger <div>$ ("Ele"). Focusout (function () {    alert (' Trigger specified event ')}) $ ("#test"). MouseUp ( function () {     $ ("Ele"). Focusout ()  //Specify trigger event});

Method Two: $ele. Focusout (Handler)

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusout (function () {    //this points to div element});

Method Three: $ele. Focusout ([EventData], handler)

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusout (11111,function (e) {    //this points to div element    //e.data  = > 11111 Pass Data});

Blur of jquery form events and focus events

In the previous sections 2.8 and 2.9 we learned the form handling event Focusin event with the Focusout event, as well as the event that handles the form focus and the blur and focus events

The essential difference between them:

Whether to support bubbling processing

To give a simple example

<div>  <input type= "text"/></div>

Where the INPUT element can trigger the focus () event

The div is the parent element of input, and it generates the Focusin () event when it contains an element input that triggers the focus event.

Focus () is produced in the element itself, and Focusin () is generated in the element containing the element

Blur and Focusout are also so

The Change event for jquery form events

The values of the <input> elements,<textarea> and <select> elements can be changed, and developers can listen to these changes through the Change event.

INPUT element

Listens for changes in value values and triggers a change event when there are changes. For radio buttons and check boxes, the event fires immediately when the user makes a selection with the mouse.

Select element

For the drop-down selection box, the event triggers immediately when the user makes a selection with the mouse

TEXTAREA elements

Multi-line text input box that triggers a change event when there are changes to the focus

The change event is simple, nothing more than notice the triggering behavior, you can see the right code reference

The Select event for the jquery form event

The Select event occurs when the text in the input element of the textarea or text type is selected.
This function invokes all functions that bind to the Select event, including the default behavior of the browser. You can prevent the default behavior of the browser from triggering by returning false in a bound function.

Select events can only be used with <input> elements and <textarea> elements

It's very easy to use:

Method one:. Select ()

Select event that triggers the element:

$ ("input"). Select ();

Method Two: $ele. Select (Handler (eventobject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<input id= "Test" value= "text selected" ></input>$ ("#test"). Select (function () {///Response text Check callback    //this point to INPUT Element});

Method Three: $ele. Select ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<input id= "Test" value= "text selected" ></input>$ ("#test"). Select (11111,function (e) {///Response text Check callback    //this point to div element    //e.data = 11111 Pass Data});

The Submit event for jquery form events

The submission form is one of the most common business requirements, such as user registration, where the input of some information is required to submit the form. Also sometimes developers need to filter some of the data when the form is submitted, do the necessary actions (for example: To verify the correctness of the form input, if the error is to prevent the submission, the new input) can now through the Submit event, listen to the submission of the form of this action

Very simple to use, consistent with basic event parameter handling

Method One: $ele. Submit ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). Submit (function () {    alert (' Trigger specified event ')}) $ ("#text"). Click (Function ( {     $ ("Ele"). Submit ()  //Specify trigger event});

Method Two: $ele. Submit (Handler (EventObject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<form id= "target" action= "destination.html" > <input type= "Submit" value= "Go"/></form>$ ("#target") . Submit (function () {//Bind submit form trigger    //this point to from element});

Method Three: $ele. Submit ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<form id= "target" action= "destination.html" > <input type= "Submit" value= "Go"/></form>$ ("#target") . Submit (11111,function (data) {//Bind submission form triggers    //data = 1111//Transmitted data});

By binding the Submit event on the <form> element, the developer can listen to the behavior of the user's submission form

Behavior that can trigger the submit event specifically:

• <input type= "Submit" >
• <input type= "image" >
• <button type= "Submit" >
• When certain form elements get focus, tap enter (enter)

All of these operations can intercept the submit event.

Special attention is needed here:

The form element is the behavior of the default submission form, and if it is handled by submit, the traditional way to disable the browser's default behavior is to invoke the event object  E.preventdefault () to handle it. In jquery, you can return false at the end of the function directly

jquery is handled as follows:

$ ("#target"). Submit (function (data) {    return false;//block default behavior, submit form});

KeyDown () and KeyUp () events for jquery keyboard events

The mouse has mousedown,mouseup and other events, which are based on the human gesture action decomposition of the 2 trigger behavior. The corresponding keyboard also has this kind of event, the user behavior decomposition into 2 actions, the keyboard press and let go, for such 2 kinds of action, jquery respectively provides corresponding KeyDown and KeyUp method to monitor

KeyDown event:

It is triggered when the user presses the letter key on the keyboard for the first time on an element. Very simple to use, consistent with basic event parameter handling, where use is not duplicated, list of methods used

Direct binding Event $elem.keydown (Handler (EventObject))//pass parameter $elem.keydown ([EventData], Handler (eventobject))//Manually trigger a bound event $ Elem.keydown ()

KeyUp event:

It is triggered when the user first let go of the key on the keyboard on an element. The use method is consistent with the KeyDown, but the trigger condition is the method.

Attention:

• KeyDown is triggered when the keyboard is pressed
• KeyUp is on the keyboard and it will trigger.
• Theoretically it can be bound to any element, but the Keydown/keyup event is only sent to the element with focus, in different browsers, the element that can get focus is slightly different, but the form element always gets the focus, so it is most appropriate for this event type form element.

jquery keyboard Event KeyPress () event

Binding the KeyDown event on the INPUT element will find a problem:

Each fetch is previously entered, and the current input is not obtained

KeyDown event trigger is not in the text box, if the text in the KeyDown event output text box, the text is triggered before the keyboard event, and the KeyUp event triggered when the entire keyboard event operation has been completed, obtained is triggered after the keyboard event text

When the browser captures the keyboard input, it also provides a keypress response, which is very similar to the KeyDown, please refer to the KeyDown section, specifically, the different points.

The main differences between KeyPress events and KeyDown and KeyUp

• Only single characters can be captured and key combinations cannot be captured
• Unable to respond to system function keys (e.g. delete,backspace)
• Numeric characters that do not differentiate between the keypad and the main keyboard

Word

KeyPress are primarily used to receive ANSI characters such as letters, numbers, and KeyDown and KeyUP event procedures can handle any keystroke that is not recognized by KeyPress. such as: function keys (F1-F12), edit keys, positioning keys, and any combination of these keys and keyboard shift keys.

Multi-event binding on ()

Previously learned mouse events, form events and keyboard events have a feature, is directly to the element binding a processing function, all such events are fast processing. Open source can actually be seen, all the shortcut events at the bottom of the processing is through an "on" method to achieve. The JQuery on () method is an officially recommended way to bind events.

Basic usage:. On (events, [selector], [data])

The most common way to bind a click event to an element is to compare the shortcut to the on method.

$ ("#elem"). Click (function () {})  //shortcut $ ("#elem"). On (' click ', Function () {})//on mode

The biggest difference is that on is a customizable event name, and of course not just how to keep looking down

Multiple events bound to the same function

$ ("#elem"). On ("MouseOver mouseout", function () {});

Separated by a space, passing different event names, you can bind multiple events at the same time

Multiple events bind different functions

$ ("#elem"). On ({    mouseover:function () {},      mouseout:function () {}});

Separated by a space, passing different event names, you can bind multiple events at the same time, each event executes its own callback method

Passing data to a handler

function greet (event) {  alert ("Hello" + event.data.name); Hello mu net}$ ("button"). On ("click", {  name: "Mu lesson Net"}, greet);

The second parameter (object) can be passed to the event handler when an event is triggered.

Advanced usage of On ()

For their own processing mechanism, there is not only an on method, but also based on the evolution of the live method (after 1.7 is removed), delegate method and so on. The underlying implementation of these methods is also the on method, which is derived from the mechanism of another event mechanism delegate using on.

Delegation mechanism

. On (events, [selector], [data], Handler (EventObject))

A selector selector is provided in the second argument to On, which simply describes the next

Refer to the following 3-layer structure

<div class= "Left" >    <p class= "Aaron" >        <a> Target node </a>//Click on this element    </p></ Div>

Give the following code:

$ ("div"). On ("click", "P", FN)

Events are bound to the topmost div element, and when the user fires on the A element, the event will bubble up and will always bubble on the div element. If a second argument is provided, the event will trigger an event callback function when it encounters a selector-matching element in the process of bubbling upwards.

Unload event Off () method

• Event handlers that are bound by the. On ()
• Remove the binding through the off () method

Depending on the characteristics of the on binding event, the off method can also remove the event handler specified on the element by passing the corresponding combination of event name, namespace, selector, or handler function. When there are multiple filter parameters, only event handlers that exactly match those parameters will be removed

Binding 2 Events

$ ("Elem"). On ("MouseDown MouseUp", FN)

Delete an event

$ ("Elem"). Off ("MouseDown")

Delete all Events

$ ("Elem"). Off ("MouseDown MouseUp")

Shortcut to delete all events, there is no need to pass the event name, all events bound by the node are destroyed

$ ("Elem"). Off ()

The role of jquery event objects

Event objects in events are easy for beginners to ignore, and most of the time beginners don't know how to use it, but sometimes it's very useful.

A standard "click" clicking Event

$ (Elem). On ("click", Function (event) {Event   //Event object})

There are differences in the acquisition of event objects between different browsers, and in the properties of event objects. jquery rules the event object according to the standards of the Web, so the event object obtained in the jquery event callback method is a standard cross-browser object that has been processed after compatibility.

This is not the use of the same method, through a small case, so as to understand the role of event objects

<ul> <li class= "Even1" ></li> <li class= "Even2" ></li> <li class= "Even2" ></l I> .........</ul>

UL has n sub-element Li (here only 3), if I want to respond to each Li event, then the general method is to give all Li is a separate event monitoring, so that the wording is logical, but also cumbersome

Because Li has a common parent element, and all events are consistent, here we can use a technique to deal with, and often say, "event delegation."

The event does not directly relate to the LI element, and the parent element is bound. Since the browser has this feature of event bubbling, we can bubble this event up to UL when the Li is triggered, because the UL bound event responds so it can trigger this action. The only problem is how to know which Li element is triggered?

This brings up the event object.

Event objects are objects that are used to record information about events that occur. Event objects are only generated when an event occurs, and can only be accessed internally by the event handler, and the event object is destroyed after all event handler functions have finished running

Back to the question above, since the event object is closely related to the current triggering element, we can find the Event.target from the event object from the relevant information inside.

Event.target

The target property can be an element when registering an event, or its child elements. Typically used to compare event.target and this to determine whether an event was triggered by bubbling. Handling event delegates often for event bubbling

To put it simply: Event.target represents the element that is currently triggering the event, and can be judged by a series of attributes of the current element object that is not the element we want

Properties and methods for jquery event objects

The event object belongs to the method there are many, but we often use only a few, here I mainly say the role and difference

Event.type: Gets the type of event

Event type of the triggering element

$ ("a"). Click (Function (event) {  alert (event.type);//"click" Event});

Event.pagex and Event.pagey: Gets the current coordinates of the mouse relative to the page

With these 2 properties, you can determine the coordinate value of the element in the current page, the position of the mouse relative to the left edge of the document (the left) and the (top) distance, simply from the upper-left corner of the page, which is the page as a reference point, not as the slider moves with the change

Event.preventdefault () Method: block default behavior

This is very much used, after executing this method, if you click on a link (a tag), the browser will not jump to the new URL. We can use event.isdefaultprevented () to determine if the method (on that event object) has been called.

Event.stoppropagation () Method: Block Event bubbling

Events can be bubbling to prevent events from bubbling to the DOM tree, that is, event handlers on any predecessor element that does not fire

Event.which: Gets which key of the mouse is clicked when the mouse is clicked

Event.which standardized Event.keycode and Event.charcode. Event.which also will normalize the button press (MouseDown and Mouseupevents), left-click Report 1, Middle key report 2, right-click Report 3

Event.currenttarget: The current DOM element in the event bubbling process

The DOM object of the current triggering event before bubbling, equivalent to this.

The difference between this and event.target:

JS event is bubbling, so this is changeable, but event.target will not change, it is always directly accept the event of the target DOM element;

. This and event.target are DOM objects

If you want to use the methods in Jquey, you can convert them to jquery objects. such as the use of this and $ (this), the use of Event.target and $ (event.target);

jquery Custom Event Trigger Event

It is well known that events of this type, such as MouseDown, click, KeyDown, and so on, are provided by the browser and are popularly called native events, and this type of event is required to have interactive behavior to be triggered.

Bind a native event in jquery by the on method

$ (' #elem '). On (' click ', Function () {    alert ("Trigger System Event")});

Alert needs to be executed: a user must click on it. If a different user interaction can trigger the event automatically at some point? Normally it is not possible, but jquery solves this problem by providing a trigger method to trigger browser events

So we can do this:

$ (' #elem '). Trigger (' click ');

On the binding on the event element, through the trigger method can be called to alert, very simple!

Take a look. What is trigger?

In simple terms, all handlers and behaviors are executed based on the given event type bound to the matching element.

Trigger, in addition to being able to trigger browser events, also supports custom events, and custom time also supports passing parameters

$ (' #elem '). On (' Aaron ', function (EVENT,ARG1,ARG2) {alert ("Touch Custom Time")}), $ (' #elem '). Trigger (' Aaron ', [' Parameter 1 ', ' parameter 2 '])

Trigger trigger browser Events to differ from custom events?

• Custom Event object, which is a native implementation of the jquery simulation
• Custom events can pass parameters

jquery Custom Event Triggerhandler Event

The trigger event also features a feature that bubbles on the DOM tree, so if you want to block bubbling you need to return false in the event handler or call the. Stoppropagation () method in the event object to stop the event bubbling

The trigger event is capable of triggering native and custom, but there is an unavoidable problem: Event object events cannot be implemented perfectly, after all, one is a browser, and one is its own simulation. Although. Trigger () Simulates the event object, it does not perfectly replicate events that occur naturally, to trigger event handlers that are bound by jQuery, without triggering native events, using. Triggerhandler () instead

The use of Triggerhandler and trigger is the same, focusing on the difference:

• Triggerhandler does not trigger the default behavior of the browser, the. Triggerhandler ("submit") will not invoke the. Submit () on the form.
• . Trigger () affects all elements that match the JQuery object, whereas. Triggerhandler () affects only the first matched element
• Events that are triggered by using. Triggerhandler () do not bubble up in the DOM tree. If they are not triggered directly by the target element, then it will not do any processing
• In contrast to the normal method of returning a JQuery object (so that you can use chained usage),. Triggerhandler () returns the return value of the last processed event. If no events are triggered, the undefined is returned

"Summarize and Organize" jquery Basic Learning---Events