Sự miêu tả. Liên kết trình xử lý sự kiện với sự kiện JavaScript "nhấp chuột" hoặc kích hoạt sự kiện đó trên một phần tử
đã thêm phiên bản. 1. 0 . nhấp chuột [trình xử lý]
xử lý
Loại. Hàm[ Sự kiện eventObject ]
Một chức năng để thực thi mỗi khi sự kiện được kích hoạt
đã thêm phiên bản. 1. 4. 3 . nhấp chuột [ [eventData ], trình xử lý ]
dữ liệu sự kiện
Loại. Bất cứ điều gì
Một đối tượng chứa dữ liệu sẽ được chuyển đến trình xử lý sự kiện
xử lý
Loại. Hàm[ Sự kiện eventObject ]
Một chức năng để thực thi mỗi khi sự kiện được kích hoạt
đã thêm phiên bản. 1. 0 . nhấp []
Chữ ký này không chấp nhận bất kỳ đối số
Phương pháp này là một phím tắt cho
5 trong hai biến thể đầu tiên và
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
6 trong biến thể thứ ba. Sự kiện
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
7 được gửi đến một phần tử khi con trỏ chuột ở trên phần tử đó và nhấn và thả nút chuột. Bất kỳ phần tử HTML nào cũng có thể nhận sự kiện này. Ví dụ, hãy xem xét HTML
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
1
2
3
4
5
6
Click here
Trigger the handler
Trình xử lý sự kiện có thể được liên kết với bất kỳ
8
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
1
2
3
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
Bây giờ nếu chúng ta nhấp vào phần tử này, cảnh báo sẽ được hiển thị
xử lý cho. click[] được gọi
Chúng tôi cũng có thể kích hoạt sự kiện khi một phần tử khác được nhấp vào
1
2
3
$[ "#other" ].click[function[] {
$[ "#target" ].click[];
}];
Sau khi mã này thực thi, nhấp vào Kích hoạt trình xử lý cũng sẽ cảnh báo thông báo
Sự kiện
7 chỉ được kích hoạt sau chuỗi sự kiện chính xác này
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
- Nhấn nút chuột trong khi con trỏ nằm bên trong phần tử
- Nút chuột được thả ra khi con trỏ ở bên trong phần tử
Đây thường là trình tự mong muốn trước khi thực hiện một hành động. Nếu điều này không bắt buộc, sự kiện
0 hoặc
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
1 có thể phù hợp hơn
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
Bạn có thể thêm một lớp CSS hoặc thêm trực tiếp một hoặc nhiều thuộc tính CSS vào một nút đã chọn để kích hoạt
- Thêm màu nền vào nút đã chọn
- Thêm một lớp CSS vào một nút đã chọn
Thêm màu nền vào nút đã chọn
Khi bạn muốn thêm một số kiểu CSS vào nút đã chọn/được nhấp trong JavaScript để kích hoạt nút đó,
For Loop rất có thể sẽ là lựa chọn đầu tiên trong tâm trí chúng ta
Nhưng, bạn hoàn toàn không cần sử dụng vòng lặp
Hãy xem làm thế nào để làm điều đó trong hành động
Tạo các phần tử nút HTML
Đây là một thẻ div đơn giản với một trình bao bọc id
Nó có năm phần tử nút HTML trong đó
Không có gì lạ mắt
1
2
3
4
5
Đính kèm các sự kiện nhấp chuột vào các phần tử nút HTML
• Trước tiên, hãy thêm trình xử lý sự kiện nhấp vào tất cả các thành phần bên trong div
const wrapper = document.getElementById["wrapper"];
wrapper.addEventListener['click',[e] => {
}]
• Kiểm tra xem mục được nhấp có phải là nút bên trong chức năng gọi lại sự kiện nhấp không
const isButton = e.target.nodeName === 'BUTTON';
• Nếu mục được nhấp KHÔNG phải là nút, hãy thoát chức năng gọi lại sự kiện nhấp
Vì vậy, nó sẽ không thực thi thêm bất cứ điều gì nếu đó không phải là một nút bấm
________số 8Thêm thuộc tính CSS vào nút được nhấp
Thêm màu nền vào nút được chọn/nhấp bằng cách truy cập đối tượng sự kiện được chuyển vào chức năng gọi lại sự kiện nhấp
e.target.style.background = 'red';
Mã này hoạt động tốt cho đến khi nhấp vào nút thứ hai
Sau đó, cả nút được nhấp lần đầu tiên và lần thứ hai sẽ có màu nền đỏ để biểu thị trạng thái hoạt động
Nhưng những gì chúng tôi muốn là chỉ thêm màu nền cho mục hiện được nhấp và xóa nó khỏi mục đã chọn trước đó
Để làm được điều đó, chúng ta cần chụp nút đã chọn/đã nhấp trước đó và xóa màu nền khỏi nút đó
Chụp mục đã chọn/đã nhấp trước đó
• Khai báo một hằng gọi là prevButton bên ngoài sự kiện nhấn nút
• Đặt giá trị ban đầu của nó thành null
0
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
• Bây giờ hãy kiểm tra xem có nút nào được thêm vào hằng số prevButton không
Nếu có, hãy xóa màu nền bằng cách đặt giá trị của nó thành không
1
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
• Cuối cùng, thêm mục hiện được nhấp vào prevButton
Bằng cách này, prevButton không có bất kỳ đối tượng nút nào được nhấp trước đó khi người dùng nhấp vào bất kỳ nút nào lần đầu tiên
Và nó sẽ khả dụng khi người dùng nhấp vào bất kỳ nút nào lần thứ hai trở đi
2
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
Thêm một lớp CSS vào nút đã chọn/được nhấp
• Việc chỉ thêm một thuộc tính CSS qua JavaScript sẽ gặp một số hạn chế
Chúng tôi luôn khuyên bạn nên tạo riêng quy tắc CSS, chuyển đổi nó bên trong JavaScript
• Định nghĩa một quy tắc CSS được gọi là. hoạt động với một nền tài sản duy nhất. màu đỏ
3
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
• Thêm các. lớp hoạt động cho đối tượng nút hiện được nhấp là e. Mục tiêu
• Gỡ bỏ. lớp tích cực từ prevButton
4
$[ "#target" ].click[function[] {
alert[ "Handler for .click[] called." ];
}];
Nó sẽ hoạt động chính xác như trước đây, nhưng lần này chúng tôi có nhiều quyền kiểm soát hơn trong việc tạo kiểu cho trạng thái nút hoạt động theo bất kỳ cách nào chúng tôi muốn bằng cách sử dụng. lớp năng động