CODEWITHSUNDEEP
javascripthtmlcss
Vladd Cantor
Vladd Cantor

Reputation: 23

How do I create a custom DOM event?

I've been looking for solution for 3 days, but I couldn't find any.

What I want is, two animations should be executed in custom events, one for the sticky navigation bar function, and one for the menu button when clicked, but these two animations are conflicting to each other. If it's possible to do it in CSS, Please let me know. But I used JS instead.

Sticky Nav Bar:

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    /*SOME ANIMATION PROPERTIES*/
  } else {
    /*SOME ANIMATION PROPERTIES*/
  }
}

Menu Button when Clicked using Event Listener

checkboxLabel.addEventListener("click", function() {menuToggle();});
function menuToggle() {

        /* I SET IT TO FALSE INSTEAD OF TRUE, BECAUSE THE EVENT LISTENER WORKS OPPOSITE AND I DON'T KNOW WHY, IF YOU KNOW, PLEASE LET ME KNOW :) */
        if (checkbox.checked == false) {
            navMenu.animation = "menuToggleOn 500ms linear";
            navMenu.animationFillMode = "forwards";

            navMenu.position = "fixed";
            navMenu.display = "flex";

        } 
        else{ 
            navMenu.animation = "menuToggleOff 500ms linear";
            navMenu.animationFillMode = "forwards";

            navMenu.position = "fixed";
            navMenu.display = "flex";
            
        }
    }

Upvotes: 0

Views: 230

Answers (1)

Jakir Hossen
Jakir Hossen

Reputation: 461

You can create an event using CustomEvent method

const saveBtn = document.querySelector('.save');
const output = document.querySelector('.output');

function save(data) {
  const savedEvent = new CustomEvent('saved', {detail: data});
  document.dispatchEvent(savedEvent);
}

saveBtn.addEventListener('click', () => {
  const userInfo = {username: 'simple javascript 😎', email: '[email protected]'};
  save(userInfo);
});


document.addEventListener('saved', (event) => {
  const {username, email} = event.detail;
  output.innerHTML = `Data Saved ✅</br> data: ${JSON.stringify(event.detail, 2)}`
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button class="save">Save Data</button>
  <p class="output"></p>
</body>
</html>

Upvotes: 1

Related Questions