Define javascript behavior for DOM elements

Usage no npm install needed!

<script type="module">
  import domBehavior from '';



browser support

Define javascript behavior for DOM elements.




    <title>Example Page</title>
      Some content <button data-behavior='edit anotherBehavior'>Edit</button>
    <div id='link' data-href='/test' data-behavior='link'>
      I'm not a link but I act like one
var behave = require('dom-behavior')

var behaviors = {
  edit: function(element){
    element.onclick = function(){
      // activate editor
  link: function(element){
    // create a fake hyperlink

    var url = element.getAttribute('data-href') = 'pointer'

    element.onclick = function(e){
      window.location = url

    return function(message){
      if (message == 'update'){
        url = element.getAttribute('data-href')
        if (url){
 = 'pointer'
        } else {
 = 'default'
  anotherBehavior: function(element){
    // multiple behaviors can be added to the same element 
    // seperated by spaces. Just like html classes.

var notify = behave(behaviors, document)

var linkDiv = document.getElementById('link')
linkDiv.setAttribute('data-href', '/new-url')

// normally this would be called from some data-binding/templating thingy.
// triggers func('change') on any behaviors directly on this node
notify('update', linkDiv)

// triggers func('change') on any child of this node with behaviors
notify('inner', linkDiv)

// remove behaviors and trigger func('remove')
notify('remove', linkDiv)

Using with become, json-context and rincewind