อะไรคือความแตกต่างระหว่าง onBlur และ onChange แอตทริบิวต์ใน HTML?


118

เมื่อใดที่เรียกว่าเมื่อเทียบกับอีกอัน? มีสถานการณ์ที่จะเรียก onChange แต่ onBlur จะไม่ถูกเรียก?

คำตอบ:


171

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

onChangeเหตุการณ์ที่เรียกว่าเฉพาะเมื่อคุณมีการเปลี่ยนแปลงค่าของฟิลด์และมันสูญเสียโฟกัส

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


2
ลิงค์ของคุณเกี่ยวกับ quirksmode ไม่ได้พูดถึงความเบลอเป็นเพียงเหตุการณ์พื้นฐาน
stackdave

23

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

ใน Firefox การแท็บออกจากฟิลด์ที่เปลี่ยนแปลงจะเริ่มการทำงานในการเปลี่ยนแปลงจากนั้นเปิดเบลอและโดยปกติจะทำเช่นเดียวกันใน IE อย่างไรก็ตามหากคุณกดปุ่ม Enter แทนแท็บใน Firefox มันจะเริ่มทำงานเมื่อเบลอจากนั้นเปิดการเปลี่ยนแปลงในขณะที่ IE มักจะเริ่มทำงานตามลำดับเดิม อย่างไรก็ตามฉันเคยเห็นกรณีที่ IE จะยิงเบลอก่อนดังนั้นโปรดระวัง คุณไม่สามารถสันนิษฐานได้ว่า onblur หรือ onchange จะเกิดขึ้นก่อนหน้าอันอื่น


10

ตัวอย่างที่จะทำให้สิ่งต่างๆเป็นรูปธรรม หากคุณมีตัวเลือกดังนี้:

<select onchange="" onblur="">
  <option>....
</select>

onblur()ถูกเรียกเมื่อคุณออก ระบบonchange()จะเรียกเมื่อคุณเลือกตัวเลือกอื่นจากสิ่งที่เลือกนั่นคือคุณเปลี่ยนสิ่งที่เลือกอยู่ในขณะนี้


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

7

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


4

onBlur คือเมื่อโฟกัสของคุณไม่ได้อยู่ที่สนามที่เป็นปัญหาอีกต่อไป

คุณสมบัติ onblur ส่งคืนโค้ดตัวจัดการเหตุการณ์ onBlur ถ้ามีที่มีอยู่ในองค์ประกอบปัจจุบัน

onChange คือเมื่อค่าของฟิลด์เปลี่ยนไป


4

ฉันคิดว่าสิ่งสำคัญคือต้องสังเกตว่า onBlur () เริ่มทำงานโดยไม่คำนึงถึง

นี่เป็นเธรดที่มีประโยชน์ แต่สิ่งเดียวที่ไม่ได้ชี้แจงคือ onBlur () จะเริ่มทำงานทุกครั้ง

onChange () จะเริ่มทำงานเมื่อมีการเปลี่ยนแปลงค่าเท่านั้น


3

onChange คือเมื่อบางสิ่งในฟิลด์เปลี่ยนแปลงเช่นคุณเขียนบางสิ่งในการป้อนข้อความ

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

ดังนั้นจริงๆแล้วพวกมันเกือบจะเหมือนกัน แต่สำหรับ onChange ในการทำงานวิธีที่ onBlur ทำบางสิ่งในอินพุตนั้นจำเป็นต้องเปลี่ยน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.