Automatically translated.View original post

Dom events/ javascript

# Web Site Writing Basics

# javascript

# Dom_ events

DOM Event or Event is the signal or notification that the browser sends out when certain events occur on the page. In other words, Event is the key to making a still HTML web page become an interactive web application with the user. 💡 The relationship between DOM and EventDOM (Document Object Model): It's like the structure or map of the entire web page, which consists of various Element (e.g. buttons, text, images) Event (Event): is what happens with those Element or Occurring in the Event browser, JavaScript can "eavesdrop" on these actions and "respond" with the code we set 🔔. Examples of common DOM Events Event can occur from both the actions of the user (User Action) and from the browser itself (Browser Action): groups of EventEvents (example) Meaning Mouse Eventsclick the user clicks the mouse on Elementmouseover, the user slides the mouse into the Elementdblclick, the double click the keyboard mouse Eventskeydown, the keyboard button presses, the keyup, the keyboard button releases, the keyboard forms, the Eventssubmits the user submits the form (Form), the value in the Input field, the Select Textaument / Document, the WindowPages. Element (e.g. picture) Load is complete scroll user scroll screen up or down 🔗. The method of using Event in JavaScript to use Event must be "tied" (Attach) function (also known as Event Handler) to the Element that needs eavesdropping. By the way, the most recommended method is to use addEventListener (): JavaScript / 1. Select the desired Element.

const myButton = document.getElementById ('myBtn');

/ / 2.Use addEventListener to "eavesdrop" Event

