Press → key to advance. Zoom in/out: Ctrl or Command + +/-.

Basic JS: VII

Events:
Make Things Happen

Events

  • mousedown
  • mouseup
  • click
  • dblclick
  • mousemove
  • mouseover
  • mouseout

Adding Events

Archaic method (really bad example)

var snippet = document.getElementById('codeexample');
snippet.onmouseover = pink; 
snippet.onmouseout = notpink;

function pink(){
  snippet.style.backgroundColor = '#f06';	
}
function notpink(){
  snippet.style.backgroundColor = '';	
}

addEventListener

myNode.addEventListener(type, listener, !bubble?);
  • register more than one event listener
for(var i = 0; i < lis.length ; i++){  
   lis[i].addEventListener("click", calledFunction);
} 

function calledFunction(e){  
   /*do something*/  
}

Putting it all together

var namespace = {
  promos: ['val1', 'val2', 'val3'],
  setUpButtons: function(){
  	var listItems = document.querySelectorAll('#changeme li');
    for(var i = 0; i < listItems.length; i++) {
    	listItems[i].addEventListener("click", namespace.showClasses, true);
    } 
  },
  showClasses: function(e) {
		currentClass = this.getAttribute('class');
		if(currentClass) {
			this.innerHTML += ' class="' + currentClass + '"';
		}
    },
  init: function(){
  	namespace.setUpButtons();	
  }
}
namespace.init();

But that doesn't work in IE8.
IE8 / 7 / 6 etc do not understand
addEventListener

Nope

There's no more
Go
That's all Folks!!!!

jQuery with Doris Next!