event-handler-processing-algorithm-manual.html (1805B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Event handlers processing algorithm: manual tests</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-event-handler-processing-algorithm"> 7 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> 8 9 <style> 10 div[id^="d"] { 11 width: 100px; 12 height: 100px; 13 background-color: blue; 14 } 15 </style> 16 17 <div id="log"></div> 18 19 <p>Mouseover these four divs</p> 20 21 <div id="d1"></div> 22 <div id="d2"></div> 23 24 <div id="d3" onmouseover="return false"></div> 25 <div id="d4" onmouseover="return true"></div> 26 27 <script> 28 "use strict"; 29 async_test(t => { 30 const div = document.querySelector("#d1"); 31 32 div.onmouseover = t.step_func(() => false); 33 div.addEventListener("mouseover", t.step_func_done(e => { 34 assert_equals(e.defaultPrevented, true); 35 })); 36 }, "Listener added via JavaScript, returns false: cancels the event"); 37 38 async_test(t => { 39 const div = document.querySelector("#d2"); 40 41 div.onmouseover = t.step_func(() => true); 42 div.addEventListener("mouseover", t.step_func_done(e => { 43 assert_equals(e.defaultPrevented, false); 44 })); 45 }, "Listener added via JavaScript, returns true: does not cancel the event"); 46 47 async_test(t => { 48 const div = document.querySelector("#d3"); 49 50 div.addEventListener("mouseover", t.step_func_done(e => { 51 assert_equals(e.defaultPrevented, true); 52 })); 53 }, "Listener added via markup, returns false: cancels the event"); 54 55 async_test(t => { 56 const div = document.querySelector("#d4"); 57 58 div.addEventListener("mouseover", t.step_func_done(e => { 59 assert_equals(e.defaultPrevented, false); 60 })); 61 }, "Listener added via markup, returns true: does not cancel the event"); 62 </script>