doc_markup_events_jquery.html (2849B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <style> 7 input { 8 margin: 5px 3px 10px 10px; 9 } 10 11 div { 12 width: 100px; 13 height: 100px; 14 border: 1px solid #000; 15 } 16 </style> 17 18 <script type="application/javascript"> 19 "use strict"; 20 21 const jq = document.location.search.substr(1); 22 const script = document.createElement("script"); 23 script.setAttribute("type", "text/javascript"); 24 script.setAttribute("src", jq); 25 document.head.appendChild(script); 26 27 // If you update the content of the callback, remember to 28 // update helper_events_test_runner.js `getDocMarkupEventsJQueryLoadHandlerText`. 29 window.addEventListener("load", () => { 30 const handler1 = function liveDivDblClick() { alert(1); }; 31 const handler2 = function liveDivDragStart() { alert(2); }; 32 const handler3 = function liveDivDragLeave() { alert(3); }; 33 const handler4 = function liveDivDragEnd() { alert(4); }; 34 const handler5 = function liveDivDrop() { alert(5); }; 35 const handler6 = function liveDivDragOver() { alert(6); }; 36 const handler7 = function divClick1() { alert(7); }; 37 const handler8 = function divClick2() { alert(8); }; 38 const handler9 = function divKeyDown() { alert(9); }; 39 const handler10 = function divDragOut() { alert(10); }; 40 41 if ($("#livediv").live) { 42 $("#livediv").live( "dblclick", handler1); 43 $("#livediv").live( "dragstart", handler2); 44 } 45 46 if ($("#livediv").delegate) { 47 $(document).delegate( "#livediv", "dragleave", handler3); 48 $(document).delegate( "#livediv", "dragend", handler4); 49 } 50 51 if ($("#livediv").on) { 52 $(document).on( "drop", "#livediv", handler5); 53 $(document).on( "dragover", "#livediv", handler6); 54 $(document).on( "dragout", "#livediv:xxxxx", handler10); 55 } 56 57 const div = $("div")[0]; 58 $(div).click(handler7); 59 $(div).click(handler8); 60 $(div).keydown(handler9); 61 62 class MyClass { 63 constructor() { 64 $(document).on("click", '#inclassboundeventdiv', this.onClick.bind(this)); 65 } 66 onClick() { alert(11); } 67 } 68 new MyClass(); 69 }); 70 71 // Add properties on Array prototype to reproduce issue with Moo + jQuery listeners 72 // (see Bug 1916881) 73 // eslint-disable-next-line no-extend-native 74 Array.prototype.override_func = function() { 75 return "don't do this"; 76 } 77 // eslint-disable-next-line no-extend-native 78 Array.prototype.override_obj = "don't do this"; 79 </script> 80 </head> 81 <body> 82 <div id="testdiv"></div> 83 <br> 84 <div id="livediv"></div> 85 <br> 86 <div id="inclassboundeventdiv"></div> 87 </body> 88 </html>