Sự kiện trong định nghĩa javascript là gì?

Trong trường hợp bạn không để ý, hầu hết các ứng dụng và trang web đều khá nhàm chán khi bị bỏ mặc. Họ ra mắt với sự phô trương và thích thú, nhưng sự phấn khích mà họ mang lại sẽ biến mất rất nhanh nếu chúng ta không bắt đầu tương tác với họ

Lý do cho điều này là đơn giản. Các ứng dụng của chúng tôi tồn tại để phản ứng với những thứ mà chúng tôi làm với chúng. Họ có một số động lực sẵn có khi chúng tôi bắt họ ra khỏi giường và sẵn sàng cho ngày mới. Mọi thứ khác mà họ làm sau đó phần lớn phụ thuộc vào những gì chúng ta bảo họ làm. Đây là nơi mọi thứ trở nên thực sự thú vị

Cách chúng tôi yêu cầu các ứng dụng của mình phải làm gì là để chúng phản ứng với những gì được gọi là sự kiện. Trong hướng dẫn này, chúng ta sẽ xem xét sơ bộ về sự kiện là gì và cách chúng ta có thể sử dụng chúng

trở đi

Chúa ơi. Một cuốn sách JavaScript của Kirupa?

Để nâng cao kỹ năng JavaScript của bạn ra ngoài vũ trụ, mọi thứ bạn cần để trở thành chuyên gia về JS đều có sẵn ở cả ấn bản bìa mềm và kỹ thuật số

MUA TRÊN AMAZON

Sự kiện là gì?

Ở cấp độ cao, mọi thứ chúng tôi tạo ra đều có thể được mô hình hóa bằng câu lệnh sau

Chúng ta có thể điền vào chỗ trống trong tuyên bố này theo vô số cách khác nhau. Khoảng trống đầu tiên gọi ra điều gì đó xảy ra. Chỗ trống thứ hai mô tả phản ứng với điều đó. Dưới đây là một số ví dụ về tuyên bố này được điền

Mô hình chung này áp dụng cho tất cả mã chúng ta đã viết cùng nhau. Mô hình này cũng áp dụng cho tất cả mã mà bạn bè nhà phát triển/nhà thiết kế yêu thích của chúng tôi đã viết cho ứng dụng của họ. Không có cách nào thoát khỏi mô hình này, vì vậy. không có điểm nào trong việc chống lại. Thay vào đó, chúng ta cần học cách nắm lấy ngôi sao của mô hình này, người rất tài năng được gọi là sự kiện

Một sự kiện không gì khác hơn là một tín hiệu. Nó thông báo rằng một cái gì đó vừa xảy ra. Đây có thể là một cú nhấp chuột. Nó có thể là một phím bấm trên bàn phím của chúng tôi. Nó có thể là cửa sổ của chúng tôi bị thay đổi kích thước. Nó chỉ có thể là tài liệu của chúng tôi chỉ đơn giản là được tải. Điều cần lưu ý là tín hiệu của chúng tôi có thể là hàng trăm thứ bất kỳ được tích hợp sẵn trong ngôn ngữ JavaScript. hoặc những thứ tùy chỉnh mà chúng tôi đã tạo chỉ dành riêng cho ứng dụng của mình

Quay trở lại mô hình của chúng tôi, các sự kiện tạo nên nửa đầu

Một sự kiện xác định điều xảy ra. Nó phát tín hiệu. Phần thứ hai của mô hình được xác định bởi phản ứng đối với sự kiện

Rốt cuộc, một tín hiệu có ích gì nếu không có ai đó ở đâu đó đang chờ đợi nó và sau đó thực hiện hành động thích hợp?. Ok - bây giờ chúng ta đã có cái nhìn tổng quan cấp cao về sự kiện là gì, hãy đi sâu vào cách các sự kiện tồn tại trong khu bảo tồn thiên nhiên được gọi là JavaScript

Sự kiện và JavaScript

Do tầm quan trọng của các sự kiện, bạn sẽ không ngạc nhiên khi JavaScript cung cấp cho chúng tôi rất nhiều hỗ trợ tuyệt vời để làm việc với chúng. Để làm việc với các sự kiện, có hai điều chúng ta cần làm

1. Lắng nghe các sự kiện
2. Phản ứng với các sự kiện

Hai bước này có vẻ khá đơn giản, nhưng đừng bao giờ quên rằng chúng ta đang xử lý JavaScript ở đây. Sự đơn giản chỉ là một màn khói cho độ sâu của chấn thương mà JavaScript sẽ gây ra cho chúng ta nếu chúng ta đi sai bước. Có lẽ tôi đang quá kịch tính ở đây, nhưng chúng ta sẽ sớm tìm ra thôi

