Set html attribute as javascript for custom event

Question

This works fine:

<div id='clicker' onclick='alert("clicked")'>clicker</div>
<script> $('#clicker').trigger('click'); </script>

How can I make this work ( without using eval )?

<div id='clacker' onclack='alert("clacked")'>clacker</div>
<script> $('#clacker').trigger('clack'); </script>

Trying to mimic the behavior of the inline onclick attribute, but with my own custom attribute/event, to apply a simple solution to a simple problem.

Answer 1

You can't create custom attributes like this. Only the built-in events have corresponding on<event> attributes.

Create an event handler using jQuery .on() or JavaScript .addEventListener().

$("#clacker").on("clack", function() {
  alert('clacked');
});

$('#clacker').trigger('clack');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='clacker'>clacker</div>