1. JavaScript and Events

2. Agenda Introduction Event Propagation Handling of Events in HTML5:
Direct Handling.
Add Event Listener.
Task

3. Introduction JavaScript handles events originating in HTML elements.
Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about what happened.
Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
List of standard (official) events available in HTML5:

4. Event Propagation
There are two types of event order: event capturing and event bubbling:
Event capturing starts with the outer most element in the DOM and works inwards to the HTML element the event took place on and then out again.
Event bubbling works in exactly the opposite manner: it begins by checking the target of the event for any attached event handlers, then bubbles up through each respective parent element until it reaches the HTML element.

5. Handling of Events in HTML5
Can happen by Two ways:
Direct Handling.
Adding Event Listener.

6. Direct Handling

8. Add Event Listener
The first parameter of the addEventListener method is the name of the event (without the “on” prefix).
The second parameter is a reference to the function we want to call when the event occurs.
The third parameter is Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase. Possible values:
true - The event handler is executed in the capturing phase.
false- Default. The event handler is executed in the bubbling phase

9. Add Event Listener

11. Task 1
If you click a square on the table: the color in the square are changed randomly using two ways:
Direct handling.
Add Event listener.

14. Second Round
MouseEvent

15. Agenda Introduction jQuery Syntax For Mouse Event Methods
Commonly Used jQuery Mouse Event Methods
Task2
Bonus activity

16. MouseEvent
The DOM MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
Common events using this interface include click, dblclick, mouseup, mousedown.

17. jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:

18. Commonly Used jQuery MouseEvent Methods
Commonly Used jQuery Event Methods
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
on()

19. Click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:

20. dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:

21. mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
مش شرط اعمل
Click

23. mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:

24. مش شرط
click

25. mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:

27. mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:

29. hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

31.  on() Method
The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:

34. Back to Candy Crush
Index.html

35. Task 2 If you click a square on the table:
the color in the square vanishes.
the colors above it in the same column are shifted down to fill its place
a new color gets inserted on the top cell of the column

36. Test 1

39. Do not forget to gave id to td

40. Other Solution

41. Do not forget to gave id to table

42. Bonus activity
if after removing the color, there are 3 squares with the same color they should be removed