doc_markup_events_04.html (3073B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 #constructed-function, 7 #constructed-function-with-body-string, 8 #multiple-assignment, 9 #promise, 10 #math-pow, 11 #handleEvent { 12 border: 1px solid #000; 13 width: 200px; 14 min-height: 1em; 15 cursor: pointer; 16 } 17 </style> 18 <script type="application/javascript"> 19 "use strict"; 20 21 const constructedFunc = new Function(); 22 23 const constructedFuncWithBodyString = 24 new Function('a', 'b', 'c', 'alert("constructedFuncWithBodyString");'); 25 26 const multipleAssignment = function multi() { 27 alert("multipleAssignment"); 28 } 29 30 /* exported init */ 31 function init() { 32 const constructedFunctionNode = 33 document.getElementById("constructed-function"); 34 constructedFunctionNode.addEventListener("click", constructedFunc); 35 36 const constructedFunctionWithBodyStringNode = 37 document.getElementById("constructed-function-with-body-string"); 38 constructedFunctionWithBodyStringNode 39 .addEventListener("click", constructedFuncWithBodyString); 40 41 const multipleAssignmentNode = 42 document.getElementById("multiple-assignment"); 43 multipleAssignmentNode.addEventListener("click", multipleAssignment); 44 45 const promiseNode = document.getElementById("promise"); 46 new Promise((resolve, reject) => { 47 promiseNode.addEventListener("click", resolve); 48 }); 49 50 const mathPowNode = document.getElementById("math-pow"); 51 mathPowNode.addEventListener("click", Math.pow); 52 53 new HandleEvent(); 54 55 document.addEventListener("click", function(foo, bar) { 56 alert("document event listener clicked"); 57 }); 58 59 document.documentElement.addEventListener("click", function(foo2, bar2) { 60 alert("documentElement event listener clicked"); 61 }); 62 63 document.addEventListener("user-defined", function () { 64 alert("User defined event"); 65 }); 66 } 67 68 function Es6Method(hehe) { 69 70 } 71 72 Es6Method.prototype = { 73 es6Method(foo, bar) { 74 alert("obj.es6Method"); 75 } 76 }; 77 78 function HandleEvent() { 79 const handleEventNode = document.getElementById("handleEvent"); 80 handleEventNode.addEventListener("click", this); 81 } 82 83 HandleEvent.prototype = { 84 // eslint-disable-next-line object-shorthand 85 handleEvent: function(event) { 86 switch (event.type) { 87 case "click": 88 alert("handleEvent click"); 89 } 90 } 91 }; 92 </script> 93 </head> 94 <body onload="init();"> 95 <h1>Events test 4</h1> 96 <div id="constructed-function">Constructed Function</div> 97 <div id="constructed-function-with-body-string"> 98 Constructed Function with body string 99 </div> 100 <div id="multiple-assignment">Multiple Assignment</div> 101 <div id="promise">Promise</div> 102 <div id="math-pow">Math.pow</div> 103 <div id="handleEvent">HandleEvent</div> 104 </body> 105 </html>