events-discussion.md

Discussion Questions: Events

Objectives

• Recall the different types of JavaScript Events
• Identify when the DOMContentLoaded event will trigger
• Implement a callback attached to an event handler

Exercise

Take a look at each of the code samples below. For each sample, work with your group to answer the following questions.

1. What does each line of code do?
2. How does this piece of code work?
3. Given this code sample, what can you learn or describe about JavaScript

Example 1

// index.html
...

<button id="notify">Click Me!</button>

<script src="index.js" />

// index.js

const button = document.getElementById("notify")
button.addEventListener('click', function(){
  console.log("Printing a Message!")
})

Example 2

// index.html
...

<button id="notify">Click Me!</button>

<script src="index.js" />

// index.js

const button = document.getElementById("notify")
button.addEventListener('mouseover', function(){
  console.log("Printing a Message!")
})

Example 3

// index.html
...
<script src="index.js" />

<button id="notify">Click Me!</button>

// index.js

const button = document.getElementById("notify")
button.addEventListener('mouseover', function(){
  console.log("Printing a Message!")
})

Example 4

// index.html
...
<script src="index.js" />

<button id="notify">Click Me!</button>

// index.js
document.addEventListener("DOMContentLoaded", function(){
  const button = document.getElementById("notify")
  button.addEventListener('mouseover', function(){
    console.log("Printing a Message!")
  })
});

Example 5

Oops. Looks like this developer made some mistakes typing. Identify the mistakes.

// index.html
...
<script src="index.js" />

<button id="notifiable">Click Me!</button>

// index.js
document.addListenerEvent("DOMContentLoaded", function(){
  const button = document.getElementById("notifliable")
  button.addListenerEvent('click', function(){
    console.log("Printing a Message!")
  })
});

Maryam Salah, Mhamad Marshall, Wafa'a Al-Hayek, Yousif Ismail

example 1:
1- the first the line print the button with the id notify
2- we have a button with the id of notify and we have script that target the button with id of notify , then we assign it a variable called button, then we add an event listener to variable with the function that each time you click the button it print in the console("printing a message");
3-with js we can add behavior to the HTML tags.

Example 2:
1- the first the line print the button with the id notify
2- we have a button with the id of notify and we have a script that targets the button with id of notify , then we assign it a variable called button, then we add an event listener to variable with the function that each time you hover the button it print in the console("printing a message");
3-with js we can add behavior to the HTML tags.

Example 3:
1-by writing js script above the HTML tag, there is a possibility that might not work.
2- This script would work if we add it below the HTML tag.
3-by doing this the hover effect would work.

Example 4:
1- It is the same as the example above except when the content is loaded it will go directly to the function.

Example 5:
1- It's addEventListener not addListenerEvent, ( notifliable) is not correct with the spelling of the original id of the button.

team room 8: Banel Mikhael , Abdullbari Qaisar , Sara Bakr

Example1:
1-the first line is we have a button that assigned to an element in the HTML document by the Id of notify, and at the second line of code we add a eventlistener to print some instructions with a click and then print the
message by console.log.
2-when you click the button and then eventlistener will prrint the message.
3-interacting with buttons when the buttons are clicked .

Example2:
1-the first line is we have a button that assigned to an element in the HTML document by the Id of notify, and at the second line of code we add a eventlistener to print some instructions with hovering the mouse over the button.
2-when you hover over the button and then eventlistener will prrint the message.
3-interacting with buttons when the buttons are hovered on.

Example3:
the difference between example2 and example3 is that example 2 the html will run first then the javascript and in example 3 javascript will run first and then the html.

example4:
in example 4 the difference is that we added a new addListnerEvent DOMContentLoaded and the dom content loaded run the code when html is loaded and the DOM tree is ready and built and then run the code without paying attention to the CSS load or img Load etc..

Example5 :
the mistake is the addEventListner thats why the code will not run.

Zoriana - Nanor - Omar -Yahia - Batoul
1 example)
1.1 Creates a button
1.2. When we click on the button we get a message.
2 example)
When we mouse over the button we get a message.
3 example)
We link this Js file in the head of the html file
When we mouse over the button we get a message.
4 example)
The button will be loaded before stylesheets, images, and subframes.
5 example)
ID of the button in the method .getElementById is misspelled. It is written "notifliable" instead of "notifiable".
addListenerEvent should be addEventListener instead

