Today, I did some Javascript exercise.
In the first exercise, I moved some object to see the Javascript events.
Here is the picture description.
To change the posistion of mustache and eye, we are gonna put some events in Javascript code.
Here is my code!
In Javascript code, we get the id element, and store it in const l and const m.
const l is about the mustache. const m is about the eyes.
By adding event and funtion with addEventListener(), we can move the position of object. I set the position as absolute this time to move on the pumpkin image.
Here is another exmple about the event handling with Nodelist arrarys.
If we push the button "Add to Cart", we are gonna show this message. The point is that each button show the same message.
In my code, we can see there are three button elements in our HTML code. I store them using querySelectorAll() function. Now, we can put the event with for loop and addEventListener().
In the for loop, we run the loop up to the length of mybutton variables.
To ensure your DOM manipulation code after the page is loaded use one of the following two different page load events.
window.addEventListener("load", YourScriptFunctionName);
Using this line of code and place your DOM coding in a function, your DOM coding can now appear anywhere, including within the <head> element, which is the conventional place to add in your Javascript code.
Now, I want to talk about the Event Object.
- When an event is triggered, the browser will construct an event object that contains information about the event.
- Your event handlers can access this event object simply by including it as an argument to the callback function (by convention, this event object parameter is often named e or event).
Next time, I'm gonna more talk about the event object example for this case!
'Web Programming π > Front-End π¦Έπ»ββοΈ' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| Javascript Event Exercise to Move Picture (0) | 2023.04.15 |
|---|---|
| Javascript Event Object, Apr/10/2023 (0) | 2023.04.11 |
| Javascript Event Handling, Apr/5/2023 (0) | 2023.04.06 |
| Position of Elements, DOM family in Javascript, Apr/5/2023 (0) | 2023.04.06 |
| Modify DOM in Javascript, Apr/4/2023 (0) | 2023.04.05 |
