tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

doc_markup_events_01.html (2990B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <meta charset="utf-8">
      5    <style>
      6    #container {
      7      border: 1px solid #000;
      8      width: 200px;
      9      height: 85px;
     10    }
     11 
     12    #container > div {
     13      border: 1px solid #000;
     14      display: inline-block;
     15      margin: 2px;
     16    }
     17 
     18    #output,
     19    #noevents,
     20    #DOM0,
     21    #handleevent,
     22    #output,
     23    #noevents {
     24      cursor: auto;
     25    }
     26 
     27    #output {
     28      min-height: 1.5em;
     29    }
     30    </style>
     31    <script type="application/javascript">
     32      "use strict";
     33 
     34      /* exported init */
     35      function init() {
     36        const container = document.getElementById("container");
     37        const multiple = document.getElementById("multiple");
     38 
     39        container.addEventListener("mouseover", mouseoverHandler, true);
     40        multiple.addEventListener("click", clickHandler);
     41        multiple.addEventListener("mouseup", mouseupHandler);
     42 
     43        const he = new HandleEventClick();
     44        const handleevent = document.getElementById("handleevent");
     45        handleevent.addEventListener("click", he);
     46      }
     47 
     48      function mouseoverHandler(event) {
     49        if (event.target.id !== "container") {
     50          const output = document.getElementById("output");
     51          output.textContent = event.target.textContent;
     52        }
     53      }
     54 
     55      function clickHandler(event) {
     56        const output = document.getElementById("output");
     57        output.textContent = "click";
     58      }
     59 
     60      function mouseupHandler(event) {
     61        const output = document.getElementById("output");
     62        output.textContent = "mouseup";
     63      }
     64 
     65      function HandleEventClick(hehe) {
     66 
     67      }
     68 
     69      HandleEventClick.prototype = {
     70        // eslint-disable-next-line object-shorthand
     71        handleEvent: function(blah) {
     72          alert("handleEvent");
     73        }
     74      };
     75 
     76      function noeventsClickHandler(event) {
     77        alert("noevents has an event listener");
     78      }
     79 
     80      /* exported addNoeventsClickHandler, removeNoeventsClickHandler */
     81      function addNoeventsClickHandler() {
     82        const noevents = document.getElementById("noevents");
     83        noevents.addEventListener("click", noeventsClickHandler);
     84      }
     85 
     86      function removeNoeventsClickHandler() {
     87        const noevents = document.getElementById("noevents");
     88        noevents.removeEventListener("click", noeventsClickHandler);
     89      }
     90    </script>
     91  </head>
     92  <body onload="init();">
     93    <h1>Events test 1</h1>
     94    <div id="container">
     95      <div>1</div>
     96      <div>2</div>
     97      <div>3</div>
     98      <div>4</div>
     99      <div>5</div>
    100      <div>6</div>
    101      <div>7</div>
    102      <div>8</div>
    103      <div>9</div>
    104      <div>10</div>
    105      <div>11</div>
    106      <div>12</div>
    107      <div>13</div>
    108      <div>14</div>
    109      <div>15</div>
    110      <div>16</div>
    111      <div id="multiple">multiple</div>
    112    </div>
    113    <div id="output"></div>
    114    <div id="noevents">noevents</div>
    115    <div id="DOM0" onclick="alert('DOM0')">DOM0 event here</div>
    116    <div id="handleevent">handleEvent</div>
    117  </body>
    118 </html>