Javascript có thể đính kèm một sự kiện bằng cách sử dụng trình xử lý sự kiện và có thể phản ứng với sự kiện bằng trình xử lý sự kiện. Các sự kiện thường được gói gọn với một số chức năng.

Bạn đang xem : danh sách sự kiện javascript dom

Sự kiện DOM trong Javascript

< / p>

Sự kiện trong Javascript là gì?

Sự kiện là một hành động hoặc một trạng thái của bất kỳ hành động nào được thực hiện bởi người dùng hoặc bởi trình duyệt.

Một sự kiện có thể được kích hoạt bởi người dùng hoặc bởi trình duyệt. Trình duyệt kích hoạt một sự kiện khi người dùng tương tác với trình duyệt. Người dùng kích hoạt sự kiện khi người dùng tương tác với trang web.

Ví dụ về Sự kiện DOM là:

  • Người dùng nhấp vào một nút
  • Di chuyển chuột
  • Trang được tải
  • Đã nhấn phím
  • Đã gửi biểu mẫu

Sử dụng Javascript, bạn có thể đính kèm và có thể phản ứng với các hành động nhất định. Các sự kiện thường được bao bọc bằng một số chức năng, thực thi sau khi sự kiện xảy ra.

Sử dụng những sự kiện này, bạn có thể tạo ra rất nhiều thứ vì giờ đây bạn có quyền kiểm soát hành động của người dùng. Bạn có thể làm điều gì đó khi người dùng thực hiện một số hành động như nhấp vào nút.

Thuật ngữ Sự kiện

Có hai thuật ngữ khi chúng ta bắt gặp các sự kiện trong quá trình phát triển web:

  1. Trình xử lý sự kiện – Trình xử lý sự kiện là một đối tượng lắng nghe một sự kiện nhất định như nhấp chuột, nhấn phím, di chuyển chuột, v.v.
  2. Trình xử lý sự kiện – Trình xử lý sự kiện thường là một hàm được gọi khi một sự kiện nhất định xảy ra.

Chúng tôi có thể đính kèm trực tiếp một sự kiện vào phần tử HTML làm thuộc tính hoặc chúng tôi có thể sử dụng javascript để thực hiện việc này. Hãy xem chi tiết.

Thêm trình xử lý sự kiện

Người nghe sự kiện là người theo dõi hành động cần thực hiện khi một sự kiện cụ thể xảy ra.

Nó lắng nghe sự kiện và kích hoạt chức năng. nhưng bạn phải đề cập cụ thể hành động sẽ được thực hiện trong trường hợp nào.

Có 3 cách khác nhau để bạn có thể gắn trình nghe sự kiện vào một phần tử nhất định:

1. Sử dụng Thuộc tính HTML

Bạn có thể đặt trực tiếp trình xử lý sự kiện thành phần tử HTML làm thuộc tính có tên trên & lt; sự kiện & gt; và có thể kích hoạt sự kiện trên hành động đó.

Ví dụ, nếu bạn muốn tấn công sự kiện click vào phần tử HTML thì hãy sử dụng thuộc tính onclick cho nó. Ví dụ & lt; button onclick = "doSomething ()" & gt;

Ví dụ

  & lt; button onclick = "doSomething ()" id = "button" & gt; Sự kiện Cháy & lt; / button & gt;

& lt; script & gt;
  function doSomething () {
    alert ("Sự kiện đã kích hoạt");
  }
& lt; / script & gt;  

▶ Chạy mã

Đầu ra:

Thêm nhiều trình nghe sự kiện:

Bạn có thể thấy ở trên trong đoạn mã có một sự kiện được đính kèm với phần tử & lt; button & gt; nhưng bạn có thể đính kèm bao nhiêu sự kiện tùy thích.

Để đính kèm nhiều sự kiện, chỉ cần tách các sự kiện bằng dấu cách. Ví dụ & lt; p onevent1 = "doSomething ()" onevent2 = "doSomethingElse ()" & gt;

Ví dụ

  & lt; button onclick = "doSomething ()" onmouseover = "doSomethingElse ()" id = "button" & gt; Sự kiện Cháy & lt; / button & gt;

& lt; script & gt;
  function doSomething () {
    alert ("Sự kiện đã kích hoạt");
  }
  function doSomethingElse () {
    const button = document.getElementById ("nút");
    button.style.background = "cà chua";
    button.style.padding = "5px";
  }
