Web API Properties Starting With current

1. Event.currentTarget vs Event.target

Code:

const element = document.querySelector('#current-target-link');

element.addEventListener('click', function (event) {
  event.preventDefault();

  event.target.style.border = '10px solid deeppink';
  event.currentTarget.style.border = '10px solid deepskyblue';

  document.querySelector('#current-target-output').textContent =
    `target: ${event.target.className || event.target.tagName}, ` +
    `currentTarget: ${event.currentTarget.id}, ` +
    `currentTarget === this: ${event.currentTarget === this}`;
});

Result:

IMG Click the image tile, then click this text.

Waiting for a click...

2. Document.currentScript

Code:

<script id="current-script-demo-script">
  document.querySelector('#current-script-live').textContent =
    document.currentScript
      ? `Running script id: ${document.currentScript.id}`
      : 'document.currentScript is null';

  document.querySelector('#current-script-button').addEventListener('click', function () {
    document.querySelector('#current-script-click').textContent =
      document.currentScript === null
        ? 'Inside an event handler: document.currentScript is null'
        : document.currentScript.id;
  });
</script>

Result:

During inline script execution Script has not reported yet.

Click the button to check document.currentScript later.

3. Animation.currentTime in the Web Animations API

Code:

const dot = document.querySelector('#animation-dot');
const output = document.querySelector('#animation-output');
const fill = document.querySelector('#animation-fill');

const moveAnimation = dot.animate([
  { transform: 'translate(0, -50%)', opacity: 0.35 },
  { transform: 'translate(calc(100vw - 180px), -50%)', opacity: 1 }
], {
  duration: 3000,
  fill: 'both',
  easing: 'ease-in-out'
});

moveAnimation.pause();

document.querySelector('#play-animation').addEventListener('click', function () {
  moveAnimation.currentTime = 0;
  moveAnimation.play();
});

document.querySelector('#pause-animation').addEventListener('click', function () {
  moveAnimation.pause();
  output.textContent = `Paused at ${Math.round(moveAnimation.currentTime || 0)} ms`;
});

setInterval(function () {
  const time = Math.round(moveAnimation.currentTime || 0);
  output.textContent = `currentTime: ${time} ms`;
  fill.style.width = `${Math.min(time / 3000 * 100, 100)}%`;
}, 100);

Result:

currentTime: 0 ms

4. TreeWalker.currentNode

Code:

const container = document.querySelector('#tree-container');
const output = document.querySelector('#tree-output');

const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
  acceptNode: function (node) {
    return node.nodeName === 'LI'
      ? NodeFilter.FILTER_ACCEPT
      : NodeFilter.FILTER_REJECT;
  }
});

document.querySelector('#tree-next').addEventListener('click', function () {
  const current = treeWalker.currentNode;
  const next = treeWalker.nextNode();

  output.textContent =
    `Before nextNode(): ${current.id || current.nodeName}; ` +
    `after nextNode(): ${next ? next.textContent.trim() : 'null'}`;

  document.querySelectorAll('#tree-container li').forEach(function (li) {
    li.dataset.active = String(li === treeWalker.currentNode);
  });
});

document.querySelector('#tree-reset-second').addEventListener('click', function () {
  treeWalker.currentNode = document.querySelector('#tree-second');
  output.textContent = 'currentNode was set to the second top-level LI.';
});

Result:

List
Nested list inside LI:
1. Item 1
2. Item 2

The first currentNode is the root: tree-container.

5. HTMLImageElement.currentSrc

Code:

<img id="responsive-logo"
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Crect width='128' height='128' fill='%23146ef5'/%3E%3Ctext x='64' y='72' text-anchor='middle' font-size='24' fill='white'%3E128w%3C/text%3E%3C/svg%3E"
  srcset="
    data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Crect width='128' height='128' fill='%23146ef5'/%3E%3Ctext x='64' y='72' text-anchor='middle' font-size='24' fill='white'%3E128w%3C/text%3E%3C/svg%3E 128w,
    data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Crect width='256' height='256' fill='%2310a37f'/%3E%3Ctext x='128' y='142' text-anchor='middle' font-size='42' fill='white'%3E256w%3C/text%3E%3C/svg%3E 256w,
    data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Crect width='512' height='512' fill='%23f59e0b'/%3E%3Ctext x='256' y='284' text-anchor='middle' font-size='80' fill='white'%3E512w%3C/text%3E%3C/svg%3E 512w"
  sizes="(max-width: 520px) 220px, 160px"
  alt="Responsive demo logo">

<button id="read-current-src" type="button">Read currentSrc</button>

<script>
  document.querySelector('#read-current-src').addEventListener('click', function () {
    const img = document.querySelector('#responsive-logo');
    document.querySelector('#current-src-output').textContent =
      img.currentSrc || img.src;
  });
</script>

Result:

Resize the page or use a high-density display, then read the URL that the browser actually selected.

Click the button to inspect the selected image URL.

6. SVG currentScale and currentTranslate

Code:

const svg = document.querySelector('#svg-current-demo');
const scale = document.querySelector('#svg-scale');
const translate = document.querySelector('#svg-translate');
const output = document.querySelector('#svg-output');

function updateSvgCurrentValues() {
  svg.currentScale = Number(scale.value);
  svg.currentTranslate.x = Number(translate.value);
  svg.currentTranslate.y = 0;

  output.textContent =
    `currentScale: ${svg.currentScale.toFixed(2)}, ` +
    `currentTranslate.x: ${Math.round(svg.currentTranslate.x)}`;
}

scale.addEventListener('input', updateSvgCurrentValues);
translate.addEventListener('input', updateSvgCurrentValues);
updateSvgCurrentValues();

Result:

Scale Translate X