checkbox-click-events.html (2746B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Checkbox click events</title> 4 <link rel="author" title="jeffcarp" href="mailto:gcarpenterv@gmail.com"> 5 <link rel=help href="https://html.spec.whatwg.org/#checkbox-state-(type=checkbox)"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <body> 11 <script> 12 "use strict"; 13 14 test(() => { 15 16 const input = document.createElement("input"); 17 input.type = "checkbox"; 18 19 const values = []; 20 21 input.addEventListener("click", e => { 22 values.push(input.checked); 23 e.preventDefault(); 24 values.push(input.checked); 25 }); 26 27 input.click(); 28 29 values.push(input.checked); 30 assert_array_equals(values, [true, true, false]); 31 32 }, "clicking and preventDefaulting a checkbox causes the checkbox to be checked during the click handler but reverted"); 33 34 test(() => { 35 const input = document.createElement("input"); 36 input.type = "checkbox"; 37 document.body.appendChild(input); 38 const events = []; 39 40 input.addEventListener("change", () => { 41 events.push("change"); 42 }); 43 input.addEventListener("click", () => { 44 events.push("click"); 45 }); 46 input.addEventListener("input", () => { 47 events.push("input"); 48 }); 49 50 assert_false(input.checked); 51 52 input.click(); 53 54 assert_true(input.checked); 55 assert_array_equals(events, ["click", "input", "change"]); 56 57 }, "a checkbox input emits click, input, change events in order after synthetic click"); 58 59 test(() => { 60 const input = document.createElement("input"); 61 input.type = "checkbox"; 62 document.body.appendChild(input); 63 const events = []; 64 65 input.addEventListener("change", () => { 66 events.push("change"); 67 }); 68 input.addEventListener("click", () => { 69 events.push("click"); 70 }); 71 input.addEventListener("input", () => { 72 events.push("input"); 73 }); 74 75 assert_false(input.checked); 76 77 const event = new MouseEvent("click", { bubbles: true, cancelable: true }); 78 input.dispatchEvent(event); 79 80 assert_true(input.checked); 81 assert_array_equals(events, ["click", "input", "change"]); 82 83 }, "a checkbox input emits click, input, change events in order after dispatching click event"); 84 85 test(() => { 86 const input = document.createElement("input"); 87 input.type = "checkbox"; 88 document.body.appendChild(input); 89 const events = []; 90 91 input.addEventListener("change", () => { 92 events.push("change"); 93 }); 94 input.addEventListener("click", e => { 95 e.preventDefault(); 96 events.push("click"); 97 }); 98 input.addEventListener("input", () => { 99 events.push("input"); 100 }); 101 102 assert_false(input.checked); 103 104 input.click(); 105 106 assert_false(input.checked); 107 assert_array_equals(events, ["click"]); 108 }, "checkbox input respects cancel behavior on synthetic clicks"); 109 </script>