make an Interactive Website 4 Event

Events

User interactions with a web page are called events.

For example, when you click the Like button to the right, the browser announces that a click event has occurred.

Event Handlers
We can write a function that specifies what to do when an event occurs. This function is called anevent handler.

When a user clicks the .like-button element, the event handler toggles the "active" class. This alternates the button between the normal gray view and the selected blue view.

.click()

In the page to the right, click the three share buttons at the top of the page.

One common user event is the click event. A click event occurs when a user clicks on an HTML element.

The .click() method attaches an event handler to an HTML element so that it can respond to a click event.

$('.social li') selects each share button at the top of the web page.

The .click() method attaches an event handler to each button.

The event handler adds the CSS class .active, which changes the button's background-color to red. We use $(this) to refer to the HTML element that was clicked on. We can now operate on this element using .toggleClass().

Putting it all together, when you click on a share button at the top of the page, a click event is triggered by the browser.

When the click event occurs, the .click() method runs the event handler. In this code, the event handler changes the button color to red.

.keypress()

In the page to the right, click inside the page, and then press any letter or number key.

Another common user event is the keypress event. A keypress event occurs when a user types a key on the keyboard.

The .keypress() method attaches an event handler to an HTML element so that it can respond to a keypress event.

$(document) selects the whole web page.The .keypress() method attaches an event handler to document

When any keyboard key is pressed, the event handler toggles the dropdown menu.

Putting it all together, when you press any keyboard key, a keypress event is triggered by the browser.

When the keypress event occurs, the .keypress()method runs the event handler.

Here, the event handler toggles the dropdown menu. Putting it all together, when you press any keyboard key, a keypress event is triggered by the browser.

When the keypress event occurs, the .keypress()method runs the event handler.

Here, the event handler toggles the dropdown menu.

event

In the page to the right, click inside the page, and then press the m key.

Triggering a keypress event handler when any key is typed isn't particularly useful. For more control, we can use the event object.

The event object contains more information about an event, such as which mouse button was clicked or which key was pressed.

$(document) selects the whole web page, and the.keypress() method attaches an event handler todocument.The event handler takes event as a parameter. event.which contains which key was pressed. Keyboard keys are identified by key codes. The m key is identified by the key code 109.