& lt; / script & gt;  

▶ Chạy mã

Xem Thêm  Ngắt dòng trong HTML - Cách ngắt dòng bằng thẻ HTML
- mã html cho ngắt dòng

Ezoic

báo cáo quảng cáo này

2. Sử dụng Thuộc tính DOM

Mỗi phần tử trong DOM đều có một loạt thuộc tính DOM, danh sách các thuộc tính đó có thể giúp chúng tôi thêm trình xử lý sự kiện vào phần tử.

Bạn có thể chỉ định một trình xử lý sự kiện bằng thuộc tính DOM trên & lt; event & gt; . Ví dụ: element.onclick

Thuộc tính DOM để thêm trình xử lý sự kiện

Ví dụ

  const button = document.getElementById ("button");
thông báo hàm () {
    alert ("Sự kiện đã kích hoạt");
  }
button.onclick = message;  

▶ Chạy mã

Nếu bạn chỉ định một trình xử lý sự kiện trực tiếp bằng cách sử dụng thuộc tính HTML thì trình duyệt sẽ đọc thuộc tính và tạo một hàm mới và gán nó cho thuộc tính DOM.

Đây là ý nghĩa của nó, dưới đây là 2 đoạn mã hoạt động giống nhau:

  & lt; button id = "button" onclick = "alert ('Sự kiện đã kích hoạt!')" & gt; Sự kiện cháy & lt; / button & gt;  

Ví dụ

  & lt; button id = "button" & gt; Sự kiện Cháy & lt; / button & gt;

& lt; script & gt;
  button.onclick = function () {
    alert ("Sự kiện đã kích hoạt");
  };
& lt; / script & gt;  

Cả hai mã trên đều tương đương với nhau.

Trong khi gán hàm cho các thuộc tính xử lý sự kiện của DOM, chỉ cần gán tên hàm. Hàm phải được chỉ định là myFxn chứ không phải myFxn () .

3. Phương pháp addEventListener

Vấn đề cơ bản khi chỉ định trình xử lý sự kiện bằng phương pháp trên là bạn không thể đính kèm 2 trình xử lý sự kiện khác nhau cho một sự kiện.

  button.onclick = function () {alert (1)}
// thay thế trình xử lý trên
button.onclick = function () {alert (2)}  

Có một cách khác để chỉ định các trình xử lý sự kiện mà không gặp phải sự cố đã được cấp phép, phương thức addEventListener .

Phương thức addEventListener gắn trình xử lý sự kiện vào một phần tử HTML.

Sự kiện mới được đính kèm không ảnh hưởng đến các sự kiện trước đó. Bạn có thể thêm nhiều sự kiện vào phần tử giống như cách chúng tôi đã sử dụng thuộc tính HTML.

Sử dụng phương thức addEventListener () , bạn có thể thêm sự kiện vào bất kỳ phần tử DOM nào, không nhất thiết chỉ là phần tử HTML.

cú pháp addEventListener:

 phần tử. 

addEventListener

(sự kiện, hàm gọi lại, useCapture);
  • phần tử - Đây là một phần tử HTML mà chúng tôi đang gắn sự kiện vào
  • sự kiện - Đây là tên của sự kiện mà bạn quan tâm
  • hàm gọi lại - Đây là hàm chạy sau khi sự kiện được kích hoạt
  • useCapture - Đây là một giá trị chỉ định sử dụng sự kiện tạo bọt hay ghi lại sự kiện. (Đây là một tham số tùy chọn và giá trị mặc định là false)

Ví dụ

  const element = document.getElementById ("button");

element.addEventListener ("nhấp chuột", tin nhắn);
thông báo hàm () {
  cảnh báo ("Đã nhấp vào nút!")
}  

▶ Chạy mã

Trong khi sử dụng phương thức addEventListener () , không sử dụng tiền tố 'on' trong tên sự kiện. chẳng hạn như thay vì sử dụng 'onclick', chỉ cần sử dụng 'click'.

Bạn cũng có thể sử dụng một hàm nội bộ trong phương thức addEventListener () .

  const element = document.getElementById ("button");
element.addEventListener ("click", function () {alert ("Đã nhấp vào nút!")});  

▶ Chạy mã

Nhiều sự kiện bằng addEventListener

Phương thức addEventListener rất tốt có thể thêm nhiều phương thức giống nhau hoặc khác nhau vào một phần tử. Điều này có nghĩa là chúng tôi có thể thêm 2 hoặc nhiều hơn 2 người nghe sự kiện cho cùng một sự kiện.

Ví dụ

  const element = document.getElementById ("button");
element.addEventListener ("nhấp chuột", fxn1);
element.addEventListener ("nhấp chuột", fxn2);
hàm fxn1 () {
  alert ("Nhấp vào Sự kiện Đã kích hoạt chức năng này");
}
hàm fxn2 () {
  alert ("Sự kiện nhấp chuột tương tự cũng kích hoạt chức năng này");
}  

▶ Chạy mã

Nhiều loại sự kiện khác nhau cũng có thể được đính kèm vào cùng một phần tử HTML bằng cách sử dụng phương thức addEventListener () .

Ví dụ

  const element = document.getElementById ("button");
element.addEventListener ("nhấp chuột", clickFxn);
element.addEventListener ("di chuột qua", mouseoverFxn);
element.addEventListener ("mouseout", mouseoutFxn);
function clickFxn () {
  alert ("Nhấp vào Sự kiện Đã kích hoạt chức năng này");
}
function mouseoverFxn () {
  element.style.background = "cà chua";
  element.style.padding = "8px";
}
function mouseoutFxn () {
  element.style.background = "trắng";
  element.style.padding = "2px";
}  

▶ Chạy mã

Sự kiện bong bóng

Trong Sự kiện sủi bọt khi một sự kiện được kích hoạt cho phần tử, sau đó lần chạy đầu tiên của nó cho phần tử, sau đó sự kiện tương tự được kích hoạt cho phần tử mẹ của nó, sau đó tiếp tục đến với phần tử tổ tiên khác.

Ví dụ: chúng tôi có ba phần tử lồng nhau CHÍNH & gt; DIV & gt; P và một sự kiện nhấp chuột được kích hoạt trên 'P', sau đó nó sẽ kích hoạt cho 'DIV' mẹ của nó và sau đó cho 'MAIN'.

Ví dụ

  & lt; p & gt; Nhấp vào bất kỳ hộp phần tử nào bên dưới. & lt; / p & gt;
& lt; main class = "border" id = "main" & gt; MAIN
  & lt; div id = "div" & gt;
    DIV
    & lt; p id = "p" & gt; P & lt; / p & gt;
  & lt; / div & gt;
& lt; / main & gt;

& lt; script & gt;
  document.getElementById ("p"). addEventListener ("click", function () {alert ("P element")});
  document.getElementById ("div"). addEventListener ("click", function () {alert ("Phần tử DIV cũng được kích hoạt")});
  document.getElementById ("main"). addEventListener ("click", function () {alert ("Phần tử MAIN cũng được kích hoạt")});
& lt; / script & gt;  

▶ Chạy mã

Đầu ra:

MAIN

DIV

P

Xóa Trình xử lý sự kiện

Nghe sự kiện cũng có thể bị xóa khỏi bất kỳ phần tử hoặc đối tượng HTML nào.

Để xóa trình xử lý sự kiện, hãy sử dụng phương thức removeEventListner () .

Ví dụ

  & lt; p class = "cà chua" & gt; Điều này có trình xử lý sự kiện "di chuột qua". & lt; / p & gt;
& lt; button id = "button" onclick = "removeEvent ()" & gt; Xóa Trình xử lý sự kiện & lt; / button & gt;

& lt; script & gt;
  var element = document.querySelector (". cà chua");
  element.addEventListener ("di chuột qua", createAlert);
  function createAlert () {
    alert ("Sự kiện được kích hoạt!");
  }
  function removeEvent () {
    element.removeEventListener ("di chuột qua", createAlert);
  }
& lt; / script & gt;  

▶ Chạy mã

Kết luận

Trong hướng dẫn này, chúng tôi đã học cách tạo, đính kèm và xóa trình xử lý sự kiện vào các phần tử HTML. Chúng tôi cũng đã học cách sử dụng Tạo bong bóng sự kiện Chụp sự kiện để xử lý các sự kiện cho các phần tử HTML.


Xem thêm những thông tin liên quan đến chủ đề danh sách sự kiện javascript dom

Master DOM Manipulation | JavaScript DOM Manipulation

