EventTarget: addEventListener()

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

function handleEvent(event) {
  if (event.type === "fullscreenchange") {
    /*  */
  } else {
    /*  */
  }
}

myElement.addEventListener("click", function (e) {
  console.log(this.className); // myElement  className 
  console.log(e.currentTarget === this); // `true` 
});

myElement.addEventListener("click", (e) => {
  console.log(this.className); // : `this`  `myElement` 
  console.log(e.currentTarget === this); // `false` 
});

<table id="my-table" >
  <!-- `this`  table 'my-table'  -->
  
</table>

<script>
  function logID() {
    console.log(this.id);
  }
</script>
<table id="my-table" >
  <!-- `this`  -->
  
</table>

class Something {
  name = "Something Good";
  constructor(element) {
    // bind  `this`  `onclick2` 
    this.onclick2 = this.onclick2.bind(this);
    element.addEventListener("click", this.onclick1);
    element.addEventListener("click", this.onclick2); // Trick
  }
  onclick1(event) {
    console.log(this.name); // undefined`this` 
  }
  onclick2(event) {
    console.log(this.name); // 'Something Good'`this`  Something 
  }
}

const s = new Something(document.body);

class Something {
  name = "Something Good";
  constructor(element) {
    //  `this`  this.handleEvent 
    element.addEventListener("click", this);
    element.addEventListener("dblclick", this);
  }
  handleEvent(event) {
    console.log(this.name); // 'Something Good'
    switch (event.type) {
      case "click":
        // 
        break;
      case "dblclick":
        // 
        break;
    }
  }
}

const s = new Something(document.body);

class SomeClass {
  name = "Something Good";

  register() {
    window.addEventListener("keydown", (e) => {
      this.someMethod(e);
    });
  }

  someMethod(e) {
    console.log(this.name);
    switch (e.code) {
      case "ArrowUp":
        // 
        break;
      case "ArrowDown":
        // 
        break;
    }
  }
}

const myObject = new SomeClass();
myObject.register();

const myButton = document.getElementById("my-button-id");
let someString = "Data";

myButton.addEventListener("click", () => {
  console.log(someString);
  //  'Data' 
  // 2  'Data Again' 

  someString = "Data Again";
});

console.log(someString); // : 'Data' 'Data Again' 

const elems = document.getElementsByTagName("*");

//  1
for (const elem of elems) {
  elem.addEventListener("click", (e) => {
    // 
  });
}

//  2
function processEvent(e) {
  // 
}

for (const elem of elems) {
  elem.addEventListener("click", processEvent);
}

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">one</td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </tbody>
</table>

// t2 
function modifyText() {
  const t2 = document.getElementById("t2");
  const isNodeThree = t2.firstChild.nodeValue === "three";
  t2.firstChild.nodeValue = isNodeThree ? "two" : "three";
}

//  table 
const el = document.getElementById("outside");
el.addEventListener("click", modifyText);

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">one</td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </tbody>
</table>

//  table 
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal });

// t2 
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue === "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
    controller.abort(); // "three" 
  }
}

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">one</td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </tbody>
</table>

// t2 
function modifyText(newText) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = newText;
}

//  table 
const el = document.getElementById("outside");
el.addEventListener("click", function () {
  modifyText("four");
});

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">one</td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </tbody>
</table>

// t2 
function modifyText(newText) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = newText;
}

//  table 
const el = document.getElementById("outside");
el.addEventListener("click", () => {
  modifyText("four");
});

<div class="outer">
  outer, once & none-once
  <div class="middle" target="_blank">
    middle, capture & none-capture
    <a class="inner1" href="https://www.mozilla.org" target="_blank">
      inner1,  & preventDefault
    </a>
    <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
      inner2,  & preventDefault
    </a>
  </div>
</div>
<hr />
<button class="clear-button"></button>
<section class="demo-logs"></section>

.outer,
.middle,
.inner1,
.inner2 {
  display: block;
  width: 520px;
  padding: 15px;
  margin: 15px;
  text-decoration: none;
}
.outer {
  border: 1px solid red;
  color: red;
}
.middle {
  border: 1px solid green;
  color: green;
  width: 460px;
}
.inner1,
.inner2 {
  border: 1px solid purple;
  color: purple;
  width: 400px;
}

