doc_markup_events_02.html (3368B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 #fatarrow, 7 #bound, 8 #boundhe, 9 #comment-inline, 10 #comment-streaming, 11 #anon-object-method, 12 #object-method { 13 border: 1px solid #000; 14 width: 200px; 15 min-height: 1em; 16 cursor: pointer; 17 } 18 </style> 19 <script type="application/javascript"> 20 "use strict"; 21 22 /* exported init */ 23 function init() { 24 const fatarrow = document.getElementById("fatarrow"); 25 26 const he = new HandleEventClick(); 27 const anonObjectMethod = document.getElementById("anon-object-method"); 28 anonObjectMethod.addEventListener("click", he.anonObjectMethod); 29 30 const objectMethod = document.getElementById("object-method"); 31 objectMethod.addEventListener("click", he.objectMethod); 32 33 const bhe = new BoundHandleEventClick(); 34 const boundheNode = document.getElementById("boundhe"); 35 bhe.handleEvent = bhe.handleEvent.bind(bhe); 36 boundheNode.addEventListener("click", bhe); 37 38 const boundNode = document.getElementById("bound"); 39 BoundClickHandler = BoundClickHandler.bind(this); 40 boundNode.addEventListener("click", BoundClickHandler); 41 42 fatarrow.addEventListener("click", () => { 43 alert("Fat arrow without params!"); 44 }); 45 46 fatarrow.addEventListener("click", event => { 47 alert("Fat arrow with 1 param!"); 48 }); 49 50 fatarrow.addEventListener("click", (event, foo, bar) => { 51 alert("Fat arrow with 3 params!"); 52 }); 53 54 fatarrow.addEventListener("click", b => b); 55 56 const inlineCommentNode = document.getElementById("comment-inline"); 57 inlineCommentNode 58 .addEventListener("click", functionProceededByInlineComment); 59 60 const streamingCommentNode = document.getElementById("comment-streaming"); 61 streamingCommentNode 62 .addEventListener("click", functionProceededByStreamingComment); 63 } 64 65 function BoundClickHandler(event) { 66 alert("Bound event"); 67 } 68 69 function HandleEventClick(hehe) { 70 71 } 72 73 HandleEventClick.prototype = { 74 // eslint-disable-next-line object-shorthand 75 anonObjectMethod: function() { 76 alert("obj.anonObjectMethod"); 77 }, 78 79 objectMethod: function kay() { 80 alert("obj.objectMethod"); 81 }, 82 }; 83 84 function BoundHandleEventClick() { 85 86 } 87 88 BoundHandleEventClick.prototype = { 89 handleEvent() { 90 alert("boundHandleEvent"); 91 } 92 }; 93 94 // A function proceeded with an inline comment 95 function functionProceededByInlineComment() { 96 alert("comment-inline"); 97 } 98 99 /* A function proceeded with a streaming comment */ 100 function functionProceededByStreamingComment() { 101 alert("comment-streaming"); 102 } 103 </script> 104 </head> 105 <body onload="init();"> 106 <h1>Events test 2</h1> 107 <div id="fatarrow">Fat arrows</div> 108 <div id="boundhe">Bound handleEvent</div> 109 <div id="bound">Bound event</div> 110 <div id="comment-inline">Event proceeded by an inline comment</div> 111 <div id="comment-streaming">Event proceeded by a streaming comment</div> 112 <div id="anon-object-method">Anonymous object method</div> 113 <div id="object-method">Object method</div> 114 </body> 115 </html>