อินพุตเหตุการณ์ Html เหตุการณ์แบบฟอร์ม jQuery - เหตุการณ์การย้ายเมาส์

ในบทความนี้ เราจะดูวิธีการที่ไลบรารี jQuery มอบให้กับนักพัฒนาเว็บในการจัดการเหตุการณ์

เพื่อร่วมงานอีเว้นท์ใน สคริปต์จาวาสคริปต์เบราว์เซอร์มี API (เช่น ฟังก์ชัน addEventListener) เมื่อใช้ฟังก์ชันนี้ คุณสามารถระบุโค้ดที่จะดำเนินการเมื่อเบราว์เซอร์สำหรับองค์ประกอบที่ระบุสร้างเหตุการณ์ที่ระบุได้

ก่อนที่คุณจะสามารถเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบได้ คุณต้องได้รับองค์ประกอบเหล่านั้นก่อน คุณสามารถเรียนรู้วิธีค้นหาองค์ประกอบที่คุณต้องการบนหน้าได้ในบทความ jQuery - การเลือกองค์ประกอบ

ใน jQuery คุณสามารถแนบเหตุการณ์ (ตัวฟังเหตุการณ์) เข้ากับองค์ประกอบเฉพาะโดยใช้ฟังก์ชัน on และ one เช่นเดียวกับรายการชวเลข

// ฟังก์ชั่นบน .on(เหตุการณ์,ตัวจัดการ); // ฟังก์ชั่นหนึ่ง .one(เหตุการณ์,ตัวจัดการ); // events - เหตุการณ์หรือรายการเหตุการณ์ที่คั่นด้วยช่องว่าง เมื่อจำเป็นต้องดำเนินการกับตัวจัดการ (ตัวจัดการ) // ตัวจัดการ - ฟังก์ชัน (ตัวจัดการเหตุการณ์) // คำอธิบายสั้น ๆ ของฟังก์ชันบน .event(ตัวจัดการ); // เหตุการณ์ - ชื่อของเหตุการณ์ (สามารถใช้เพื่อประมวลผลเฉพาะเหตุการณ์ที่มีการสร้างรายการสั้น ๆ ใน jQuery)

ฟังก์ชันหนึ่งแตกต่างจากฟังก์ชัน on เพียงตรงที่จะดำเนินการจัดการเพียงครั้งเดียวเมื่อมีเหตุการณ์ที่ระบุเกิดขึ้น

ตัวอย่างเช่น ใช้ฟังก์ชัน on เพื่อเพิ่มเหตุการณ์การคลิกสำหรับองค์ประกอบทั้งหมดที่มีคลาส btn:

// ใช้ฟังก์ชันที่ไม่ระบุชื่อเป็นตัวจัดการ $(".btn").on("click", function() ( // การกระทำที่จะดำเนินการเมื่อมีเหตุการณ์เกิดขึ้น... console.log($(this) ข้อความ( )); )); // ใช้ฟังก์ชันปกติเป็นตัวจัดการ var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("click", myFunction);

โค้ดข้างต้นเขียนโดยใช้ชวเลขฟังก์ชัน on:

