Eventscript (proposed concise, nested script for DOM event handling) vs Javascript

class-and-attr-manipulation.js

// jQuery
$('button').click(function(){
    $('h1, h2, p').addClass('blue')
    $('div').removeClass('important')
    $('h3').toggleClass('error')
    $('#foo').attr('alt', 'Lorem Ipsum')
});

// Eventscript
button:click {
  h1, h2, p { [class] &: blue }
  div { [class] ^: important }
  h3 { [class] ~: error }
  #foo { [alt]: 'Lorem Ipsum' }
}

click-events.js

// various ways of handling a click in javascript...
$('#foo').click(function() ...)
$('#foo').on('click', function() ...)
myEl.addEventListener('click', function() { ... })

// eventscript
#foo:click { ... }

logic-and-arithmetic.js

// javascript
$('#foo').on( 'click', function() {
  if ($(this).attr('data-foo') > 100) {
    var foo = $(this).attr('data-foo')
    foo += 2
    $(this).attr('data-foo', foo)

    var bar = $(this).attr('data-bar')
    bar -= 5
    $(this).attr('data-bar', bar)
  }
})

// eventscript
#foo:click ([data-foo] > 100) {  
  [data-foo] +: 2  
  [data-bar] -: 5 
}

nesting.js

// javascript, where order of code can be strewn about, perhaps into separate files
// note how code is interwoven in arbitrary way:
$('#foo #bar .baz').addClass( 'important' )
$('#bar .qux').addClass( 'highlight' )
$('#foo').on('click', function() {
  ...
}).css('background-color', 'red')
$('#bar').on('click', function() {
  ...
})
$('.baz').on('hover', function() {
  ...
})
$('.qux').on('hover', function() {
  ...
})


// eventscript, where code naturally organized, similar to how .scss organizes .css
// note code is nested in a concise way:

#foo {
  background-color: red
  &:click {
   ...
  }
  #bar {
    .baz {
      [class] &: important
      &:hover {
        ...
      }
    }
    .qux {
      [class] &: highlight 
      &:hover {
        ...
      }
    }
    &:click {
      ...
    }
  }
}