.demo-logs {
  width: 530px;
  height: 16rem;
  background-color: #dddddd;
  overflow-x: auto;
  padding: 1rem;
}

const clearBtn = document.querySelector(".clear-button");
const demoLogs = document.querySelector(".demo-logs");

function log(msg) {
  demoLogs.innerText += `${msg}\n`;
}

clearBtn.addEventListener("click", () => {
  demoLogs.innerText = "";
});

const outer = document.querySelector(".outer");
const middle = document.querySelector(".middle");
const inner1 = document.querySelector(".inner1");
const inner2 = document.querySelector(".inner2");

const capture = {
  capture: true,
};
const noneCapture = {
  capture: false,
};
const once = {
  once: true,
};
const noneOnce = {
  once: false,
};
const passive = {
  passive: true,
};
const nonePassive = {
  passive: false,
};

outer.addEventListener("click", onceHandler, once);
outer.addEventListener("click", noneOnceHandler, noneOnce);
middle.addEventListener("click", captureHandler, capture);
middle.addEventListener("click", noneCaptureHandler, noneCapture);
inner1.addEventListener("click", passiveHandler, passive);
inner2.addEventListener("click", nonePassiveHandler, nonePassive);

function onceHandler(event) {
  log("outeronce");
}
function noneOnceHandler(event) {
  log("outer once\n");
}
function captureHandler(event) {
  //event.stopImmediatePropagation();
  log("middlecapture");
}
function noneCaptureHandler(event) {
  log("middle capture");
}
function passiveHandler(event) {
  //  preventDefault 
  event.preventDefault();
  log("inner1passive");
}
function nonePassiveHandler(event) {
  event.preventDefault();
  //event.stopPropagation();
  log("inner2 passive");
}

<button id="example-button"></button>
<button id="reset-button"></button>

const buttonToBeClicked = document.getElementById("example-button");

const resetButton = document.getElementById("reset-button");

// 
const initialText = buttonToBeClicked.textContent;

// 
const clickedText = "";

// 
// 
function eventListener() {
  buttonToBeClicked.textContent = clickedText;
}

function addListener() {
  buttonToBeClicked.addEventListener("click", eventListener, {
    passive: true,
    once: true,
  });
}

// 
// 
resetButton.addEventListener("click", () => {
  buttonToBeClicked.textContent = initialText;
  addListener();
});

addListener();

<div id="container">
  <p>
    But down there it would be dark now, and not the lovely lighted aquarium she
    imagined it to be during the daylight hours, eddying with schools of tiny,
    delicate animals floating and dancing slowly to their own serene currents
    and creating the look of a living painting. That was wrong, in any case. The
    ocean was different from an aquarium, which was an artificial environment.
    The ocean was a world. And a world is not art. Dorothy thought about the
    living things that moved in that world: large, ruthless and hungry. Like us
    up here.
  </p>
</div>

<div>
  <input type="checkbox" id="passive" name="passive" checked />
  <label for="passive"></label>
</div>

#container {
  width: 150px;
  height: 200px;
  overflow: scroll;
  margin: 2rem 0;
  padding: 0.4rem;
  border: 1px solid black;
}

const passive = document.querySelector("#passive");
const container = document.querySelector("#container");

passive.addEventListener("change", (event) => {
  container.removeEventListener("wheel", wheelHandler);
  container.addEventListener("wheel", wheelHandler, {
    passive: passive.checked,
    once: true,
  });
});

container.addEventListener("wheel", wheelHandler, {
  passive: true,
  once: true,
});

function wheelHandler() {
  function isPrime(n) {
    for (let c = 2; c <= Math.sqrt(n); ++c) {
      if (n % c === 0) {
        return false;
      }
    }
    return true;
  }

  const quota = 1000000;
  const primes = [];
  const maximum = 1000000;

  while (primes.length < quota) {
    const candidate = Math.floor(Math.random() * (maximum + 1));
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }

  console.log(primes);
}