Scribd
Upload
2 views32 pages

Module 7 - HTML Events (1)

This document outlines various HTML event attributes and their intended learning outcomes, focusing on enhancing web interactivity and user experience. It details specific events such as onbeforeunload, onblur, and onclick, explaining their purpose and behavior in relation to user actions. Additionally, it emphasizes the application of event-driven programming principles in web development projects.

Uploaded by

jenty1006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views32 pages

Module 7 - HTML Events (1)

This document outlines various HTML event attributes and their intended learning outcomes, focusing on enhancing web interactivity and user experience. It details specific events such as onbeforeunload, onblur, and onclick, explaining their purpose and behavior in relation to user actions. Additionally, it emphasizes the application of event-driven programming principles in web development projects.

Uploaded by

jenty1006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Web Systems and Technologies

HTML
EVENTS
Prepared by:
John Ivan C. Maurat, MIT

1
Intended Learning Outcomes:
• Identify various HTML event attributes such as onblur, onclick, onchange, onsubmit, and more.

• Describe the purpose and behavior of each HTML event and how it interacts with user actions.

• Implement HTML events within web pages to enhance interactivity and user experience.

• Apply event-driven programming principles in basic web development projects.

• Differentiate between event types and determine appropriate use cases for each.

2
onbeforeunload Event
• The onbeforeunload event occurs when a document is about to be unloaded.

• This event allows you to display a message in a confirmation dialog box to inform the user whether
he/she wants to stay or leave the current page.

• The default message that appears in the confirmation box, is different in different browsers. However,
the standard message is something like "Are you sure you want to leave this page?".

• This message cannot be removed, unless you call preventDefault() on the event.

3
onbeforeunload Event

4
onblur Event
• The onblur event occurs when an HTML element loses focus.

• The onblur event is often used on input fields.

• The onblur event is often used with form validation (when the user leaves a form field).

5
onblur Event

6
onfocus Event

7
oncanplay Event

8
onchange Event

9
onclick Event

10
oncopy Event

11
oncut Event

12
ondblclick Event

13
ondrag Event

14
ondragend Event

15
oninput Event

16
oninvalid Event

17
onkeypress Event

18
onload Event

19
onloadeddata Event

20
onmessage Event

21
onmousedown Event

22
onmouseenter Event

23
onmousemove Event

24
onratechange Event

25
onsubmit Event

26
onselect Event

27
onreset Event

28
onreset Event

29
ontoggle Event

30
onvolumechange Event

31
END

32

You might also like