การใช้ oninput, onpropertychange, onchange
เหตุการณ์ทริกเกอร์ onchange ต้องเป็นไปตามเงื่อนไข 2 ประการ:
ก) คุณสมบัติของวัตถุปัจจุบันเปลี่ยนแปลงและถูกทริกเกอร์โดยเหตุการณ์ของแป้นพิมพ์หรือเมาส์ (การทริกเกอร์สคริปต์ไม่ถูกต้อง)
b) วัตถุปัจจุบันสูญเสียโฟกัส (onblur)
ในกรณีของ onpropertychange ตราบใดที่คุณสมบัติของอ็อบเจ็กต์ปัจจุบันเปลี่ยนแปลง เหตุการณ์จะถูกทริกเกอร์ แต่จะมีเฉพาะใน IE เท่านั้น
oninput เป็นเวอร์ชันเบราว์เซอร์ที่ไม่ใช่ IE ของ onpropertychange รองรับเบราว์เซอร์เช่น Firefox และ Opera แต่มีข้อแตกต่างประการหนึ่ง เมื่อผูกไว้กับวัตถุ การเปลี่ยนแปลงคุณสมบัติของวัตถุอาจเปลี่ยนแปลงได้เฉพาะเมื่อ การเปลี่ยนแปลงค่าวัตถุ มันได้ผล
หยุดเหตุการณ์เดือดพล่าน
ถ้า (e) //หยุดเหตุการณ์เดือด e.stopPropagation();
อย่างอื่น window.event.cancelBubble = จริง;
รันโค้ดด้านบนแล้วคลิกช่องป้อนข้อมูลเพื่อค้นหาว่า onpropertychange จะถูกทริกเกอร์ด้วย การป้อนค่าจะทำให้เกิดเหตุการณ์นี้ด้วย นี่เป็นการพิสูจน์ว่าตราบใดที่ค่าของคุณสมบัติถูกแก้ไข เหตุการณ์นี้จะถูกทริกเกอร์
ประการที่สอง ตอนนี้เราได้ค้นพบคุณลักษณะนี้แล้ว ก็จะเกิดปัญหาขึ้น บางครั้งเมื่อเราต้องการดำเนินการฟังก์ชันเมื่อค่าของกล่องอินพุตเปลี่ยนแปลง เรายังจำเป็นต้องแก้ไขแอตทริบิวต์ที่กำหนดเองด้วย ดังนั้น onpropertychange จะถูกทริกเกอร์สองครั้ง ซึ่งอาจจะ ไม่ใช่สิ่งที่เราต้องการ
แค่เดาว่าเนื่องจากมีการระบุแอตทริบิวต์ดังกล่าวไว้ คุณน่าจะทราบได้ว่าแอตทริบิวต์ใดที่มีการเปลี่ยนแปลง พยายามรับจำนวนพารามิเตอร์และเนื้อหา
รหัส XML/HTML
คัดลอกรหัสรหัสดังต่อไปนี้:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
-
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
การแจ้งเตือน (อาร์กิวเมนต์. ความยาว);
สำหรับ(var i=0;i<arguments.length;i++){
การแจ้งเตือน (ข้อโต้แย้ง [i]);
-
-
-
</สคริปต์>
เมื่อรันโค้ดข้างต้น คุณจะพบว่า 1 และ [object] ปรากฏขึ้น ซึ่งแสดงว่าเหตุการณ์ส่งผ่านพารามิเตอร์เพียงตัวเดียวไปยังฟังก์ชัน callback และเป็นประเภท object
จากนั้นลองสำรวจวัตถุนี้ดู
รหัส XML/HTML
คัดลอกรหัสรหัสดังต่อไปนี้:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
-
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',ฟังก์ชัน(o){
สำหรับ (รายการ var ใน o) {
การแจ้งเตือน (รายการ +: + o [รายการ]);
-
-
-
</สคริปต์>
หลังจากดำเนินการแล้วเราพบว่ามีคุณลักษณะมากมาย แต่หากเราพิจารณาให้ดี เราอาจพบคุณลักษณะดังกล่าว: ชื่อคุณสมบัติ ฉันเชื่อว่าทุกคนสามารถเดาความหมายของคุณลักษณะนี้ได้ ใช่ ใช้เพื่อดูว่าแอตทริบิวต์ใดได้รับการแก้ไข
รหัส XML/HTML
คัดลอกรหัสรหัสดังต่อไปนี้:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
-
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',ฟังก์ชัน(o){
การแจ้งเตือน (o.propertyName);
-
-
</สคริปต์>
คลิกกล่องข้อความและป้อนค่าตามลำดับ แล้วคุณจะพบว่า myprop และค่าปรากฏขึ้นตามลำดับ
กลับไปที่คำถามที่เราเริ่มต้น เราเพียงแต่ต้องพิจารณาว่าค่ามีการเปลี่ยนแปลงหรือไม่
ลองดูโค้ดโดยตรง:
รหัส XML/HTML
คัดลอกรหัสรหัสดังต่อไปนี้:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
-
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',ฟังก์ชัน(o){
if(o.propertyName!='value')return; //อย่าดำเนินการต่อไปนี้ เว้นแต่ว่าค่าจะเปลี่ยนแปลง
//.....การประมวลผลฟังก์ชัน
-
-
</สคริปต์>