alt

  • Tác giả: CodeLab
  • Ngày đăng: 2022-02-17
  • Đánh giá: 4 ⭐ ( 9845 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey there guys!

    Welcome to the Part 1/2 Master DOM Manipulation..in this video we will go over the fundamentals of the DOM, as well as looking at some more of the advanced aspects of the DOM...with plenty of examples along the way..i hope you enjoy. 🙂

    List of DOM Events:

    https://www.w3schools.com/jsref/dom_obj_event.asp

    🙂 SUBSCRIBE - hit the bell 🔔 and choose all: https://www.youtube.com/c/CodeLab98

    ------------------
    Follow me on Social Media
    Instagram: https://www.instagram.com/code.lab98/

    Microphone I Use
    Blue Yeti USB Microphone: https://amzn.to/3wYPIH0
    RØDE PSA1 Arm: https://amzn.to/3lWU37t

    PC Specs
    MSI GeForce GTX 1660 SUPER VENTUS XS OC: https://amzn.to/3M53Nai
    Intel Core i9-11900K: https://amzn.to/3lSPJGp
    Kingston 480GB Q500: https://amzn.to/3NKDebA
    MSI MAG B560 TOMAHAWK: https://amzn.to/3lZbpQY
    MSI MAG FORGE 100R Mid Tower: https://amzn.to/3awoBum
    27" Ultrasharp 4k Monitor: https://amzn.to/3z6IyC9
    PINKCAT, Wireless Keyboard and Mouse Set: https://amzn.to/3abeyuB

    ------------------
    TIMESTAMPS

    00:00 - Introduction
    00:23 – Prerequisites
    00:58 – Tools needed for the Course
    01:13 – Structure of Course
    01:25 – What is he DOM?
    01:58 – DOM Tree Analogy
    03:54 – Selecting Elements in the DOM
    11:37 – Styling an Element
    16:26 – Creating Elements
    17:25 – Adding Elements
    18:26 -- Modify Text
    21:08 – Modifying Elements Attributes & Classes
    24:52 – Remove an Element
    25:40 – DOM Tree Recap
    27:51 – Traversing the DOM
    37:41 – Event Listeners
    44:52 – Event Listener Example
    50:09 – Event Propagation
    1:00:00 – Event Delegation

    ------------------

    👍 HTML FULL TUTORIAL: https://www.youtube.com/playlist?list=PL-GJ2ovkUZSECwci9yCGpUNaC-XT6YDln

    👍 CSS FULL TUTORIAL: https://www.youtube.com/playlist?list=PL-GJ2ovkUZSFypjUr-ntQPlIpGO38P1xc

    👍 FIVE-MINUTE FRIDAYS TUTORIALS: https://www.youtube.com/playlist?list=PL-GJ2ovkUZSFWFbBAt4KTFh_WuHkYJEC8
    ------------------
    Learn with Code Lab! easy to understand tutorials 🙂

    DISCLAIMERS:
    I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.

DOM event trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 5 ⭐ ( 2636 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này mình sẽ giới thiệu đến mọi người về xử lý sự kiện trong DOM javascript.

Các sự kiện (Event) trong Javascript - Freetuts

  • Tác giả: hoctapsgk.com
  • Đánh giá: 4 ⭐ ( 4672 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các sự kiện trong javascript: Chúng ta có các sự kiện như click - ondbclick - onchange - onmouseover .. xem danh sách sự kiện event trong js tại đâyTrang tài liệu, đề thi, kiểm tra website giáo dục Việt Nam. Giúp học sinh rèn luyện nâng cao kiến thức.

Các sự kiện (Event) trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 1288 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các sự kiện trong javascript: Chúng ta có các sự kiện như click - ondbclick - onchange - onmouseover .. xem danh sách sự kiện event trong js tại đây

Bài 7: Event – Sự kiện trong Javascript

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 6354 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này, chúng ta sẽ tìm hiểu về event - sự kiện trong Javascript. Chúng ta sẽ tìm hiểu về các loại sự kiện, một số ví dụ và cách thêm các sự kiện cho thẻ html.

Sự kiện (Event) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 9736 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện (Event) trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Sự kiện trong Dom - JavaScript

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 5217 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các sự kiện trong JavaScript, bắt sự kiện trong HTML DOM, tạo các listener lắng nghe bắt các sự kiện như khi click, change, tạo ra sự kiện tùy biến và kích hoạt phát đi một sự kiện

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php