Team [Baraa Mohsin, nma shawket, shahla kamel, Adeeb khoja, Dalia Jaber]

1. User interface events, focus and blur events ,Muse Event, Keyboard events, form events, mutation events observers, html events, css events
2. it's fired as soon as the page DOM h

Team [Baraa Mohsin, nma shawket, shahla kamel, Adeeb khoja, Dalia Jaber]
Team [Baraa Mohsin, nma shawket, shahla kamel, Adeeb khoja, Dalia Jaber]

exercise 1:
1-we have button inside the html in the first line, then we have script tag in the second line.
2-when clicking on a button, the event handler in the function will be executed and print the message on the console.
3-what we learned: we can connect JavaScript to html and control how the html behaves when clicking on an element inside it.

exercise 2:
1-we have button inside the html in the first line, then we have script tag in the second line.
2-when mouse is over on a button, the event handler in the function will be executed and print the message on the console.
3-what we learned: we can connect JavaScript to html and control how the html behaves by using a mouse is over an element .

exercise 3:
1- sync to JavaScript file in the first line , the second line, we have a button
2-when mouse is over on a button, the event handler in the function will be executed and print the message on the console.
3-what we learned: we can connect JavaScript to html and control how the html behaves by using a mouse is over an element .

exercise 4:
1- sync to JavaScript file in the first line , the second line, we have a button,
2- after the whole dom content is loaded , the function will work and the event handler in the function will be executed and print the message on the console. Because we have DomcontentLoaded and nested function here.
3- we can control when to execute the function, to make sure that all dom contents are loaded

exercise 5:
same as 4 but we have click function instead of mouseoverline , the second line, we have a button
Team [Baraa Mohsin, nma shawket, shahla kamel, Adeeb khoja, Dalia Jaber]

1. User interface events, focus and blur events ,Muse Event, Keyboard events, form events, mutation events observers, html events, css events
2. it's fired as soon as the page DOM h

Team [Baraa Mohsin, nma shawket, shahla kamel, Adeeb khoja, Dalia Jaber]
Team [Baraa Mohsin, nma shawket, shahla kamel, Adeeb khoja, Dalia Jaber]

exercise 1:
1-we have button inside the html in the first line, then we have script tag in the second line.
2-when clicking on a button, the event handler in the function will be executed and print the message on the console.
3-what we learned: we can connect JavaScript to html and control how the html behaves when clicking on an element inside it.

exercise 2:
1-we have button inside the html in the first line, then we have script tag in the second line.
2-when mouse is over on a button, the event handler in the function will be executed and print the message on the console.
3-what we learned: we can connect JavaScript to html and control how the html behaves by using a mouse is over an element .

exercise 3:
1- sync to JavaScript file in the first line , the second line, we have a button
2-when mouse is over on a button, the event handler in the function will be executed and print the message on the console.
3-what we learned: we can connect JavaScript to html and control how the html behaves by using a mouse is over an element .

exercise 4:
1- sync to JavaScript file in the first line , the second line, we have a button,
2- after the whole dom content is loaded , the function will work and the event handler in the function will be executed and print the message on the console. Because we have DomcontentLoaded and nested function here.
3- we can control when to execute the function, to make sure that all dom contents are loaded

exercise 5:
same as 4 but we have click function instead of mouseoverline , the second line, we have a button

Hoda - Fadi - Rokaya - Ruba - Nina

Example 1

• line 1 is to create a button that has text of Click me and an Id of notify.
• line 2 calling the javascript file using the script tag to html.
• Created a constant and retrieved the element by Id
• When clicking the button, the console prints "Printing a Message!".
  - We learnt addEventListener, its when an event happens, the javascript interacts and does something.

Example 2

• Same as above but when hovering over the button, the console prints "Printing a Message!".
  - When learned that it works on hover as well.

Example 3

• The script tag was moved to the top so errors will occur so the rest will not work.

Example 4

• the DOMcontentload doesn't wait for the stylesheets to load, but it waits for the html to completely load, when the page loads it directly calls the function.

Example 5

• there's a typo in the element "notifliable" should be "notifiable"
• there's a typo in addListenerEvent it should be addEventListener