事件-常用事件特性

1.事件对象

事件处理函数的一个标准特性是，以某些方式访问的事件对象包含有关于当前事件的上下文信息。
IE的实现与W3C的规范有差别。
IE使用一个独立的全局事件对象(window.event)，而其他浏览器则使用独立的包含事件对象的参数传递。

<textarea id="txt" type="text"></textarea>
  <script>
    document.getElementById('txt').onkeypress=function(e){
     // 如果不存在事件对象，则获取全局（仅IE）的对象
      e = e|| window.event;
      // 敲击回车，返回false，不换行
      return e.keyCode !=13;
    }
  </script>

2.this 关键字

this关键字在函数的范围内，作为一种访问当前对象的方式。现代浏览器使用this关键字为所有的事件处理函数提供一些上下文。

var li =document.getElementsByTagName('li');
for (var i=0; i<li.length;i++) {
  li[i].onclick = handleClick;
}
function handleClick() {
  this.style.background = 'blue';
  this.style.color = 'white';
}

3.取消事件冒泡

<div>
  <ul>
    <li><a href="http://www.baidu.com">baidu</a></li>
    <li><a href="http://www.qq.com">qq</a></li>
    <li><a href="http://www.github.com">github</a></li>
  </ul>
</div>

  // 阻止事件冒泡
  function stopBubble (e) {
    if (e && e.stopPropagation) {
      e.stopPropagation()
    } else {
      window.event.cancelable = true;
    }
  }


  var all =document.getElementsByTagName('*');
  for (var i=0; i<all.length;i++) {
    all[i].onmouseover =function(e){
      this.style.border = '1px solid red'
      stopBubble(e);
    }
    all[i].onmouseout =function(e){
      this.style.border = 'none'
      stopBubble(e);
    }
  }

4.阻止浏览器的默认行为

以下是浏览器默认行为的例子：
* 点击< a >标签将重定向到它的href特性上的URL
* 使用键盘Ctrl + S , 浏览器将保存网站的HTML文件
* 提交HTML< from >将向指定的URL提交数据，并重定向浏览器到该地址上。
* 鼠标移动到一个有alt或title< img >上将会出现工具条，提示< img >的描述。

// 防止默认浏览器行为
function stopdefault (e) {
  if (e && e.preventDefalut) {
    e.preventDefalut()
  } else {
    window.event.returnValue = false;
  }
  return false;
}

var a =document.getElementsByTagName('a');
for (var i=0; i<a.length;i++) {
  a[i].onclick =function(e){
    console.log(this.href);
    return stopdefault(e);
  }
}