1. Lắng nghe sự kiện

Nói một cách thẳng thắn hơn những gì tôi đã nhảy xung quanh trước đó, hầu hết mọi thứ chúng tôi làm trong một ứng dụng đều dẫn đến một sự kiện bị sa thải. Đôi khi, ứng dụng của chúng tôi sẽ tự động kích hoạt các sự kiện. chẳng hạn như khi nó tải. Đôi khi, ứng dụng của chúng tôi sẽ kích hoạt các sự kiện như một phản ứng đối với việc chúng tôi thực sự tương tác với nó. Điều cần lưu ý là ứng dụng của chúng tôi liên tục bị tấn công bởi các sự kiện cho dù chúng tôi có ý định kích hoạt chúng hay không. Nhiệm vụ của chúng tôi là yêu cầu ứng dụng của chúng tôi chỉ lắng nghe những sự kiện mà chúng tôi quan tâm

Công việc vô ơn là lắng nghe đúng sự kiện được xử lý hoàn toàn bởi một hàm gọi là addEventListener. Chức năng này chịu trách nhiệm cảnh giác vĩnh viễn để nó có thể thông báo cho một phần khác của ứng dụng của chúng tôi khi một sự kiện thú vị được kích hoạt

Cách chúng tôi sử dụng chức năng này như sau

source.addEventListener(eventName, eventHandler, false);

Điều đó có thể không hữu ích lắm, vì vậy hãy phân tích ý nghĩa của từng phần của chức năng này

Nguồn

Chúng tôi gọi addEventListener thông qua một phần tử hoặc đối tượng mà chúng tôi muốn lắng nghe các sự kiện trên. Thông thường, đó sẽ là một phần tử DOM, nhưng nó cũng có thể là tài liệu, cửa sổ hoặc bất kỳ đối tượng nào được thiết kế đặc biệt để kích hoạt các sự kiện

Tên sự kiện

Đối số đầu tiên chúng ta chỉ định cho hàm addEventListener là tên của sự kiện mà chúng ta muốn nghe. Danh sách đầy đủ các sự kiện mà chúng tôi có sẵn cho bạn đơn giản là quá lớn để liệt kê ở đây (go ), nhưng một số sự kiện phổ biến nhất mà bạn sẽ gặp phải là

Sự kiệnSự kiện được kích hoạt. nhấp chuột. khi bạn nhấn và thả nút chuột chính, bàn di chuột, v.v. di chuột. bất cứ khi nào bạn di chuyển con trỏ chuột chuột qua. khi bạn di chuyển con trỏ chuột qua một phần tử. Đây là sự kiện bạn sẽ sử dụng để phát hiện di chuột. di chuột ra ngoài. khi con trỏ chuột của bạn di chuyển ra ngoài ranh giới của một phần tử. dblclick. khi bạn nhấp nhanh hai lần. DOMNội dung được tải. khi DOM tài liệu của bạn đã được tải đầy đủ. Bạn có thể tìm hiểu thêm về sự kiện này trong phần hướng dẫn sau. trọng tải. khi toàn bộ tài liệu của bạn (DOM, nội dung bên ngoài như hình ảnh, tập lệnh, v.v. ) đã được tải đầy đủ. phím tắt. khi bạn nhấn một phím trên bàn phímkeyup. khi bạn ngừng nhấn một phím trên cuộn bàn phím. khi một phần tử được cuộn quanh bánh xe &
DOMChuộtCuộn. mỗi khi bạn sử dụng con lăn chuột để cuộn lên hoặc xuống

Trong các hướng dẫn tiếp theo, chúng ta sẽ xem xét nhiều sự kiện này chi tiết hơn. Hiện tại, chỉ cần xem nhanh sự kiện nhấp chuột. Chúng tôi sẽ sử dụng cái đó trong giây lát

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

Đối số thứ hai yêu cầu chúng ta chỉ định một hàm sẽ được gọi khi sự kiện bị nghe lén. Chức năng này được bạn bè và gia đình trìu mến gọi là trình xử lý sự kiện. Chúng ta sẽ tìm hiểu thêm về chức năng này (và đôi khi là một đối tượng) trong giây lát

Nắm bắt hay không nắm bắt, đó là câu hỏi

Đối số cuối cùng được tạo thành từ đúng hoặc sai. Để giúp chúng tôi hiểu đầy đủ ý nghĩa của việc chỉ định một trong hai giá trị, chúng tôi sẽ phải đợi cho đến phần hướng dẫn Tạo bọt và chụp sự kiện trong JavaScript. Hướng dẫn này là phần tiếp theo trong loạt bài này, vì vậy chúng tôi sẽ không chờ đợi lâu

Để tất cả chúng cùng nhau

