$trigger utility

$trigger is used to call a function when user interact with certain elements. That means you can use it to trigger an action when an interaction like click, hover and so on happens.

$trigger(function, selectors|null, data?optional)

It takes three parameters -- a function utility, element selector(s) and data.

function is a compulsory argument while selectors could be replaced with null when you don't need to select any elements but data is optional.You must always put the function argument in template literals for hydration.

$trigger(${function}, selectors|null, data);

$trigger an action without selectors and data parameters

function add(){
  //code snippet here;
  alert('Adding things');
}
 
function Calculator(result) {
  return `
    <div id="calc">
      ${result ? `updated to ${result}` : ""}
      <button 
        onClick="$trigger(${add})">
        add
      </button>
    </div>
  `;
}

$trigger an action with only selectors parameter

 
function next(elements){
  const [audio, songs] = elements;
  //code here;
}
 
function Next(song) {
  return `
    <div id="next">
      <button 
        onClick="$trigger(${next}, '#audio${song.id}, .song')">
        add
      </button>
    </div>
  `;
}

$trigger an action with only data.

You need to replace selectors with null when you don't need to select any elements.

function previous(song){
  //code here;
}
 
function Previous(song) {
  return `
    <div id="previous">
      <button 
        onClick="$trigger(${previous}, null, '${stringify(song)}')">
        add
      </button>
    </div>
  `;
}

$trigger an action with both selectors and data parameters

function Next(song) {
  return `
    <div id="next">
      <button 
        onClick="$trigger(${add}, '#audio${song.id}, .song'), '${stringify(song)}'">
        add
      </button>
    </div>
  `;
}

Note: always ensure you use '${stringify(song)}' with single quotes.

Why not use JavaScript functions only?

Using JavaScript function without $trigger

function add(props) {
  const result = props.first + props.second;
  $render(Calculator, result);
}
 
function Calculator(result) {
  return `
    <div id="calc">
      ${result ? `updated to ${result}` : ""}
      <button 
        onClick="add({first:4, second:5})">
        add
      </button>
    </div>
  `;
}

Normally, you can trigger an action after rendering by using JavaScript functions; then, why do you need $trigger?

You need to $trigger instead for consistency. You can use a JavaScript function whenever you need $trigger and it will work in a script tag. The problem is it won't work in esModules as the functions won't be accessible.

Use $trigger with template literals to hydrate such a function into the DOM so that it will always be accessible. Additionally, $trigger allows you to pass elements and data to functions.

Click to check the common errors in using $trigger.

$select Fetchers