MooTools - Xử lý sự kiện
Giống như Bộ chọn, Xử lý sự kiện cũng là một khái niệm thiết yếu của MooTools. Khái niệm này được sử dụng để tạo các sự kiện và hành động cho các sự kiện. Chúng ta cũng cần nắm được các hành động và tác dụng của chúng. Hãy để chúng tôi thử một vài sự kiện trong chương này.
Một cú nhấp chuột trái
Sự kiện phổ biến nhất trong phát triển web là Nhấp chuột trái duy nhất. Ví dụ: Siêu liên kết nhận ra một sự kiện nhấp chuột duy nhất và đưa bạn đến một phần tử DOM khác. Bước đầu tiên là thêm một sự kiện nhấp chuột vào phần tử DOM. Hãy để chúng tôi lấy một ví dụ thêm sự kiện nhấp chuột vào nút. Khi bạn bấm vào nút đó, nó sẽ hiển thị một thông báo.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//put whatever you want to happen in here
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Đầu ra
Khi bạn nhấp vào nút, bạn sẽ nhận được thông báo sau:
This button element recognizes the click eventChuột vào và chuột rời khỏi
Chuột Nhập và Di chuột là những sự kiện phổ biến nhất trong xử lý sự kiện. Hành động được áp dụng dựa trên vị trí của chuột. Nếu vị trí của chuột là NHẬP vào phần tử DOM, thì nó sẽ áp dụng một hành động. Nếu nó rời khỏi vùng phần tử DOM, thì nó sẽ áp dụng một hành động khác.
Chúng ta hãy lấy một ví dụ giải thích cách hoạt động của sự kiện Chuột Enter. Hãy xem đoạn mã sau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse enter event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Đầu ra
Nếu bạn giữ con trỏ chuột trên nút, bạn sẽ nhận được thông báo sau.
Recognizes the mouse enter eventHãy để chúng tôi lấy một ví dụ giải thích cách hoạt động của sự kiện Chuột rời đi. Hãy xem đoạn mã sau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse leave event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Đầu ra
Nếu bạn giữ con trỏ chuột trên nút, bạn sẽ nhận được thông báo sau.
Recognizes the mouse leave eventXóa sự kiện
Phương pháp này được sử dụng để loại bỏ một sự kiện. Xóa một sự kiện cũng dễ dàng như thêm một sự kiện và nó tuân theo cùng một cấu trúc. Hãy xem cú pháp sau.
Cú pháp
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Tổ hợp phím làm đầu vào
MooTools có thể nhận ra hành động của bạn - loại đầu vào bạn đã cung cấp thông qua phần tử DOM. Bằng cách sử dụngkeydown , bạn có thể đọc từng khóa từ phần tử DOM loại đầu vào.
Hãy để chúng tôi lấy một ví dụ trong đó, có một phần tử vùng văn bản. Bây giờ chúng ta hãy thêm một sự kiện keydown vào vùng văn bản mà bất cứ khi nào vùng văn bản nhận ra bất kỳ kho khóa nào, nó sẽ phản hồi bằng một thông báo cảnh báo ngay lập tức. Hãy xem đoạn mã sau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Đầu ra
Cố gắng nhập một cái gì đó vào vùng văn bản. Bạn sẽ tìm thấy một hộp cảnh báo cùng với thông báo sau.
This textarea can now recognize keystroke valueCố gắng thêm một số văn bản vào cùng một ví dụ đọc giá trị từ vùng văn bản khi bạn nhập vào nó. Nó có thể bằng cách sử dụngevent.keychức năng với sự kiện. Hãy xem đoạn mã sau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Đầu ra
Cố gắng nhập văn bản vào vùng văn bản. Bạn sẽ được dẫn đến một hộp cảnh báo cùng với giá trị bạn đã nhập vào vùng văn bản.