Bây giờ chúng ta đã thấy chức năng addEventListener và nó trông như thế nào, hãy kết hợp tất cả với một ví dụ về chức năng này được trình bày đầy đủ

document.addEventListener("click", changeColor, false);

AddEventListener của chúng tôi trong ví dụ này được đính kèm với đối tượng tài liệu. Khi một sự kiện nhấp chuột được nghe lỏm, nó sẽ gọi hàm changeColor (còn gọi là trình xử lý sự kiện) để phản ứng với sự kiện. Điều này giúp chúng ta chuẩn bị tốt cho phần tiếp theo, đó là tất cả về phản ứng với các sự kiện

2. Phản ứng với sự kiện

Như chúng ta đã thấy trong phần trước, việc lắng nghe các sự kiện được xử lý bởi addEventListener. Việc cần làm sau khi một sự kiện bị nghe lỏm được xử lý bởi trình xử lý sự kiện. Tôi đã không nói đùa khi tôi đã đề cập trước đó rằng một trình xử lý sự kiện không gì khác hơn là một hàm hoặc đối tượng.

function normalAndBoring() {
    // I like hiking and puppies and other stuff!
}

Điểm khác biệt duy nhất giữa một hàm thông thường và một hàm được chỉ định là trình xử lý sự kiện là hàm xử lý sự kiện của chúng ta được gọi cụ thể theo tên trong lệnh gọi addEventListener (và nhận một đối tượng Sự kiện làm đối số của nó)

document.addEventListener("click", changeColor, false);

function changeColor(event) {
  // I am important!!!
}

Bất kỳ mã nào chúng tôi đặt bên trong trình xử lý sự kiện của mình sẽ thực thi khi sự kiện mà hàm addEventListener của chúng tôi quan tâm bị nghe lén

Một ví dụ đơn giản

Cách tốt nhất để hiểu những gì chúng ta đã học được cho đến nay là xem tất cả những điều này hoạt động hoàn toàn. Để chơi cùng, hãy thêm đánh dấu và mã sau vào tài liệu HTML

  Click Anywhere!



  

Nếu chúng tôi xem trước tài liệu của mình trong trình duyệt, ban đầu chúng tôi sẽ chỉ thấy một trang trống

Tuy nhiên, mọi thứ sẽ thay đổi khi bạn nhấp vào bất kỳ đâu trên trang. Khi bạn đã hoàn thành nhấp chuột của mình (còn gọi là nhả chuột), nền trang của bạn sẽ thay đổi từ màu trắng sang màu vàng

Lý do tại sao ví dụ này thực hiện những gì nó làm nằm trong mã của chúng tôi

document.addEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

Cuộc gọi addEventListener giống với những gì chúng ta đã thấy trước đó, vì vậy hãy bỏ qua cuộc gọi đó. Thay vào đó, hãy chú ý đến trình xử lý sự kiện changeColor

document.addEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

Hàm này được gọi khi sự kiện nhấp chuột trên tài liệu được nghe lỏm. Khi hàm này được gọi, nó đặt màu nền của phần tử body thành màu vàng. Liên kết điều này trở lại ngay từ đầu khi chúng tôi khái quát cách thức hoạt động của các ứng dụng, đây là ví dụ này trông như thế nào

Nếu tất cả những điều này hoàn toàn có ý nghĩa với bạn, thì thật tuyệt. Bạn vừa tìm hiểu về một trong những khái niệm quan trọng nhất mà bạn sẽ gặp phải. Chúng tôi vẫn chưa hoàn thành. Chúng tôi đã bỏ qua trình xử lý sự kiện hơi quá dễ dàng, vì vậy, hãy truy cập thêm một lần nữa

Đối số sự kiện và loại sự kiện

Trình xử lý sự kiện của chúng tôi không chỉ được gọi khi một sự kiện bị người nghe sự kiện nghe thấy. Nó cũng cung cấp quyền truy cập vào đối tượng sự kiện cơ bản như một phần của đối số của nó. Để truy cập đối tượng sự kiện này một cách dễ dàng, chúng ta cần sửa đổi chữ ký xử lý sự kiện của mình để hỗ trợ đối số này

Dưới đây là một ví dụ trong đó chúng tôi chỉ định tên sự kiện để chỉ các đối số sự kiện của chúng tôi

function myEventHandler(event) {
    // event handlery stuff
}

Tại thời điểm này, trình xử lý sự kiện của chúng tôi vẫn là một chức năng nhàm chán đơn giản. Nó chỉ là một hàm nhận một đối số. đối số sự kiện. Chúng ta có thể sử dụng bất kỳ mã định danh hợp lệ nào cho đối số, nhưng tôi có xu hướng sử dụng sự kiện hoặc chỉ e vì đó là điều mà tất cả những đứa trẻ tuyệt vời đều làm. Không có gì sai về mặt kỹ thuật khi xác định sự kiện của chúng tôi như sau