$(".btn").click(function() ( // การกระทำที่จะดำเนินการเมื่อมีเหตุการณ์เกิดขึ้น... console.log($(this).text()); ));

เมื่อคุณประมวลผลกิจกรรม คุณจะพบข้อมูลเพิ่มเติมเกี่ยวกับกิจกรรมนั้นได้ การถ่ายโอนข้อมูลนี้ ได้แก่ ออบเจ็กต์เหตุการณ์ไปยังตัวจัดการเหตุการณ์จะดำเนินการผ่านอาร์กิวเมนต์แรกเสมอ

$("#demo").on("click", function(e)( // e เป็นวัตถุเหตุการณ์ที่มีข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ที่เกิดขึ้น // คุณสมบัติที่ใช้บ่อยของวัตถุเหตุการณ์ e.preventDefault(); / / ยกเลิกการกระทำตามค่าเริ่มต้น e.stopPropagation(); //หยุดเหตุการณ์ที่เกิดขึ้นต่อไป // e.type – รับประเภทของเหตุการณ์ // e.target – ลิงก์ไปยังองค์ประกอบที่เกิดเหตุการณ์ขึ้น // e.currentTarget – ลิงก์ไปยังองค์ประกอบปัจจุบัน (ซึ่งตัวจัดการถูกเรียกใช้) คุณสมบัตินี้มักจะเท่ากับฟังก์ชัน this // e.currentTarget === this // e.ซึ่งเป็นรหัสของคีย์ (สำหรับเมาส์) , รหัสของปุ่มหรือสัญลักษณ์ (สำหรับแป้นพิมพ์) //e.pageX, e.pageY – พิกัดเคอร์เซอร์สัมพันธ์กับมุมซ้ายบนของเอกสาร));

ใน jQuery หลังจากระบุชื่อเหตุการณ์แล้ว คุณสามารถระบุเนมสเปซเพิ่มเติมได้

ตัวอย่างเช่น:

// คลิกเหตุการณ์ในเนมสเปซก่อน $("#demo").on("click.first",function())( console.log("1 click event handler"); )); // คลิกเหตุการณ์ในเนมสเปซที่สอง $("#demo").on("click.second",function())( console.log("2 click event handler"); ));

เนมสเปซเป็นสิ่งที่สะดวกมาก ตัวอย่างเช่น ใช้เมื่อคุณต้องการทริกเกอร์เหตุการณ์ไม่ใช่ทั้งหมด แต่เฉพาะเหตุการณ์ที่มีชื่อเฉพาะเท่านั้น

// ทริกเกอร์เหตุการณ์การคลิกในเนมสเปซแรก $("#demo").trigger("click.first"); // ทริกเกอร์เหตุการณ์การคลิกในเนมสเปซที่สอง $("#demo").trigger("click.second");

นอกจากนี้ยังทำให้การลบกิจกรรมบางอย่างเป็นเรื่องง่าย:

//ลบตัวจัดการเหตุการณ์คลิกในเนมสเปซแรก $("#demo").off("click.first"); //ลบตัวจัดการเหตุการณ์คลิกในเนมสเปซที่สอง $("#demo").off("click.second");

คำอธิบายและตัวอย่างการใช้ฟังก์ชันทริกเกอร์และปิดมีการกล่าวถึงในบทความด้านล่างเล็กน้อย

หากจำเป็น คุณสามารถส่งข้อมูลไปยังตัวจัดการเหตุการณ์ได้ (โดยระบุอาร์กิวเมนต์เพิ่มเติมในฟังก์ชันเปิด) ข้อมูลที่ส่งผ่านภายในตัวจัดการจะเข้าถึงได้ผ่านวัตถุเหตุการณ์

ทำเช่นนี้ (ตัวอย่าง):

แสดงเนื้อหา 1 แสดงเนื้อหา 2 ... $("#showContent1").on("click", (title:"Title 1", เนื้อหา: "Content 1..."), function(e)( var output = ""+e.data.title+": " + e.data.content; $("#content").html(เอาต์พุต )); $("#showContent2").on("คลิก", ​​(หัวข้อ:"หัวข้อ 2", เนื้อหา: "เนื้อหา 2..."), function(e)( var output = ""+e.data.title+" : " + e.data.content; $("#content").html(output); ));

ตัวอย่างการใช้ตัวจัดการตัวเดียวสำหรับหลายเหตุการณ์ (2 หรือมากกว่า):

$("#id").on("keyup keypress blur change", function(e) ( console.log(e.type); // ประเภทเหตุการณ์ )); // หรือ var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);

แต่ละเหตุการณ์มีหน้าที่ของตัวเอง:

$("#id").on(( mouseenter: function() ( // mouseenter event handler... ), mouseleave: function() ( // mouseleave event handler... ), คลิก: function() ( / / คลิกตัวจัดการเหตุการณ์... ) ));

ตัวอย่างของการใช้ตัวจัดการหลายตัว (ฟังก์ชั่น) สำหรับหนึ่งเหตุการณ์ใน jQuery:

$("#demo").click(function())( console.log("1 คลิกตัวจัดการเหตุการณ์"); )); $("#demo").click(function())( console.log("2 คลิกตัวจัดการเหตุการณ์"); ));

ตัวอย่างเช่น คุณสามารถดูได้ว่าเหตุการณ์ลำดับใดที่จะดำเนินการดังนี้:

Var eventList = $._data($("#demo"), "events"); console.log(รายการกิจกรรม);

มี 2 ​​วิธีในการเรียกเหตุการณ์จากโค้ดใน jQuery:

• trigger - ทริกเกอร์เหตุการณ์ที่ระบุในองค์ประกอบ
• triggerHandler - เรียกใช้ตัวจัดการเหตุการณ์ แต่เหตุการณ์นั้นไม่เกิดขึ้น

กระบวนการเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบมักจะทำหลังจากโหลดเพจแล้ว เช่น เมื่อโครงสร้าง DOM ของเอกสารได้ถูกสร้างขึ้นแล้ว มิฉะนั้น เมื่อเขียนตัวจัดการ คุณอาจเข้าถึงองค์ประกอบที่ยังไม่ได้อยู่บนเพจได้

รายการที่สั้นที่สุดสำหรับเหตุการณ์การโหลดหน้าใน jQuery มีลักษณะดังนี้:

$(function())( // การกระทำที่จะดำเนินการหลังจากโหลดเอกสาร... ));

แต่คุณสามารถใช้สัญกรณ์ที่ยาวกว่านี้ได้:

$(document).ready(function())( // การดำเนินการที่ต้องดำเนินการหลังจากโหลดเอกสาร... ));

เบราว์เซอร์จะสร้างเหตุการณ์โหลดบนองค์ประกอบเมื่อมีการโหลดองค์ประกอบที่ซ้อนกันและองค์ประกอบที่ซ้อนกันทั้งหมดแล้ว เหตุการณ์นี้มีไว้สำหรับองค์ประกอบที่มี URL เท่านั้น: image , script , iframe และ window

ตัวอย่างเช่น เรียกใช้ฟังก์ชันเมื่อโหลดหน้าเว็บเสร็จสมบูรณ์แล้ว (รวมถึงรูปภาพด้วย):

$(window).on("load", function() ( // การกระทำหลังจากโหลดเพจเต็มแล้ว... ));

ตัวอย่างเช่นให้แสดงข้อความไปยังคอนโซลเมื่อใด รูปภาพที่ระบุจะถูกโหลด:

... $("#image").on("load", function() ( console.log("Image Loaded"); ));

เหตุการณ์ที่ใช้บ่อยที่สุดใน jQuery เพื่อติดตามการกระทำของเมาส์คือ:

• เลื่อนเมาส์
• เลื่อนเมาส์
• คลิก
• เลื่อนเมาส์
• ล้อ
• โฮเวอร์
• เมาส์เข้า
• วางเมาส์เหนือ
• ปล่อยเมาส์
• เลื่อนเมาส์ออก

เหตุการณ์การคลิกเป็นเหตุการณ์ที่ซับซ้อน ซึ่งเกิดขึ้นหลังจากเหตุการณ์การเลื่อนเมาส์และเลื่อนเมาส์เริ่มทำงาน เหตุการณ์การเลื่อนเมาส์เกิดขึ้นเมื่อตัวชี้อยู่เหนือองค์ประกอบและกดปุ่มเมาส์ เหตุการณ์การเลื่อนเมาส์เกิดขึ้นเมื่อตัวชี้อยู่เหนือองค์ประกอบและปล่อยปุ่มเมาส์ เหตุการณ์การคลิกจะเกิดขึ้นเมื่อเคอร์เซอร์อยู่เหนือองค์ประกอบและกดปุ่มเมาส์แล้วปล่อย เหตุการณ์เหล่านี้สามารถรับได้โดย องค์ประกอบ HTMLส.

ตัวอย่างเช่น ลองแนบตัวจัดการกับเหตุการณ์ onclick ขององค์ประกอบหน้าต่าง เมื่อเหตุการณ์นี้เกิดขึ้น ตัวจัดการจะแสดงหมายเลขของการกดปุ่มและพิกัดของเคอร์เซอร์:

$(window).on("click", function(e) ( // จัดการเหตุการณ์การคลิก... console.log("ปุ่มกด: " + e.ซึ่ง); //1 - ปุ่มซ้าย, 2 - ปุ่มกลาง, 3 - ขวา console.log("พิกัดเคอร์เซอร์: x = " + e.pageX + " ; y = " + e.pageY); -

ตัวอย่างเช่น ลองแนบเหตุการณ์ onclick กับองค์ประกอบทั้งหมดที่มีคลาส btn:

$(".btn").on("click", function())( // รหัสสำหรับปุ่ม คลิกตัวจัดการเหตุการณ์... )); คำอธิบายสั้น ๆ ของเหตุการณ์การคลิก: $(".btn").click(function())( ... ));

ตัวอย่างเช่น มาดูกันว่าคุณสามารถซ่อนบล็อกหลังจากเหตุการณ์การคลิกได้อย่างไร:

...ซ่อนบล็อกหลังจากผ่านไป 5 วินาที... ... $(".hide-message").click(function(e)( e.preventDefault(); var _this = this; setTimeout(function())( $ ( _this).closest(".message").hide( ), 5000 ));

เหตุการณ์ที่เคอร์เซอร์ปรากฏขึ้นนั้นซับซ้อนและประกอบด้วย 2 เหตุการณ์:

• เหตุการณ์ที่เกิดขึ้น (mouseenter, mouseover);
• ออกไป (mouseave, mouseout)

เหตุการณ์ mouseenter และ mouseleave ใน jQuery แตกต่างจาก mouseover และ mouseout เพียงแต่ว่าจะไม่เกิดขึ้นเมื่อเคอร์เซอร์เข้าและออกจากองค์ประกอบภายในขององค์ประกอบ Listened ตามลำดับ กล่าวอีกนัยหนึ่ง เหตุการณ์ mouseover และ mouseout ฟองสบู่ขึ้น แต่เหตุการณ์ mouseenter และ mouseleave ไม่มี

ตัวอย่างเช่น เรามาเปลี่ยนสีของรายการเมื่อคุณเลื่อนเคอร์เซอร์ไปที่รายการนั้น:

• ปากกา
• ดินสอ
• ไม้บรรทัด

mouseenter(function())( // เมื่อป้อนองค์ประกอบ $(this).css("color", "orange"); ))

mouseleave(function())( // เมื่อออกจากองค์ประกอบ $(this).css("color","black"); ));

การกระทำเดียวกัน แต่ใช้ mouseover และ mouseout:

$("ul>li").

mouseover(function())( // เมื่อป้อนองค์ประกอบ $(this).css("color","orange"); ))

mouseout(function())( // เมื่อออกจากองค์ประกอบ $(this).css("color","black"); ));

วิธีการเหล่านี้ไม่จำเป็นต้องใช้ร่วมกัน นอกจากนี้ยังสามารถใช้แยกกันได้อีกด้วย

ตัวอย่างเช่น ลองนับจำนวนการเข้าชมองค์ประกอบเมื่อเหตุการณ์ Hover เกิดขึ้น:

จำนวน: 0 ... $("#count").mouseenter(function())( var count = parseInt($(this).find("span").text()); count++; $(this) ค้นหา ("ช่วง").ข้อความ(นับ));

แทนที่จะใช้ mouseenter และ mouseleave คุณสามารถใช้เหตุการณ์โฮเวอร์ได้

ตัวอย่างเช่น:

ตัวอย่างเช่น ลองเขียนตัวอย่างข้างต้นใหม่โดยใช้โฮเวอร์:

เมื่อใช้เหตุการณ์โฮเวอร์ใน jQuery ตัวจัดการตัวแรกจะถูกใช้เพื่อตั้งค่าการดำเนินการเมื่อเคอร์เซอร์เข้าสู่องค์ประกอบ (mouseenter) และตัวจัดการตัวที่สองจะถูกใช้เมื่อปล่อยไว้ (mouseleave)

หากคุณระบุตัวจัดการหนึ่งตัวสำหรับเหตุการณ์โฮเวอร์ มันจะถูกดำเนินการทั้งคู่เพื่อจัดการการโฮเวอร์เมาส์และการออกจากเมาส์

jQuery - เหตุการณ์การย้ายเมาส์

เหตุการณ์ mousemove จะถูกส่งไปยังองค์ประกอบเมื่อตัวชี้เมาส์เคลื่อนที่ภายในองค์ประกอบนั้น องค์ประกอบ HTML ใด ๆ สามารถรับเหตุการณ์นี้ได้< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });

เหตุการณ์นี้แตกต่างจากการเลื่อนตรงตรงที่เบราว์เซอร์สร้างขึ้นสำหรับล้อเมาส์เท่านั้น และไม่สำคัญว่าองค์ประกอบนั้นจะถูกเลื่อนหรือไม่ เช่น มันสามารถใช้กับองค์ประกอบที่มีการโอเวอร์โฟลว์เท่ากับถูกซ่อนไว้ ข้อแตกต่างอีกประการหนึ่งคือวงล้อจะถูกสร้างขึ้นก่อนการเลื่อน และการเลื่อนจะถูกสร้างขึ้นหลังจากนั้น

เมื่อกดปุ่มบนแป้นพิมพ์ เบราเซอร์จะสร้างเหตุการณ์ตามลำดับต่อไปนี้:

การกดปุ่ม -> การกดปุ่ม -> การกดปุ่ม

• กดปุ่มลง (กดปุ่มแต่ยังไม่ปล่อย)
• การกดปุ่ม (เหตุการณ์ที่สร้างขึ้นสำหรับตัวอักษร ตัวเลข และปุ่มอื่นๆ ยกเว้นปุ่มควบคุม) – มีวัตถุประสงค์เพื่อรับรหัสอักขระ (เหตุการณ์การกดปุ่มลงและปุ่มคีย์อัพช่วยให้คุณค้นหาเฉพาะรหัสของคีย์ แต่ไม่ใช่อักขระ) ;
• keyup (สร้างโดยเบราว์เซอร์เมื่อมีการปล่อยคีย์)

ตัวอย่างเช่น ลองเขียนตัวจัดการเพื่อฟังเหตุการณ์ทั้งหมดที่เกิดขึ้นเมื่อกดปุ่ม:

... $("#target").on("keydown keypress keyup", function(e) ( console.log("Event type: " + e.type); // keydown, keypress, keyup console.log( "รหัสของคีย์หรือสัญลักษณ์ที่กด: " + e.ซึ่ง); // รหัสของสัญลักษณ์ช่วยให้คุณได้รับเฉพาะ keypress console.log("Pressed ปุ่ม Alt: " + e.altKey); console.log("กดปุ่ม Ctrl: " + e.ctrlKey); console.log("กดปุ่ม Shift: " + e.shiftKey); console.log("กดปุ่ม Cmd (osMac ): " + e.metaKey); ));

ตัวอย่างที่แสดงวิธีที่คุณสามารถฟังเหตุการณ์การกดปุ่มและดูว่ามีการกดคีย์ผสมที่ระบุหรือไม่:

$(document).keypress("c", function(e) ( if(e.ctrlKey) ( console.log("กดปุ่ม Ctrl+c"); ) ));

ตัวอย่างวิธีการฟังคีย์ผสม Ctrl+Enter:

$(document).keydown(function(e) ( // รองรับ macOS X if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) ( / / การกระทำของคุณ... ))

ตัวอย่างการใช้เหตุการณ์ keydown และ keyup:

... $("#ชื่อ").

keyup(function())( $(this).css("สีพื้นหลัง, "สีชมพู"); ));

• jQuery - เหตุการณ์องค์ประกอบแบบฟอร์ม
• ใน jQuery คุณสามารถเน้นเหตุการณ์ต่อไปนี้สำหรับองค์ประกอบแบบฟอร์มและอื่น ๆ :
• โฟกัส (โฟกัส)
• เบลอ (โฟกัส)
• เปลี่ยน
• อินพุต (สำหรับองค์ประกอบแบบฟอร์มข้อความ)

เหตุการณ์โฟกัสจะถูกส่งไปยังองค์ประกอบเมื่อได้รับการโฟกัส เหตุการณ์นี้ถูกสร้างขึ้นสำหรับองค์ประกอบ input , select และ link (a href="...") รวมถึงองค์ประกอบอื่น ๆ ที่มีคุณสมบัติ tabindex โดยปกติการดึงดูดโฟกัสไปที่องค์ประกอบทำได้โดยการคลิกหรือกดปุ่ม Tab บนคีย์บอร์ด เหตุการณ์โฟกัสไม่ฟองขึ้น

นอกจากการโฟกัสแล้ว ยังมีเหตุการณ์ที่คล้ายกันอีกอย่างหนึ่ง เรียกว่า โฟกัสซิน ซึ่งแตกต่างจากโฟกัสตรงที่ฟองอากาศของเหตุการณ์นี้สามารถใช้ในการตรวจจับเหตุการณ์โฟกัสตามองค์ประกอบหลัก

เหตุการณ์เบลอจะถูกส่งไปยังองค์ประกอบเมื่อสูญเสียโฟกัส เช่นเดียวกับ focus เหตุการณ์เบลอก็มีเหตุการณ์โฟกัสที่คล้ายกัน เหตุการณ์นี้แตกต่างจากภาพเบลอตรงที่อาจทำให้เกิดฟองสบู่ได้ คุณสมบัตินี้สามารถใช้เพื่อรับได้บนองค์ประกอบหลัก ไม่ใช่แค่องค์ประกอบที่เรียกมัน (เป้าหมาย)

ตัวอย่างเช่น เมื่อองค์ประกอบ div ได้รับเหตุการณ์โฟกัส ให้ตั้งค่าพื้นหลังเป็นสีส้ม:

... $("#สาธิต").

focusin(function())( $(this).css("สีพื้นหลัง", "สีส้ม"); )) .focusout(function())( $(this).css("สีพื้นหลัง", "สืบทอด" ") ; ));

มันจะเป็นไปไม่ได้ที่จะทำสิ่งเดียวกันทุกประการโดยใช้โฟกัสและเบลอเหตุการณ์เพราะว่า พวกมันไม่ปรากฏขึ้น:

โฟกัส(ฟังก์ชั่น())( $(นี้).parent().css("สีพื้นหลัง", "สีส้ม"); )) .blur(function())( $(นี้).parent().css( "พื้นหลัง -สี", "สืบทอด");

jQuery - เปลี่ยนเหตุการณ์ เหตุการณ์การเปลี่ยนแปลงได้รับการออกแบบมาเพื่อบันทึกการเปลี่ยนแปลงค่าของอินพุต , textarea และเลือกองค์ประกอบ สำหรับองค์ประกอบที่เลือก ช่องทำเครื่องหมาย และปุ่มตัวเลือก เหตุการณ์นี้จะเกิดขึ้นทันที (นั่นคือ ทันทีที่ผู้ใช้ทำการเลือก) แต่สำหรับองค์ประกอบอื่นๆ เหตุการณ์นี้จะไม่เกิดขึ้นจนกว่าองค์ประกอบนั้นจะสูญเสียโฟกัสตัวอย่างการใช้งาน

เปลี่ยนแปลงเหตุการณ์

เพื่อตรวจสอบสถานะขององค์ประกอบช่องทำเครื่องหมาย ความพร้อมใช้งานของปุ่มจะถูกกำหนดขึ้นอยู่กับสถานะ (เลือกหรือไม่เลือก) ของช่องทำเครื่องหมาย:

ส่ง... $(function() ( $("#agree").on("change", function())( if (this.checked) ( $("#send").prop("disabled", false ); ) else ( $("#send").prop("disabled",true); ) ));

ตัวอย่างที่เราจะดูวิธีการรับองค์ประกอบที่เลือกทั้งหมดเมื่อมีการเปลี่ยนแปลง:

เขียว แดง น้ำเงิน น้ำตาล ม่วง เทา ... $("select") .change(function () ( var colours = ; $("select option:selected").each(function() ( colours.push($(this) .text()); console.log("สีที่เลือก: " + colours.join());

ตัวอย่างของการเรียกเหตุการณ์การเปลี่ยนแปลงในองค์ประกอบที่เลือกโดยทางโปรแกรม:

// list - id ขององค์ประกอบการเปลี่ยนแปลง $("#list").trigger("change"); // ชวเลข $("#list").change(); // เรียกเฉพาะตัวจัดการเหตุการณ์การเปลี่ยนแปลง $("#list").triggerHandler("change");

ตัวอย่างการใช้เหตุการณ์การเปลี่ยนแปลงเพื่อรับค่าขององค์ประกอบอินพุต:

... $(function() ( // เหตุการณ์การเปลี่ยนแปลงค่าอินพุต (เกิดขึ้นหลังจากสูญเสียโฟกัสเท่านั้น) $("input").on("change", function())( var value = $(this).val( ) ; console.log(ค่า));

แต่นอกเหนือจากเหตุการณ์การเปลี่ยนแปลงแล้ว ยังมีเหตุการณ์อินพุตสำหรับองค์ประกอบข้อความอีกด้วย เหตุการณ์นี้แตกต่างจากการเปลี่ยนแปลงตรงที่จะเกิดขึ้นทันที และไม่ใช่หลังจากที่องค์ประกอบสูญเสียโฟกัสไป

ตัวอย่างการใช้เหตุการณ์อินพุตเพื่อรับค่าขององค์ประกอบอินพุต:

$("input").on("input",function())( var value = $(this).val(); console.log(value); ));

ตัวอย่างที่แสดงวิธีหนึ่งในการรับค่าขององค์ประกอบ textarea:

... $("textarea").on("input",function())( var value = $(this).val(); console.log(value); ));

ตัวอย่างที่เราจะมาดูวิธีการใช้เหตุการณ์การเปลี่ยนแปลงเพื่อรับค่าขององค์ประกอบอินพุตที่เลือกซึ่งมีประเภทเท่ากับวิทยุ:

Windows Linux macOS ... $(function() ( $("input").on("change", function())( var value = $(this).val(); console.log(value); ) ) ; ));

เหตุการณ์ที่เลือกถูกสร้างขึ้นโดยเบราว์เซอร์เมื่อผู้ใช้ภายในองค์ประกอบการป้อนข้อมูลที่มีประเภท = "ข้อความ" หรือ textarea เลือกข้อความ

$("#target").select(function() ( console.log("เลือกตัวจัดการเหตุการณ์ที่เรียกว่า"); ));

เหตุการณ์การส่งเกิดขึ้นในองค์ประกอบเมื่อผู้ใช้พยายามที่จะส่งแบบฟอร์ม สามารถเพิ่มเหตุการณ์นี้ให้กับองค์ประกอบของแบบฟอร์มเท่านั้น

ตัวอย่างการใช้เหตุการณ์ส่ง:

... ... $("#feedback").submit(function(e) ( // ยกเลิกการส่งแบบฟอร์ม e.preventDefault(); // การดำเนินการอื่น ๆ เช่น เพื่อส่งแบบฟอร์มผ่าน ajax... ));

การเรียกแบบเป็นโปรแกรมเพื่อส่งแบบฟอร์ม:

$("#feedback").ส่ง(); $("#feedback").trigger("ส่ง");

jQuery ใช้เหตุการณ์การเลื่อนเพื่อติดตามสถานะการเลื่อน

ตัวอย่างเช่น ลองแนบฟังก์ชันเข้ากับเหตุการณ์การเลื่อนหน้าซึ่งจะแสดงองค์ประกอบที่มีคลาส scrollup หากค่าการเลื่อนมากกว่า 200px และซ่อนไว้หากค่าการเลื่อนน้อยกว่าค่านี้

// คำอธิบายสั้น ๆ ของฟังก์ชัน $(window).scroll(function() ( // การดำเนินการเมื่อเลื่อนหน้า... if ($(this).scrollTop()>200) ( $(".scrollup"). fadeIn() ; ) อื่น ๆ ( $(".scrollup").fadeOut(); ) ));

หากต้องการฟังเหตุการณ์การเปลี่ยนแปลงหน้าต่างเบราว์เซอร์ ให้ใช้การปรับขนาด:

ตัวอย่างเช่น เรามาสร้างตัวจัดการที่เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนแปลง จะแสดงความกว้างและความสูงที่ส่วนท้ายของหน้า:

$(window).resize(function() ( $("body").append("

ความกว้าง x ความสูง = " + window.innerWidth + " x " + window.innerHeight + "

องค์ประกอบบางอย่างใน HTML มีลักษณะการทำงานมาตรฐาน ตัวอย่างเช่น เมื่อผู้ใช้คลิกลิงก์ ผู้ใช้จะไปยังที่อยู่ที่ระบุในแอตทริบิวต์ href หากคุณไม่ต้องการดำเนินการนี้ คุณสามารถยกเลิกได้ หากต้องการแทนที่พฤติกรรมเริ่มต้น คุณต้องเรียกเมธอด PreventDefault ของวัตถุเหตุการณ์ในตัวจัดการเหตุการณ์

ตัวอย่างเช่น ลองยกเลิกพฤติกรรมเริ่มต้นของลิงก์ทั้งหมดบนเพจที่มีคลาสบริการ:

$("a.service").on("click",function(e)( //ยกเลิกการกระทำของเบราว์เซอร์มาตรฐาน e.preventDefault(); //การกระทำที่ลิงก์จะดำเนินการ... ));

นอกเหนือจากการยกเลิกการดำเนินการมาตรฐานแล้ว ในกลไกเหตุการณ์ยังมีสิ่งที่เดือดพล่านอีกด้วย มันอยู่ในความจริงที่ว่าเมื่อเบราว์เซอร์สร้างเหตุการณ์ มันไม่เพียงแต่สำหรับองค์ประกอบปัจจุบัน (เป้าหมาย) เท่านั้น แต่ยังรวมถึงผู้สืบทอดทั้งหมดรวมถึงพาเรนต์ด้วย:

องค์ประกอบปัจจุบัน (เป้าหมาย) -> องค์ประกอบหลักของเป้าหมาย -> องค์ประกอบปู่ย่าตายาย -> ... -> เอกสาร -> หน้าต่าง

ใน jQuery มีสถานการณ์ที่องค์ประกอบบางอย่างในห่วงโซ่ที่นำเสนอมีตัวจัดการสำหรับเหตุการณ์นี้ด้วย ซึ่งไม่จำเป็นต้องดำเนินการ และเพื่อป้องกันไม่ให้เหตุการณ์นี้แพร่กระจายไปยังองค์ประกอบนี้จึงต้องหยุดลง เมื่อต้องการทำเช่นนี้ ในตัวจัดการองค์ประกอบที่ต้องการ คุณต้องเรียกใช้เมธอด stopPropagation ของออบเจ็กต์เหตุการณ์ หลังจากเรียกเมธอดนี้แล้ว เหตุการณ์จะหยุดและจะไม่เกิดฟอง

ตัวอย่างเช่น จำเป็นที่เมื่อคุณย้ายเคอร์เซอร์ไปยังองค์ประกอบที่มีคลาส mark เนื้อหาจะกลายเป็นสีส้ม

ข้อความบางส่วน...fragment...continued... ... $(".mark").on("hover", function(e)( e.stopPropagation(); $(this).css ("color ",สีส้ม); ), function(e)( e.stopPropagation(); $(this).css("color",black); ) ));

ในกรณีนี้ หากคุณไม่ได้ระบุเมธอด stopPropagation เมื่อคุณย้ายเคอร์เซอร์ไปที่องค์ประกอบ span ด้วยคลาส mark เหตุการณ์นี้จะเกิดขึ้นไม่เพียงแต่สำหรับมันเท่านั้น แต่ยังรวมถึงองค์ประกอบพาเรนต์ทั้งหมดด้วย และในตัวอย่างนี้จะนำไปสู่ความจริงที่ว่าสีของไม่เพียงแต่ข้อความที่อยู่ในช่วงจะเปลี่ยนไป แต่ยังรวมถึงทั้งย่อหน้าด้วย

หากคุณต้องการแทนที่พฤติกรรมเริ่มต้นของเบราว์เซอร์และหยุดเหตุการณ์ไม่ให้เดือดพล่านใน jQuery แทนที่จะเรียกทั้งสองวิธีนี้ คุณสามารถคืนค่า false เป็นผลลัพธ์ของฟังก์ชันได้

$("a").on("click", function(e)( //e.preventDefault(); //e.stopPropagation(); ... return false; ));

ในการที่จะแนบเหตุการณ์เข้ากับองค์ประกอบที่ยังไม่มี คุณสามารถใช้โครงสร้างของฟังก์ชัน on ดังต่อไปนี้:

$(document).on(ชื่อเหตุการณ์, ตัวเลือก, ตัวจัดการ); // เอกสารหรือองค์ประกอบหลักอื่น ๆ ที่มีอยู่ // eventName - ชื่อของเหตุการณ์ // selector - ตัวเลือกที่กรองลูก ๆ ที่จำเป็นต้องเปิดตัวจัดการเหตุการณ์ // ตัวจัดการ - ตัวจัดการเหตุการณ์

การดำเนินการนี้สามารถทำได้เนื่องจากเหตุการณ์ปรากฏขึ้นและดังนั้นจึงเกิดขึ้นในบรรพบุรุษทั้งหมดขององค์ประกอบนี้ และออบเจ็กต์ที่เหตุการณ์ทั้งหมดบนหน้าปรากฏขึ้นคือ document ดังนั้นโดยส่วนใหญ่แล้วพวกเขาจะเลือกมัน หลังจากนี้ เมื่อทราบตัวเลือกแล้ว ฟังก์ชัน on จะสามารถเลือกองค์ประกอบต่างๆ ได้โดยทางโปรแกรม (องค์ประกอบที่ทำให้เกิดเหตุการณ์นี้ (เป้าหมาย) และบรรพบุรุษทั้งหมดรวมถึงองค์ประกอบหลัก) ที่ตรงกับองค์ประกอบนั้น จากนั้นสำหรับองค์ประกอบที่เลือกทั้งหมด ให้รันตัวจัดการที่ระบุในฟังก์ชันเปิด การดำเนินการที่การประมวลผลเหตุการณ์ถูกถ่ายโอนไปยังองค์ประกอบอื่น (บรรพบุรุษ) เรียกอีกอย่างว่ากระบวนการมอบหมายเหตุการณ์ใน jQuery

ตัวอย่างเช่น เรามาเพิ่มเหตุการณ์ให้กับองค์ประกอบที่ยังไม่ได้อยู่บนหน้า:

เพิ่มปุ่ม // เมื่อคุณคลิกที่องค์ประกอบด้วย id="addButton" ให้เพิ่มปุ่มใหม่ที่ด้านบนของหน้า $("#addButton").on("click", function(e) ( $("body ").prepend("ลบฉัน"); )); // เพิ่มเหตุการณ์คลิกที่จะถูกดำเนินการสำหรับองค์ประกอบที่ยังไม่ได้อยู่บนหน้า $(document).on("click"".deleteMe", function() ( $(this).remove(); ));

การมอบสิทธิ์สามารถใช้ได้ไม่เพียงแต่ในการประมวลผลเหตุการณ์ของออบเจ็กต์ที่สร้างขึ้นแบบไดนามิกเท่านั้น แต่ยังเพื่อหลีกเลี่ยงการแนบตัวจัดการกับแต่ละองค์ประกอบ (หากมีจำนวนมากบนเพจ)

เช่น เราจะห้ามมิให้ผู้อื่นติดตามความคิดเห็น ลิงค์ภายนอก(เราจะเปลี่ยนเส้นทางการกระทำดังกล่าวไปยังหน้าออกไป):

$(document).on("click","#comment a",function(e) ( if(!(location.hostname === this.hostname || !this.hostname.length)) ( e.preventDefault( ); location.href="away?link="+encodeURIComponent($(this).attr("href") ));

ตัวจัดการเหตุการณ์จะถูกลบออกโดยใช้วิธีการปิด นอกจากนี้ยังสามารถใช้เพื่อลบเฉพาะตัวจัดการที่เพิ่มโดยใช้เมธอด on เท่านั้น

การเรียกเมธอด off โดยไม่มีอาร์กิวเมนต์จะลบตัวจัดการเหตุการณ์ใดๆ ที่แนบมากับองค์ประกอบที่ระบุ

ตัวอย่างเช่น เรามาปิดการใช้งานตัวจัดการทั้งหมดสำหรับองค์ประกอบที่มีคลาสลิงก์:

$(".link").ปิด();

ตัวอย่างเช่น ลองลบเหตุการณ์การคลิกออกจากองค์ประกอบทั้งหมดที่มีคลาสลิงก์:

$(".link").off("link");

ตัวเลือกพิเศษ (**) ช่วยให้คุณสามารถลบเฉพาะเหตุการณ์ที่ได้รับมอบสิทธิ์ในขณะที่ยังคงรักษาเหตุการณ์ที่ไม่ได้รับมอบสิทธิ์ไว้:

$(".link").off("คลิก", ​​"**");

ลบเฉพาะเหตุการณ์ที่ได้รับมอบหมายที่ระบุ (โดยใช้ตัวเลือก):

// เพิ่มเหตุการณ์ที่ได้รับมอบหมาย $("ul").on("click", "li", function())( // ส่งออกเนื้อหาขององค์ประกอบ li ไปยังคอนโซล console.log($(this).text ()); )) ; // ลบเหตุการณ์ที่ได้รับมอบหมาย $("ul").off("click", "li");

ลบตัวจัดการเหตุการณ์คลิกที่ได้รับมอบสิทธิ์ openModal ทั้งหมดในเนมสเปซ modal สำหรับองค์ประกอบที่มีคลาส show:

$("body").on("click.modal", ".show", openModal);

jQuery ใช้วิธีการเปิดและทริกเกอร์เพื่อสร้างเหตุการณ์ที่กำหนดเอง

ลองดูวิธีการสร้างเหตุการณ์ jQuery ที่กำหนดเองโดยใช้ตัวอย่างต่อไปนี้:

เรียกไฮไลท์เหตุการณ์ที่กำหนดเอง (สีเขียว) เรียกไฮไลท์เหตุการณ์ที่กำหนดเอง (สีแดง) ... // เพิ่มเหตุการณ์ที่กำหนดเองให้กับองค์ประกอบ p ทั้งหมดที่จะเปลี่ยนสีของข้อความและเนื้อหา // รับข้อมูลที่ส่งผ่านโดย วิธีการทริกเกอร์ทำได้โดยใช้อาร์กิวเมนต์สีและชื่อ $(".module p").on("highlight", function(e, color, title) ( $(this).css("color",color); $( this).text("เรียกว่าไฮไลต์เหตุการณ์แบบกำหนดเอง " +title); // เมื่อคุณคลิกที่องค์ประกอบที่มีคลาสความสำเร็จ ให้เรียกใช้เหตุการณ์ไฮไลต์แบบกำหนดเองและส่งพารามิเตอร์ไปที่องค์ประกอบนั้น $(".success").click(function())( // โดยใช้อาร์กิวเมนต์ที่สอง เราจะส่งข้อมูลไปให้ ตัวจัดการเหตุการณ์ $(this).closest(".module").find("p").trigger("highlight",["green","(green color)"]); // เมื่อคุณคลิกที่องค์ประกอบที่มีคลาสข้อผิดพลาด ให้เรียกใช้เหตุการณ์ไฮไลต์แบบกำหนดเองและส่งพารามิเตอร์ไปที่ $(".error").click(function())( // โดยใช้อาร์กิวเมนต์ที่สอง เราจะส่งข้อมูลไปให้ ตัวจัดการเหตุการณ์ $(this).closest(".module").find("p").trigger("highlight",["red","(color red)"]);

หัวข้อก่อนหน้านี้ดูเหตุการณ์ที่เกิดขึ้นเมื่อกดปุ่ม ในหัวข้อนี้ เราจะดูเหตุการณ์ของฟอร์มอื่นๆ รวมถึงการส่งแบบฟอร์มไปยังเซิร์ฟเวอร์

เมื่อองค์ประกอบแบบฟอร์มมีโฟกัส เหตุการณ์โฟกัสจะเริ่มทำงาน และเมื่อองค์ประกอบอยู่นอกโฟกัส เหตุการณ์เบลอก็จะเริ่มดำเนินการ มาสร้างช่องป้อนข้อมูลและข้อความเอาต์พุตไปยังคอนโซลเมื่อได้รับการโฟกัสและเมื่อสูญเสียโฟกัส:

รหัส HTML:

ไม่มีประโยชน์ที่จะใช้เหตุการณ์เหล่านี้เพื่อเปลี่ยนสไตล์ขององค์ประกอบ มีคลาสหลอกที่เรียกว่าโฟกัสใน CSS เพื่อจุดประสงค์นี้

เหตุการณ์การป้อนข้อมูลเกิดขึ้นเมื่อผู้ใช้พิมพ์ข้อความลงในช่องป้อนข้อมูล โดยจะทำงานเมื่อมีการเพิ่มหรือลบอักขระแต่ละตัว รวมถึงเมื่อคัดลอกข้อความลงในช่องป้อนข้อมูล ในเบราว์เซอร์บางตัว มันทำงานผิดปกติ: ทุกครั้งที่ป้อนอักขระ เหตุการณ์เบลอจะเพิ่มขึ้น จากนั้นตัวจัดการเหตุการณ์อินพุตจะถูกดำเนินการ จากนั้นเหตุการณ์โฟกัสจะเพิ่มขึ้น หากไม่มีตัวจัดการเหตุการณ์โฟกัสและเบลอ แสดงว่าไม่มีปัญหา แต่ถ้าเป็นเช่นนั้น พวกเขาจะยิงทุกครั้งที่มีการเพิ่มสัญลักษณ์

มาเพิ่มแท็กอื่นในหน้าและแสดงค่าของมันเมื่อป้อนข้อความ:

รหัส HTML:

จาวาสคริปต์:

เหตุการณ์การส่งเกิดขึ้นเมื่อส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ ใช้เพื่อตรวจสอบข้อมูลที่ผู้ใช้กรอกลงในแบบฟอร์ม ตัวจัดการจะตรวจสอบค่าขององค์ประกอบของแบบฟอร์ม และหากป้อนค่าใดไม่ถูกต้อง แบบฟอร์มจะถูกยกเลิก ซึ่งมักจะแสดงข้อความระบุสิ่งที่ต้องแก้ไข

มาวางแท็กที่สร้างขึ้นในแบบฟอร์มและเพิ่มปุ่มเพื่อส่งแบบฟอร์ม:

รหัส HTML:

ในตัวอย่างก่อนหน้านี้ พบองค์ประกอบของฟอร์มแล้ว ดังนั้นตัวจัดการจึงไม่ค้นหาอีกครั้ง

หากกรอกแบบฟอร์มอย่างถูกต้อง กล่าวคือ ทุกฟิลด์มีอักขระอย่างน้อยสองตัว เบราว์เซอร์จะพยายามเปิดไฟล์ที่ระบุในแอตทริบิวต์ action และจะเกิดข้อผิดพลาดเนื่องจากไม่มีไฟล์ดังกล่าว แต่ไม่มีความเสี่ยงในเรื่องนี้ ดังนั้นจึงไม่จำเป็นต้องกลัวที่จะทดสอบสคริปต์ หากป้อนอักขระน้อยกว่าสองตัวในฟิลด์ใดฟิลด์หนึ่ง ข้อความจะปรากฏขึ้นและการส่งจะถูกยกเลิก หากมีเช็คจำนวนมาก คุณสามารถแสดงข้อความที่แตกต่างกันสำหรับเช็คแต่ละรายการและยกเลิกการส่งแบบฟอร์มได้

เหตุการณ์อินพุตเกิดขึ้นเมื่อค่าของ , หรือองค์ประกอบมีการเปลี่ยนแปลง

ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub