Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
<!DOCTYPE html>
​
<div id=popover popover=auto></div>
<details id=details open>
  <summary>Summary</summary>
</details>
<div id=tabindex tabindex=0>Click me</div>
<style>[tabindex] {font-size:3em} details:not([open]),#tabindex:not([tabindex]) {display:none}</style>
<div>Events:</div>
<ul id=output>
</ul>
​
<script>
function log(str) {
  document.getElementById('output')
    .insertAdjacentHTML('beforeend', `<li>${str}</li>`);
}
​
(async () => {
  popover.showPopover();
  await new Promise(requestAnimationFrame);
  await new Promise(requestAnimationFrame);
  popover.addEventListener('toggle', event => {
    log(`popover toggle event (async). oldState: ${event.oldState} newState: ${event.newState}`);
  });
  popover.addEventListener('beforetoggle', event => {
    log(`popover beforetoggle event (sync). oldState: ${event.oldState} newState: ${event.newState}`);
  });
  log(`popover before attribute removal`);
  popover.removeAttribute('popover');
  log(`popover attribute removed`);
​
  await new Promise(requestAnimationFrame);
  await new Promise(requestAnimationFrame);
  details.addEventListener('toggle', event => {
    log(`details toggle event (async). oldState: ${event.oldState} newState: ${event.newState}`);
  });
  details.addEventListener('beforetoggle', event => { 
    log(`details beforetoggle event (sync). oldState: ${event.oldState} newState: ${event.newState}`);
  });
  log(`details before open attribute removal`);
  details.removeAttribute('open');
  log(`details open attribute removed`);
​
  await new Promise(requestAnimationFrame);
  await new Promise(requestAnimationFrame);
  tabindex.addEventListener('blur', event => {
    log(`tabindex blur event (sync)`);
  });
  // JSbin seems to do weird things with focus, so calling
  // tabindex.focus() just doesn't work here. Workaround:
  tabindex.addEventListener('focus', event => {
    log(`tabindex before tabindex attribute removal`);
    tabindex.removeAttribute('tabindex');
    log(`tabindex tabindex attribute removed`);
  });
})();
</script>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mfreed7pro
0viewers