13.HandlingEvents.md

Handling Events

Event Handlers

addEventListener: dom.addEventListener("[event_names]", function(){});

• click
• mouseover
• mouseout
• keydown
• scroll

var dom = document.getElementByTagName("p")[0];
dom.addEventListener("mouseover", function(){alert("Hello")});

[All Events is counted here (soure: W3Schools)] (http://www.w3schools.com/jsref/dom_obj_event.asp) (to use these events with addEventListener, delete the "on" in each event)

removeEventListener: dom.removeEventListener("[event_names]", function(){});

  var pTag = document.querySelector("p");
  function once() {
    console.log("Done.");
    pTag.removeEventListener("click", once);
  }
  pTag.addEventListener("click", once);

Event Objects

All information of events is held in event object

var dom = document.querySelector("p");
dom.addEventListener("click", function(event){console.log(event)})

Propagation

When the children Nodes handles events, whole events of its parent will also handle.

We can use event.stopPropagation() to stop propagation

<p>A paragraph with a <button>button</button>.</p>
<script>
  var para = document.querySelector("p");
  var button = document.querySelector("button");
  para.addEventListener("mousedown", function() {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", function(event) {
    console.log("Handler for button.");
    if (event.which == 3)
      event.stopPropagation();
  });
</script>

Default Action

There are some actions are created automatically. Such as when you click a link, when you press keydown, when you click right click.

We can change the default by preventDefault.

<a href="https://developer.mozilla.org/">MDN</a>
<script>
  var link = document.querySelector("a");
  link.addEventListener("click", function(event) {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

Event Target

Using event.target to get the element which is handled event

document.body.addEventListener("click", function(event){console.log(event.target.nodeName)})

Key Event

• keyup & keydown

document.body.addEventListener("keydown", function(event){
    if (event.keyCode == 86) 
      document.body.style.background = 'violet';
});

document.body.addEventListener("keyup", function(event){
    if (event.keyCode == 86) 
      document.body.style.background = '';
});

• Ctrl, Alt, Shift

document.body.addEventListener("keydown", function(event){
    if (event.keyCode == 86 && event.ctrlKey && event.shiftKey)
      document.body.style.background = 'violet';
});

Exercise

Prevent some Keyboard

<input type="text">
<script>
  var field = document.querySelector("input");
  var match = [81, 87, 88];
  field.addEventListener("keyup", function(event){
    if (match.indexOf(event.keyCode) !== -1) {
      	console.log(0, field.length -1, field.value);
		field.value = field.value.slice(0, field.value.length - 1);
      	console.log(String.fromCharCode(event.keyCode));
    }
  });
</script>