________số 8

Chi tiết quan trọng là đối số sự kiện trỏ đến một đối tượng sự kiện và đối tượng này được chuyển vào như một phần của quá trình kích hoạt sự kiện. Có một lý do tại sao chúng ta đang chú ý đến những gì có vẻ như là một sự xuất hiện bình thường và nhàm chán. Đối tượng sự kiện này chứa các thuộc tính có liên quan đến sự kiện đã được kích hoạt. Một sự kiện được kích hoạt bởi một lần nhấp chuột sẽ có các thuộc tính khác khi so sánh với một sự kiện được kích hoạt bởi một lần nhấn phím trên bàn phím, tải trang, hoạt ảnh, v.v. Hầu hết các sự kiện sẽ có hành vi chuyên biệt riêng mà chúng tôi sẽ dựa vào và đối tượng sự kiện là cửa sổ của chúng tôi vào tất cả tính duy nhất đó

Mặc dù có nhiều sự kiện và đối tượng sự kiện kết quả mà chúng ta có thể nhận được, vẫn có một số thuộc tính phổ biến. Điểm chung này có thể thực hiện được vì tất cả các đối tượng sự kiện đều được lấy từ loại Sự kiện cơ sở (về mặt kỹ thuật là Giao diện). Một số thuộc tính phổ biến từ loại Sự kiện mà chúng tôi sẽ sử dụng là

1. Mục tiêu hiện tại
2. Mục tiêu
3. ngăn chặn Mặc định
4. ngừng lan truyền
5. loại

Để hiểu đầy đủ tác dụng của những thuộc tính này, chúng ta cần tìm hiểu sâu hơn một chút về sự hiểu biết của mình về các sự kiện. Chúng tôi chưa có, vì vậy chỉ cần biết rằng các tài sản này tồn tại. Chúng ta sẽ sớm thấy chúng thực sự trong các hướng dẫn tiếp theo

Xóa một Event Listener

Đôi khi, chúng ta sẽ cần xóa trình xử lý sự kiện khỏi phần tử. Cách chúng ta làm điều đó là sử dụng kẻ thù không đội trời chung của addEventListener, hàm removeEventListener

something.removeEventListener(eventName, eventHandler, false);

Như chúng ta có thể thấy, hàm này lấy chính xác loại đối số là hàm addEventListener. Lý do cho điều đó là đơn giản. Khi chúng tôi lắng nghe một sự kiện trên một phần tử hoặc đối tượng, JavaScript sử dụng tên sự kiện, eventHandler và giá trị đúng/sai để xác định duy nhất trình xử lý sự kiện đó. Để xóa trình lắng nghe sự kiện này, chúng ta cần chỉ định chính xác các đối số giống nhau

Đây là một ví dụ

document.addEventListener("click", changeColor, false);

0

Trình xử lý sự kiện mà chúng tôi đã thêm trong dòng đầu tiên bị vô hiệu hóa hoàn toàn bởi lệnh gọi removeEventListener trong dòng thứ 2 được đánh dấu. Nếu lệnh gọi removeEventListener sử dụng bất kỳ đối số nào khác với đối số được chỉ định với lệnh gọi addEventListener tương ứng, thì tác động của nó sẽ bị bỏ qua và quá trình lắng nghe sự kiện sẽ tiếp tục

Phần kết luận

Chà, đó là tất cả những gì cần để giới thiệu về các sự kiện. Chỉ cần nhớ rằng chúng ta có hàm addEventListener cho phép chúng ta đăng ký một hàm xử lý sự kiện. Chức năng xử lý sự kiện này sẽ được gọi khi sự kiện mà trình xử lý sự kiện của chúng tôi đang lắng nghe bị kích hoạt. Mặc dù chúng tôi đã đề cập đến một số chủ đề khác, nhưng chúng sẽ có ý nghĩa hơn khi chúng tôi xem xét chúng trong bối cảnh các chủ đề liên quan đến sự kiện nâng cao hơn mà chúng tôi sẽ sớm xem xét

Khi bạn đã sẵn sàng, tôi khuyên bạn nên tìm hiểu thêm về Bắt và tạo bong bóng sự kiện, Sự kiện chuột trong JavaScript hoặc Sự kiện bàn phím trong JavaScript

Các loại sự kiện trong JavaScript là gì?

Sự kiện giải thích bất kỳ năm JavaScript nào là gì?

sự kiện trong chức năng sự kiện là gì?

Sự kiện có phải là từ khóa trong JavaScript không?