---
title: JavaScript Events
description: "HTML events are **“things”** that happen to HTML elements. HTML үйл явдлууд нь HTML элементүүдэд тохиолддог “зүйл” юм. When JavaScript is used in HTML pages, JavaScript can **“react”** on these events. JavaScript-ийг HTML хуудсанд ашиглахад JavaScript нь эдгээр үйл явдалд “хариу үйлдэл үзүүлэх” боломжтой.…"
url: "https://apprentice.mn/docs/javascript-events/"
updated: "2021-07-26"
category: Javascript
---

# JavaScript Events

HTML events are **“things”** that happen to HTML elements.

HTML үйл явдлууд нь HTML элементүүдэд тохиолддог “зүйл” юм.

When JavaScript is used in HTML pages, JavaScript can **“react”** on these events.

JavaScript-ийг HTML хуудсанд ашиглахад JavaScript нь эдгээр үйл явдалд “хариу үйлдэл үзүүлэх” боломжтой.

---

## HTML Events

An HTML event can be something the browser does, or something a user does.

HTML үйл явдал нь browser-ийн хийдэг зүйл эсвэл хэрэглэгчийн хийдэг зүйл байж болно.

Here are some examples of HTML events:

HTML үйл явдлын зарим жишээг энд оруулав.

- An HTML web page has finished loading
  HTML вэб хуудас ачаалж дууслаа
- An HTML input field was changed
  HTML оролтын талбарыг өөрчилсөн
- An HTML button was clicked
  HTML товчлуур дарагдсан

Often, when events happen, you may want to do something.

Ихэнх тохиолдолд, үйл явдал тохиолдвол та ямар нэгэн зүйл хийхийг хүсч магадгүй юм.

JavaScript lets you execute code when events are detected.

JavaScript нь үйл явдал илэрсэн үед код гүйцэтгэх боломжийг танд олгоно.

HTML allows event handler attributes, **with JavaScript code**, to be added to HTML elements.

HTML нь **JavaScript код** бүхий үйл явдлын зохицуулагчийн шинж чанаруудыг HTML элементүүдэд нэмэх боломжийг олгодог.

With single quotes:

Нэг ишлэлээр:

   <*element* *event*=**‘*****some JavaScript*****‘**>

With double quotes:

Давхар эшлэлтэй:

   <*element* *event*=**“*****some JavaScript*****“**>

In the following example, an `onclick` attribute (with code), is added to a ``element:

Дараах жишээнд `onclick` шинж чанарыг (кодтой) `` элементэд нэмж оруулсан болно.

### Example Жишээ

      `<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>`

In the example above, the JavaScript code changes the content of the element with id=”demo”.

Дээрх жишээнд JavaScript код нь элементийн агуулгыг id = “demo” болгож өөрчилдөг.

In the next example, the code changes the content of its own element (using `this.innerHTML`):

Дараагийн жишээнд код нь өөрийн элементийн агуулгыг өөрчилдөг (this.innerHTML ашиглан):

### Example Жишээ

      `<button onclick="this.innerHTML = Date()">The time is?</button>`

JavaScript code is often several lines long. It is more common to see event attributes calling functions:

JavaScript код нь ихэвчлэн хэд хэдэн мөртэй байдаг. Үйл ажиллагааг дуудах үйл явдлын шинж чанарыг харах нь илүү түгээмэл байдаг:

### Example Жишээ

      `<button onclick="displayDate()">The time is?</button>`

## Common HTML Events

## Нийтлэг HTML үйл явдлууд

Here is a list of some common HTML events:

Зарим нийтлэг HTML үйл явдлын жагсаалтыг энд оруулав:

| Event | Description |
| --- | --- |
| onchange | An HTML element has been changed HTML элемент өөрчлөгдсөн |
| onclick | The user clicks an HTML element Хэрэглэгч HTML элемент дээр дарна |
| onmouseover | The user moves the mouse over an HTML element Хэрэглэгч хулганаа HTML элемент дээр шилжүүлдэг |
| onmouseout | The user moves the mouse away from an HTML element Хэрэглэгч хулганаа HTML элементээс холдуулдаг |
| onkeydown | The user pushes a keyboard key Хэрэглэгч гарын товчлуурыг дардаг |
| onload | The browser has finished loading the page Хөтөч хуудсыг ачаалж дуусав |

The list is much longer: Apprentice JavaScript Reference HTML DOM Events.

Жагсаалт хамаагүй урт байна: Apprentive.mn  JavaScript лавлагаа HTML DOM үйл явдлууд.

---

## What can JavaScript Do?

## JavaScript юу хийж чадах вэ?

Event handlers can be used to handle and verify user input, user actions, and browser actions:

Үйл явдлын зохицуулагчийг хэрэглэгчийн оролт, хэрэглэгчийн үйлдэл, хөтчийн үйлдлийг хянах, шалгахад ашиглаж болно.

- Things that should be done every time a page loads
  Хуудсыг ачаалах бүрт хийх ёстой зүйлс
- Things that should be done when the page is closed
  Хуудсыг хаах үед хийх ёстой зүйлүүд
- Action that should be performed when a user clicks a button
  Хэрэглэгч товчлуур дээр дарахад хийгдэх ёстой үйлдэл
- Content that should be verified when a user inputs data
  Хэрэглэгч өгөгдөл оруулах үед баталгаажуулах ёстой агуулга
- And more …
  Бусад …

Many different methods can be used to let JavaScript work with events:

JavaScript-ийг үйл явдлуудтай ажиллах боломжийг олгохын тулд олон янзын аргыг ашиглаж болно.

- HTML event attributes can execute JavaScript code directly
  HTML үйл явдлын шинж чанарууд нь JavaScript кодыг шууд гүйцэтгэх боломжтой
- HTML event attributes can call JavaScript functions
  HTML үйл явдлын шинж чанарууд нь JavaScript функцийг дуудаж болно
- You can assign your own event handler functions to HTML elements
  HTML элементүүдэд өөрийн үйл явдлын зохицуулагчийн функцийг оноож өгч болно
- You can prevent events from being sent or being handled
  Та үйл явдлыг илгээх эсвэл зохицуулахаас урьдчилан сэргийлэх боломжтой
- And more …
  Бусад …

You will learn a lot more about events and event handlers in the HTML DOM chapters.

HTML DOM бүлгүүдээс үйл явдал, үйл явдлын зохицуулагчдын талаар илүү их зүйлийг сурч мэдэх болно.

          [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-events%2F&linkname=JavaScript%20Events](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-events%2F&linkname=JavaScript%20Events)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-events%2F&linkname=JavaScript%20Events](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-events%2F&linkname=JavaScript%20Events)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-events%2F&linkname=JavaScript%20Events](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-events%2F&linkname=JavaScript%20Events)[https://www.addtoany.com/share](https://www.addtoany.com/share)