myButton.AddEventListener ('click', function () {

/ / 3.This function will be executed when the Event 'click' occurs.

alert ('You've clicked the button!');

});

When the user clicks the myBtn ID button, the alert () function will run immediately. In other words, DOM Event is where JavaScript comes to "live" and allows your web page to interact with the user.

2025/11/2 Edited to

... Read moreนอกจากการใช้งาน DOM Events ขั้นพื้นฐานแล้ว การเข้าใจความแตกต่างระหว่าง event types เช่น keydown กับ keyup ก็สำคัญไม่แพ้กัน เช่น ปุ่มคีย์บอร์ดเมื่อกดลง keydown จะถูกเรียกใช้ทันที ส่วน keyup จะถูกเรียกใช้ตอนปล่อยปุ่ม ทำให้เราสามารถควบคุมพฤติกรรมของผู้ใช้ได้ละเอียดขึ้น ในบางกรณี การใช้ addEventListener ยังช่วยให้เราสามารถเพิ่ม event handler หลายๆ ตัวลงใน element เดียวกันโดยไม่ทับซ้อนกัน ต่างจากการใช้ inline event หรือการกำหนดแบบเก่า นอกจากนี้ การเข้าใจกลไก Event Bubbling และ Capturing ใน DOM จะช่วยให้จัดการ event ได้มีประสิทธิภาพมากขึ้น เช่น การเลือกจับ event ที่ element ต้นทางหรือทะยานขึ้นไปยัง ancestor สำหรับผู้ที่อาจเจอปัญหา 500 internal server error apache ตอนทดสอบ JavaScript บนเว็บเซิร์ฟเวอร์ แนะนำตรวจสอบองค์ประกอบฝั่งเซิร์ฟเวอร์และการตั้งค่าการรับส่งข้อมูลพร้อม รวมถึงสิทธิ์ในการเข้าถึงไฟล์ด้วย สุดท้าย อย่าลืมทดสอบการใช้งาน event ในหลากหลายเบราว์เซอร์และอุปกรณ์เพื่อให้แน่ใจว่าเว็บแอปของคุณมีความเสถียรและประสบการณ์การใช้งานที่ดีทั้งบนเดสก์ท็อปและมือถือ

Related posts

How I’d Learn JavaScript If I Were Starting Again
#javascript #coding #programming #tech #codingforbeginners
Aysha

Aysha

124 likes

Someone built the frontend review system that paid audit tools have been faking, and it's completely free. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

A pink mechanical keyboard with glowing keys and colorful string lights, overlaid with text that reads "LEARN SOFTWARE DEV FOR FREE 6 RESOURCES," indicating a guide to free software development learning.
A guide titled "1. LEARN THE INTERNET" for beginners, listing key concepts like HTTPS and DNS. It recommends "Front End Masters - Sections 1-4" and shows the cover of "The Front End Developer/Engineer Handbook 2024."
A guide titled "2. LEARN HTML/CSS" for beginners, highlighting key concepts like web page structure and CSS Flexbox. It recommends "FreeCodeCamp - Responsive Web Design Course" and displays a screenshot of the course page.
Study to be a Frontend Dev - Roadmap (100% Free)
This is a study guide for becoming a Front End Developer! All resources mentioned are FREE. Don’t pay anyone for this info! Why am I not recommending a zero to job course? Two Reasons 1-There is no course that will teach you everything 2-You need to put in some sweat equity, only wat
Study Seal

Study Seal

686 likes

A woman, Anjali Viramgama, stands in a festive, well-lit indoor garden. The image is titled 'Web development Roadmap for Beginners' with her name and social media handle.
A scroll-like paper details steps 1 and 2 of a web development roadmap: 'Understand the Basics' (HTML) and 'Dive into JavaScript'. Footprints illustrate a path on the paper.
A scroll-like paper outlines steps 3, 4, and 5 of a web development roadmap: 'Version Control' (Git/GitHub), 'Responsive Web Design' (CSS Frameworks), and 'Front-End Development'. Footprints mark a path.
Web development roadmap for beginners
Here's a step-by-step web development roadmap for beginners: 1. Understand the Basics: - HTML (Hypertext Markup Language): Start with learning HTML, the backbone of web development. Understand how to create the structure and content of web pages. - CSS (Cascading Style Sheets): Learn CSS
anjali.gama

anjali.gama

44 likes

The cover image features an illustration of a person using a laptop with a code editor window, introducing the topic: 'Top 5 Beginner-Friendly Programming Languages for Career Switchers.'
This image presents an illustration of people interacting with a large monitor displaying code symbols, alongside text encouraging career switchers to choose a beginner-friendly programming language for tech.
This slide details HTML & CSS, showing a structural diagram of a webpage and its styled result. It explains why to learn them, highlighting their role in web design and suitability for creative minds.
Top 5 Programming Languages for Career Switchers
#codingforbeginners #learntocode #careerswitch #python #htmlcssjavascript
Aysha

Aysha

29 likes

Roadmap to Becoming a Frontend Developer
Want to break into frontend development but don’t know where to start? 🤔 This step-by-step roadmap will guide you from beginner to job-ready frontend developer! #codingforbeginners #htmlcssforbeginners #programming #studymotivations #softwareengineer
Aysha

Aysha

52 likes

A man with tattoos and a cap sits at a desk, coding on a large monitor in a dimly lit room. Text overlays read 'SWIPE', 'Learning JavaScript?', and 'This is for YOU!', with a thinking emoji, promoting coding education.
A man with headphones and a cap codes at a desk with a large monitor displaying code. Text overlays read 'SWIPE', 'Break vs Continue', and 'In JS loops', with a thinking emoji, highlighting JavaScript loop concepts.
A man with headphones and a cap sits at a desk, coding on a large monitor in a bright room. Text overlays read 'Let's Discuss!' with a thinking emoji, inviting interaction about coding topics.
Coding W/ JavaScript?
As a software engineer w/ ADHD, understanding the difference between certain syntax keywords is critical, such as ‘continue’ and ‘break’ within JavaScript loops.💡 It’s almost like centering a <div> — it takes practice to feel confident in your abilities. 🛠️ When my mind gets stuck in a
Michael Burbank

Michael Burbank

13 likes

Confused About Where to Start in Web Dev?
#webdevelopment #learncoding #frontenddeveloper #softwareengineer #roadmaptowebdev
Aysha

Aysha

7 likes

It may or may not depend on your effort.🫡
It sounds contradictory but everyone has their perfect time to learn new frameworks, so do not despair and do it without fear but with patience 😎 #lemon8diarychallenge #webdevelopment #programmer
Feibertord ⚡️

Feibertord ⚡️

15 likes

My Programming Interest Just Skyrocketed! 🚀
I just discovered something that has made my interest in programming explode to 1000000000000000%! 🤯 🎮 Learning Programming is Like a Game Adventure! From Python, Java, JavaScript, to HTML, there are all kinds of programming languages available, along with systematic topic courses. The learning p
Valder

Valder

2175 likes

Day 2 introduces JavaScript variables, depicted as a box storing `let name = "Aysha";`. The image encourages learning to store and manage data like a pro, setting the stage for understanding variables in programming.
This image defines a variable as a box holding information. It visually represents `name = "Aysha";` with "name" as the variable name on the box and "Aysha" as the value inside, illustrating the concept clearly.
Explaining why variables are used, this image shows `userName`, `city`, and `age` variables storing data like "Aysha", "New York", and 26. It highlights their role in reusing data within code.
What Are Variables in JavaScript
In JavaScript, variables are like boxes that store information such as a user’s name, city, or age. We use them to make our code flexible and reusable. #CodeWithAysha #JavaScriptForBeginners #LearnJavaScript
Aysha

Aysha

3 likes

Codes i’ve created for mine cymatics experiment 🫶
odes i’ve created for mine cymatics experiment
Evony Nard

Evony Nard

1 like

The image displays the title 'BACKEND DEVELOPMENT ROADMAP: EVERYTHING YOU NEED TO LEARN!' with a subtitle 'Master the skills to power the web!' over a background of a person looking at a computer screen with code.
This image defines backend development, explaining it handles data, logic, and server-side processing, manages databases and APIs, and works with the frontend. An illustration of a laptop with code and gear icons represents backend functions.
The image lists backend programming languages like JavaScript (Node.js), Python (Django, Flask), Java (Spring Boot), C# (.NET), and Ruby (Ruby on Rails), with their respective logos, advising to focus on one.
Backend Development Roadmap
Want to become a Backend Developer but don’t know where to start? 🤔 This step-by-step roadmap will guide you through the essential skills needed to build powerful, scalable web applications! #codingforbeginners #backenddeveloper #htmlcssforbeginners #studymotivations #javascript
Aysha

Aysha

24 likes

Learn Coding the Easy Way!
#LearnToCode #CodingTutorials #ProgrammingForBeginners #TechEducation #CodeWithMe
InsightEvolution

InsightEvolution

2 likes

A desk setup featuring a Dell monitor, a white CHERRY keyboard, and a pink mouse, with the text overlay "easy coding projects for beginners" and a "LEARN MORE" button.
A white note card listing "Easy coding projects for beginners" including a to-do list app, personalized calculator, weather app, and simple quiz game, with descriptions for each.
An outdoor scene with a wide road lined by palm trees and buildings under a clear blue sky, with the text overlay "Comment 💻 if you'll try these projects!"
Easy Coding Projects!!
If you want to learn how to code then these are the perfect beginner projects! Here are some fun and easy projects to build your skills: To-Do List App: Create a simple app where you can add, edit, and delete tasks—perfect for practicing JavaScript or Python. ✅ Personalized Calculator: Build a
CompSkyy

CompSkyy

172 likes

Learning React : Programming
Group project and honestly the guys have been doing the hard work lol . They’ve been encouraging towards my contributions. It’s always great learning with others that are already in the field and more versed in a programming language . Have you ever had to work with people that were more advanced ?
Mother

Mother

9 likes

The image is a title slide for a guide on common HTML mistakes and their fixes. It features an illustration of a person coding on a laptop, surrounded by code snippets and language labels like HTML, CSS, and C++. The text encourages avoiding errors to write clean HTML.
This slide addresses the mistake of forgetting the `<!DOCTYPE html>` declaration. It shows incorrect HTML code without it and the correct version including it, explaining that the doctype ensures proper browser rendering.
The slide highlights the error of not using semantic HTML. It contrasts using generic `<div>` tags for everything with the correct approach of using semantic tags like `<header>` and `<section>`, emphasizing improved SEO and accessibility.
Common HTML Mistakes Beginners Make and How to Fix
#learntocode #studymotivation #success #html #webdevelopment
Aysha

Aysha

22 likes

JavaScript Cheat Sheet
Essential JavaScript commands every developer needs! 🚀 Variables, functions, loops, arrays & DOM manipulation all in one quick reference guide. Perfect for coding interviews or daily development. Save this for later! 💾 #JavaScript #WebDev #Programming #Coding #Developer #JS #CodeTips
EM

EM

2 likes

A young woman works on a MacBook laptop, with the text 'free coding bootcamps' overlaid. The image is from Lemon8, featuring the user @hannahshirley.
A MacBook displays the freeCodeCamp website, showing 'Learn to code - for free' and mentioning jobs at Google, Microsoft, Spotify, and Amazon. The site offers certifications.
A MacBook displays The Odin Project website, featuring 'Your Career in Web Development Starts Here' and highlighting its free full-stack curriculum supported by an open-source community.
Learn how to code with these FREE Bootcamps! 👩🏻‍💻
I’ve worked in EdTech for a majority of my career and one of the top skills I see people wanting to learn is coding. Not only do I see students taking this interest, but also people well established in their careers who may want to learn coding for purposes of switching industries or even building
hannah 💟

hannah 💟

455 likes

How to Learn Coding Fast Even as a Beginner
#codingforbeginners #programming #studymotivations #webdevelopment #learntocode
Aysha

Aysha

801 likes

A CodeSignal certificate awarded to Cuong Lam Kim Huynh for successfully completing the 'Mastering the DOM API' course, part of the 'Comprehensive Introduction to Front-End Engineering' learning path, dated January 14, 2025.
Huỳnh Lam Kim Cường

Huỳnh Lam Kim Cường

0 likes

Delete Zapier - this does everything it does, runs on your own server, and it's completely free. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

A CodeSignal certificate awarded to Cuong Lam Kim Huynh for successfully completing the 'Introduction to JavaScript for Front-End Engineers' course, part of the 'Comprehensive Introduction to Front-End Engineering' learning path, covering JavaScript Programming and DOM API, dated January 13, 2025.
Huỳnh Lam Kim Cường

Huỳnh Lam Kim Cường

0 likes

JavaScript Cheat Sheet
Essential JavaScript commands every developer needs! 🚀 Variables, functions, loops, arrays & DOM manipulation all in one quick reference guide. Perfect for coding interviews or daily development. Save this for later! 💾 #JavaScript #WebDev #Programming #Coding #Developer #JS #Code
EM

EM

1 like

penny

penny

0 likes

Huỳnh Lam Kim Cường

Huỳnh Lam Kim Cường

0 likes

HTML Tags You Didn’t Know Exist
#htmlforbeginners #codingjourney #codingforbeginners #webdesigntips #softwareengineering
Aysha

Aysha

32 likes

What Is JavaScript? (Beginner Friendly)
JavaScript is what turns a website from static to interactive. In Day 1 of this beginner-friendly JavaScript series, I explain: • what JavaScript is • why websites feel “alive” • how JavaScript works with HTML and CSS #learnjavascript #codingforbeginners #webdevelopment #codewit
Aysha

Aysha

9 likes

HTML + CSS + JavaScript = MAGIC! 🔥
HTML alone is just a structure, CSS adds style, but JavaScript brings it to life! 🚀 Watch how I build this Digital Clock from scratch using HTML, CSS & JavaScript! 👨‍💻💡 Try it yourself & level up your coding skills #codingforbeginners #htmlcssforbeginners #studymotivation #learntocod
Aysha

Aysha

3 likes

Best - FREE - coding sites
learning to code is important and a great look for your resume! plus it’s fun! ANYONE CAN LEARN! these are my favorite sites I’ve utilized to learn new skills! #codinggirl #codingforbeginners #embracevulnerability #shareyourthoughts #Lemon8Diary
LOLLIPOPAK

LOLLIPOPAK

2980 likes

The Most In-Demand Programming Languages in 2025
#codingforbeginners #htmlcssforbeginners #studymotivation #programming #softwareengineering
Aysha

Aysha

30 likes

A computer screen displays Haskell code in an IDE, with the title 'LEARNING HOW TO CODE'. The screen shows code lines, file explorer, and status bar, set against a background with butterfly patterns, illustrating the start of a coding journey.
This image titled 'CHOOSING A LANGUAGE' presents popular programming languages: Python, Java, and JavaScript, each with its logo and a brief description highlighting their characteristics and suitability for beginners or experienced programmers.
Titled 'HOW TO START', this image outlines steps for learning to code, including finding resources, joining communities, completing coding challenges on platforms like HackerRank, and focusing on proficiency in one language.
Becoming a tech girly 👩🏾‍💻: Learning How to Code
Hi! I'm new to Lemon8 ✨ and this is my first post ☺️ I'm currently working as a software engineer and thought I'd share some of my ideas about how you can get started with programming. I've invested a lot of time getting underrepresented groups into the field of tech through
Lauren Williams

Lauren Williams

473 likes

useState in 60 seconds
Most React beginners overthink state. Here's all you need to know 🧠 #ReactJS #WebDev #LearnToCode #FrontendDev #JavaScript
Alexander Kazanski

Alexander Kazanski

1 like

Half a million people starred this repo, and it's not because it teaches you to use a tool, it teaches you to build one. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

Python Libraraies for Web scraping
#python #webscraping #freshlemon8 #usreels #paulalytics
Paulalytics

Paulalytics

1 like

How to Create a Progress Bar with HTML + CSS
#HTMLCSS #WebDevelopment #FrontendDev #codewithaysha
Aysha

Aysha

6 likes

Skills You Need For WEB DEVELOPMENT!!
💻If you've ever wondered what you need to know to do web development then this post is for you! I have laid out the basics, frameworks, backend, design tools, and bonus tools that you will most likely need to learn to become a web developer! Websites are quite complicate and layered, and they
CompSkyy

CompSkyy

141 likes

A laptop, a Starbucks drink, and a muffin on a wooden table, with the overlaid text "5 WEBSITES TO LEARN PROGRAMMING FOR BEGINNERS".
A MacBook Air displaying the FreeCodeCamp website, which offers free coding lessons and certifications. The text "FREECODECAMP" with an arrow points to the screen.
A MacBook Air showing the Codecademy website, featuring its basic, plus, and pro pricing plans. The text "CODECADEMY" with an arrow points to the screen.
Learn programming for free 👩‍💻
1. FreeCodeCamp - Languages: JavaScript, Python, SQL, HTML/CSS, and more. - Hands-on Projects: FreeCodeCamp is project-driven, meaning as you go through the curriculum, you'll build real-world applications like weather apps, portfolio websites, and data visualization projects. The full-
vedha | career tips (tech) 👩‍

vedha | career tips (tech) 👩‍

610 likes

An infographic titled 'Languages and Their Creators by Age' displays various programming languages, their creators, the year of creation, and the creator's age at that time. Each entry includes a portrait of the creator, from FLOW-MATIC to Swift. Created by Dan Nanni.
Programming languages and their creators by age
Some of the most influential programming languages were created surprisingly early, and a few much later than you might think Here is a quick breakdown of popular languages, who created them, when they were made, and how old the creators were at the time 😎👆 Find high-res pdf ebooks with all m
Learn Linux with Dan

Learn Linux with Dan

3 likes

A laptop screen displays lines of code, with text overlayed saying 'free websites to learn coding' and 'new skill,' encouraging users to swipe for more information on learning to code during a study break.
A laptop screen shows code, overlaid with a pop-up featuring 'codecademy.com.' The pop-up highlights interactive coding courses and a sign-up form, promoting it as a free resource for learning various programming languages.
A laptop screen displays code, overlaid with a pop-up featuring 'freecodecamp.com.' The pop-up describes it as a nonprofit offering free comprehensive web development and data analytics curriculum, including certifications.
On a study break? Try to learn how to code! 👩🏻‍💻
Learning coding during a study break is a productive way to use your time. It provides a mental shift from regular studies, enhances problem-solving skills, and fosters creativity. Online coding platforms offer flexibility, allowing you to learn at your own pace. This makes coding an ideal acti
teal.days

teal.days

2486 likes

Day 7 of my 30-day coding challenge!
#webdevelopment #coding #programming #softwareengineer #javascript
Aysha

Aysha

2 likes

Top 5 Books Every Web Developer Should Read
#webdevelopment #learncoding #codingbooks #frontenddeveloper #codingforbeginners
Aysha

Aysha

23 likes

Semantic HTML
Did you know that using Semantic HTML makes your website more accessible, improves SEO, and enhances user experience? #webaccessibility #semanticHTML #webdevelopment #webdesign #frontenddevelopment
Aysha

Aysha

4 likes

A dark blue background with the title "6 DISCORD COMMUNITIES EVERY CODER SHOULD JOIN!" in white text. Below it, a white computer monitor displays a blue Discord logo, with a yellow star next to it. The bottom reads "Don't miss out!".
A dark blue slide detailing "The Coding Den" Discord community. It highlights its focus on general programming, help, projects, and career advice, and reasons to join, such as being beginner-friendly and having supportive moderators. A join link is provided.
A dark blue slide detailing the "Python Discord" community. It focuses on Python programming and related technologies, emphasizing it's the official Python community with regular events and challenges. A join link is provided.
6 Discord Communities Every Coder Should Join!
#coding #learncoding #discorddev #webdeveloper #techcommunity Whether you're learning HTML, CSS, JavaScript, Python, or diving into full-stack development — these Discord servers are filled with devs, mentors, and resources to support your coding journey. 👩🏽‍💻👨🏿‍💻 👇 Tap to joi
Aysha

Aysha

10 likes

A person's hand is on a MacBook Pro keyboard, displaying the coddy.tech website with "Code Makes Perfect" and coding illustrations. The image highlights learning to code for free with this website.
A MacBook Pro screen shows the coddy.tech website's daily challenge interface, allowing users to search by programming language, choose difficulty, and access daily challenges.
A MacBook Pro screen displays the coddy.tech website, showcasing full, beginner-friendly courses like "SQL for beginners" and "Python Introduction," emphasizing practicing at one's own pace.
learn how to code for FREE! 💻
learning to code for free has never been easier with coddy.tech! 🌟 whether you're a complete beginner or looking to enhance your skills, coddy.tech offers a range of resources to help you on your coding journey. here's how you can get started: explore coding courses: coddy.tech provides
sanae ☕️

sanae ☕️

1411 likes

Ten thousand people star this thing to get rid of spam email, and it costs them nothing. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

Glowing Newsletter Form with HTML + CSS
Day 12 of my 30 Days of Mini Projects series — we’re building a stylish newsletter subscription form! It’s simple, modern, and perfect for dark-theme websites. You’ll learn how to style glowing inputs, gradient buttons, and a soft animated glow effect using CSS only. #HTMLCSS #WebDesign
Aysha

Aysha

1 like

Delete IDM - this open-source downloader chunks files without merging them, adds AI acceleration, and it's still free. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

An infographic illustrates web browser fingerprinting, categorizing attributes collected to create unique user profiles. It lists HTTP headers, input/interaction, browser config, system/device info, network connectivity, graphics/rendering, capabilities, and behavioral/timing data points.
Web browser fingerprinting
Web browser fingerprinting is the technique of uniquely identifying and tracking a device by collecting and correlating its exposed system, browser, and network attributes during web interactions Here are a categorized list of attributes collected as part of browser fingerprinting 😎👆 #privacy
Learn Linux with Dan

Learn Linux with Dan

17 likes

Seventy-six thousand stars for a coding agent that runs on your own machine, with your own login, doing whatever your login can do. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

See more