jQuery

// toggle a class via click
$('div').click(function() {
  $(this).toggleClass('myClass');
});

// get a css value via click
$('div').click(function() {
  var color = $(this).css('background-color');
});

// get an attribute via click
$('img').click(function() {
  var img = $(this).attr('src');
});

// change an attribute via mouse
$('img').mouseover(function() {
  $(this).attr('src', 'image-1.png');
});
$('img').mouseoout(function() {
  $(this).attr('src', 'image-2.png');
});

// change an attribute via hover
$('img').hover(function() {
  $(this).attr('src', 'image-1.png');
}, function() {
  $(this).attr('src', 'image-2.png');
});

// get position via click
$(document).click(function(e) {
  var x = e.pageX;
  var y = e.pageY;
});

// get position via mouse
$(document).mousemove(function(e) {
  var x = e.screenX;
  var y = e.screenY;
});

// get key pressed
$(document).keypress(function(e) {
  var key = String.fromCharCode(e.which);
});

// use 'on' for situations when elements can be added on-the-fly
$('div.container').on('click', 'li.nav', function() {
  console.log('clicked');
});