Tìm hiểu về DOM - Document Object Model (p7-Hiểu events trong JavaScript)

Giới thiệu

events.html

Events

Click me

Try to change me.

events.html

EventsClick me

Try to change me.

Hãy tạo tệp events.js của chúng ta, mà chúng ta đã đặt trong thư mục js / ở đây. Trong đó, chúng ta sẽ tạo hàm changeText (), nó sẽ sửa đổi textContent của phần tử p.

js/events.js
// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an inline event handler.";
}

 Event handlers trên dòng là một cách đơn giản để bắt đầu hiểu các sự kiện, nhưng chúng thường không được sử dụng ngoài mục đích thử nghiệm và giáo dục.

Thuộc tính Event Handler 

events.html
...

Click me

I will change.

...

Chức năng của chúng tôi sẽ vẫn tương tự, ngoại trừ bây giờ chúng tôi cần truy cập vào phần tử nút trong JavaScript. Chúng ta chỉ có thể truy cập onclick giống như chúng ta sẽ truy cập style hoặc id hoặc bất kỳ thuộc tính phần tử nào khác, sau đó gán tham chiếu hàm.

js/events.js
// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;

Lưu ý:  Event handlers không tuân theo quy ước camelCase mà hầu hết mã JavaScript
tuân thủ.Lưu ý rằng mã được onclick, không onClick.

 Khi bạn tải trang lần đầu tiên, trình duyệt sẽ hiển thị như sau:

js/events.js
const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

events.html
...Click me

    

I will change.

...

Chúng ta sẽ vẫn sử dụng hàm changeText () giống như trước đây. Chúng ta sẽ gắn phương thức addEventListener () vào button.

js/events.js
// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

js/events.js
const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);

// An anonymous function on an event listener
button.addEventListener('click', () => {
    p.textContent = "Will I change?";
});

// Remove alert function from button element
button.removeEventListener('click', alertText);

// Test the keyCode, key, and code properties
document.addEventListener('keydown', event => {
    console.log('key: ' + event.keyCode);
    console.log('key: ' + event.key);
    console.log('code: ' + event.code);
});

Output
keyCode: 65
key: a
code: KeyA

Lưu ý rằng keyCode đang trong quá trình không được chấp nhận và nên sử dụng mã trong các project new.

event-test-p.html

Events

// Pass an event through to a listener
document.addEventListener('keydown', event => {
    var element = document.querySelector('p');

    // Set variables for keydown codes
    var a = 'KeyA';
    var s = 'KeyS';
    var d = 'KeyD';
    var w = 'KeyW';

    // Set a direction for each code
    switch (event.code) {
        case a:
            element.textContent = 'Left';
            break;
        case s:
            element.textContent = 'Down';
            break;
        case d:
            element.textContent = 'Right';
            break;
        case w:
            element.textContent = 'Up';
            break;
    }
});

Khi bạn nhấn một trong các phím - a, s, d hoặc w - bạn sẽ thấy kết quả tương tự như sau:

Từ đây, bạn có thể tiếp tục phát triển cách trình duyệt sẽ phản hồi và cho người dùng nhấn các phím đó và có thể tạo một trang web động hơn.

Tiếp theo, chúng ta sẽ đi qua một trong những thuộc tính sự kiện thường được sử dụng nhất: thuộc tính target. Trong ví dụ sau, chúng tôi có ba phần tử div bên trong một section.

event-test-div.html

Events

Sử dụng event.target với JavaScript trong Developer Console của trình duyệt, chúng tôi có thể đặt một event listener  trên phần tử phần bên ngoài section và nhận phần tử lồng nhau sâu sắc nhất.

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
    console.log(event.target);
});

Nhấp vào bất kỳ một trong những yếu tố đó sẽ trả về kết quả của phần tử cụ thể có liên quan đến Bảng điều khiển bằng event.target. Điều này cực kỳ hữu ích, vì nó cho phép bạn chỉ đặt một event listener có thể được sử dụng để truy cập vào nhiều phần tử lồng nhau.

Phần kết luận

 Bài dịch từ nguồn https://www.digitalocean.com/community/tutorials/understanding-events-in-javascript

 Xin cảm ơn các bạn đã theo dõi bài viết của Nguyên Vũ.