Custom element dispatch event

Ask the community
,
1

Hi,
I will get straight to the point. I am new to javascript and trying to create a custom element so I can create hotkeys. I got it to work if I use alert or console.log() in the element code. Now I just want it to send a trigger to the Velo/page code.

I was using the dispatch event like this but it does not seem to work.

 //Custom Element code
document.onkeyup = function(e) {
  if (e.which == 77) {
    alert("M key was pressed");
    this.dispatchEvent(new CustomEvent('my-event'));
  }

//Page code

$w.onReady(function () {
    
     $w('#hotKeys').on('my-event', (event) => {
     console.log('The event triggered successfully.');
    }); 
});
};

I am still learning javascript but think it could have something to do with the .this

Any feedback is much appreciated. :grinning:

2

The this here looks wrong.
The .dispatchEvent() is a method of custom elements, but you put it inside another function so the this refers to the function(e).

3

Hi @jonatandor35 thank you so much for the quick response!
I thought it would be something like that lol!

Sadly it does still seems to give an error:


document.onkeyup = function (e) {
 if (e.which == 77) {
    alert("M key was pressed");
    e.dispatchEvent(new CustomEvent('my-event'));
  }
};
4

You should use a web component and dispatch the custom event from the web component only. And don’t forget to register your web component with customElements . define

class MyWebComponent extends HTMLElement {
    connectedCallback() {
        document.addEventListener('keyup', (event) => {
          if (event.key.toLowerCase() === 'm') { // 77
            this.dispatchEvent(new CustomEvent('my-event'));
          }
        });
    }
}

customElements.define('my-webcomponent', MyWebComponent);
5

FYI: event.which is deprecated . The better to use event.key

6

Hi, thank you so much for your response. Since I have seen some other people that are interested in this as well I will continue to ask one more question.

I have copied your code exactly but it does no longer seem to get triggered on keyup. Even if I place an alert or console log in the element to this it does not seem to work.

My code:

// in the element (also tried with .key but did not fix the isseu)
class MyWebComponent extends HTMLElement {
 connectedCallback() {
     document.addEventListener('keyup', (event) => {
 if (event.wich == 77) {
      alert("INTERN")
 this.dispatchEvent(new CustomEvent('my-event'));
      }
    });
  }
}

customElements.define('my-webcomponent', MyWebComponent);

//page code
$w('#MyWebComponent').on('my-event', (event) => {
 
    console.log('The event triggered successfully.')
 
});

I hope I am not being too rude asking all these questions :upside_down_face:

7

@joriswillemborgers2 The little details. You should register the name of web component with UI panel Tag Name === customElements . define(‘YOUR-COMPONENT-NAME’, Compoent)

602×710 36.3 KB

8 
// I update the example it work for me 😀

// FYI: https://npm.runkit.com/tinykeys/dist/tinykeys.js?t=1611582484255
// Docs: https://github.com/jamiebuilds/tinykeys

tinykeys(window, {
  "Shift+D": () => {
    alert("The 'Shift' and 'd' keys were pressed at the same time")
  },
  "y e e t": () => {
    alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
  },
  "$mod+KeyD": event => {
    event.preventDefault()
    alert("Either 'Control+d' or 'Meta+d' were pressed")
  },
})
9

@alexanderz61239
Thank you so much! It works beautifully.

(image larger than 4 MB)