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!")
  })
});

Team members: Ameen, Ali Majid, Hevar, Mhamad Othman, Aland.

1- When ever the button is clicked it's print "Printing a Message!"
2- When ever you hover on the button it will print "Printing a Message!"
3- it will not print anything in the console
4- Whenever you hover on the button it will print the messege in the console, so the event listener waited for the button to be loaded
5- "addListenerEvent" is not a function so this will accure an error.

Room 4,
hala,huda,darya,noor

example1
1-declaration, listing to button click and trigering function,printing the message on the console
2-on clicking the button,user will see a message on the consle
3-javascript listen to the event on clicking
example2
1-declaration, listing to button click and trigering function,printing the message on the console
2-onhovering the button,user will see a message on the consle
3- we can learn mouse over event listening.
example 3
1-declaration, listing to button click and trigering function,printing the message on the console
2-onhovering the button,user will see a message on the consle
3-javascript is only worked when the html is loaded
example 4
same as before
The DOMContentLoaded event fires when the HTML document has been completely parsed,
example5
same as before but with the wrong id
addListenerEvent should be .addEventListener.

room 9
members: mahnaz, noor, rozhyar, amal
example 1:
when we click on the button the message will print on the console.
example 2:
when we hover the mouse on the button the message will be printed.
example 3:
nothing will be printed on the console
example 4:
when we hover the mouse on the button the message will be printed,
example 5:
there is no such addlistenerEvent in the document, the error appear "Uncaught TypeError: document.addListenerEvent is not a function".

Names: Mohammed Diary, Hani Al-Khaffaf, Ali Ibrahim, Zeynab Hamad, Danah Osta

Example 1
1&2- we create a new variable called the button and we save the button ID selector inside it, we create an event listener that listens to the click and prints "Printing a Message!" whenever we click the button.
3- Javascript is very intuitive.

Example 2
1&2- we create a new variable called the button and we save the button ID selector inside it, we create an event listener that listens to the hovering of the mouse and prints "Printing a Message!" whenever we hover over the button.
3- Javascript is easy to understand.

Example 3
1&2- None of the code will work, because the script gets loaded before the HTML and it will not find anything.
3- Organising the code is important.

Example 4
1&2 - This one is the same as the third example. In line 1 we have an event listener that waits for the content to be loaded before executing the script file. the rest is the same.
3- javascript is fun (Hani, Mohammed).

Example 5
1&2- None of the code will work because of addListnerEvent and the wrong id. (Mahnaz Nazir Thanks)
3- We have to pay attention to small details.

Room 5 :- Mustafa .M ,Maria .D ,Melis ,Ahmed hasson ,Sakar
1-the js accessed to element has ID ='notify' ,when we click on the button the console printing a message.
2-its the same as the first example except of the console print a message when the mose is over the button.
3- it's the same as an example two except the JS will be loaded before DOM .
4-we used DOMContentLoaded so the function only runs after the DOM has been loaded.
5- there are some mistakes:- first, the addEventListener wasn't written in the correct order, also notifliable should be notifiable .

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