MooTools - การจัดการเหตุการณ์
เช่นเดียวกับ Selectors การจัดการเหตุการณ์เป็นแนวคิดที่สำคัญของ MooTools แนวคิดนี้ใช้เพื่อสร้างเหตุการณ์และการดำเนินการสำหรับเหตุการณ์ เราต้องเข้าใจถึงการกระทำและผลกระทบของมันด้วย ให้เราลองใช้เหตุการณ์สองสามเหตุการณ์ในบทนี้
คลิกซ้ายเพียงครั้งเดียว
เหตุการณ์ที่พบบ่อยที่สุดในการพัฒนาเว็บคือคลิกซ้ายครั้งเดียว ตัวอย่างเช่นไฮเปอร์ลิงก์จะจดจำเหตุการณ์การคลิกเพียงครั้งเดียวและนำคุณไปยังองค์ประกอบ DOM อื่น ขั้นตอนแรกคือการเพิ่มเหตุการณ์การคลิกในองค์ประกอบ DOM ให้เราใช้ตัวอย่างที่เพิ่มเหตุการณ์การคลิกลงในปุ่ม เมื่อคุณคลิกที่ปุ่มนั้นก็จะแสดงข้อความ
ตัวอย่าง
<!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>คุณจะได้รับผลลัพธ์ต่อไปนี้ -
เอาต์พุต
เมื่อคุณคลิกที่ปุ่มคุณจะได้รับข้อความต่อไปนี้ -
This button element recognizes the click eventMouse Enter และ Mouse Leave
Mouse Enter และ Mouse Leave เป็นเหตุการณ์ที่พบบ่อยที่สุดในการจัดการเหตุการณ์ การดำเนินการจะถูกนำไปใช้ตามตำแหน่งของเมาส์ หากตำแหน่งของเมาส์ถูกป้อนเข้าไปในองค์ประกอบ DOM ก็จะใช้การกระทำเดียว หากออกจากพื้นที่องค์ประกอบ DOM ก็จะใช้การดำเนินการอื่น
ให้เรายกตัวอย่างที่อธิบายวิธีการทำงานของเมาส์ Enter ดูรหัสต่อไปนี้
ตัวอย่าง
<!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>คุณจะได้รับผลลัพธ์ต่อไปนี้ -
เอาต์พุต
หากคุณวางตัวชี้เมาส์ไว้ที่ปุ่มคุณจะได้รับข้อความต่อไปนี้
Recognizes the mouse enter eventให้เรานำตัวอย่างที่อธิบายว่าเหตุการณ์การปล่อยเมาส์ทำงานอย่างไร ดูรหัสต่อไปนี้
ตัวอย่าง
<!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>คุณจะได้รับผลลัพธ์ต่อไปนี้ -
เอาต์พุต
หากคุณวางตัวชี้เมาส์ไว้ที่ปุ่มคุณจะได้รับข้อความต่อไปนี้
Recognizes the mouse leave eventลบเหตุการณ์
วิธีนี้ใช้เพื่อลบเหตุการณ์ การลบเหตุการณ์นั้นง่ายพอ ๆ กับการเพิ่มเหตุการณ์และเป็นไปตามโครงสร้างเดียวกัน ดูไวยากรณ์ต่อไปนี้
ไวยากรณ์
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);การกดแป้นพิมพ์เป็นอินพุต
MooTools สามารถรับรู้การกระทำของคุณ - ประเภทของอินพุตที่คุณให้ผ่านองค์ประกอบ DOM โดยใช้ไฟล์keydown คุณสามารถอ่านแต่ละคีย์จากองค์ประกอบ DOM ประเภทอินพุต
ให้เรายกตัวอย่างในนั้นมีองค์ประกอบพื้นที่ข้อความ ตอนนี้ให้เราเพิ่มเหตุการณ์คีย์ดาวน์ลงในพื้นที่ข้อความซึ่งเมื่อใดก็ตามที่พื้นที่ข้อความรู้จักที่เก็บคีย์ใด ๆ ก็จะตอบกลับด้วยข้อความแจ้งเตือนทันที ดูรหัสต่อไปนี้
ตัวอย่าง
<!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>คุณจะได้รับผลลัพธ์ต่อไปนี้ -
เอาต์พุต
พยายามป้อนบางสิ่งลงในพื้นที่ข้อความ คุณจะพบกล่องแจ้งเตือนพร้อมกับข้อความต่อไปนี้
This textarea can now recognize keystroke valueลองเพิ่มข้อความลงในตัวอย่างเดียวกับที่อ่านค่าจากพื้นที่ข้อความเมื่อคุณป้อนเข้าไป เป็นไปได้โดยใช้event.keyฟังก์ชั่นกับเหตุการณ์ ดูรหัสต่อไปนี้
ตัวอย่าง
<!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>คุณจะได้รับผลลัพธ์ต่อไปนี้ -
เอาต์พุต
พยายามป้อนข้อความในพื้นที่ข้อความ คุณจะถูกนำไปที่กล่องแจ้งเตือนพร้อมกับค่าที่คุณป้อนลงในพื้นที่ข้อความ