Testing click events on id and class elements and figuring out how click event handling works in KRL

kynetx-click-event.krl.js

ruleset a60x274 {
  meta {
    name "click event"
    description <<
      Testing click events on id and class elements and figuring out how click event handling works in KRL
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {  }

  global { 
  
    css <<
      #id-clicker {
        color: #A82415;
      }
      .clicked-id {
        color: #75180E;
      }
      
      .class-clicker {
        color: #0C4187;
      }
      .clicked-class {
        color: #092E5E;
      }
    >>;
    
  }

  rule setup_element is active {
    select when pageview ".*"
    pre {
      idElement = <<
        <h1 id="id-clicker">Click me for the ID test</h1>
      >>;
      classElement = <<
        <h1 class="class-clicker">Click me for the CLASS test</h1>
      >>;
    }
    {
      prepend("body", idElement + classElement);
    }
  }

  rule setup_id_watcher is active {
    select when pageview ".*" setting ()
    watch("#id-clicker", "click");
  }
  
  rule setup_class_watcher is active {
    select when pageview ".*" setting ()
    watch(".class-clicker", "click");
  }
  
  rule you_waz_clickin_da_id is active {
    select when web click "#id-clicker"
    pre {
      clicky = <<
        <h1 class="clicked-id">DUDE! YOU CLICKED THE ID!</h1>
      >>;
    }
    {
      prepend("body", clicky);
    }
  }
  
  rule you_waz_clickin_da_class is active {
    select when web click ".class-clicker"
    pre {
      clicky = <<
        <h1 class="clicked-class">DUDE! YOU CLICKED THE CLASS!</h1>
      >>;
    }
    {
      prepend("body", clicky);
    }
  }
}

Tested test app on http://example.com/
Before Kynetx app -> https://mikegrace.s3.amazonaws.com/github/click-event/before-kynetx-app.png
After Kynetx app -> https://mikegrace.s3.amazonaws.com/github/click-event/kynetx-app-ran.png
Kynetx click events -> https://mikegrace.s3.amazonaws.com/github/click-event/kynetx-app-click-event.png