事件处理

事件处理是让页面实现交互的关键，没有事件用户就只能瞪眼看啦～
js的事件真的好多，涵盖了你能想到的任何操作（当然如眼球追踪等还没有实现哈），这里我们讲解写我们经常会用到的。

在搞事件的时候必要的是先搞一个页面，不然去操作谁呢 .0.0.

//我们在搞js，谁会去理会html，能用js的绝对不假手其他语言，就是这么任性
//其实是复习一下前面的DOM(不小心说了实话，装逼被揭穿 ..0.0..)
//首先我们创建一个div标签(其实这一个标签就够我们折腾了～)
document.body.innerHTML = '<div></div>';
var _divBox = document.getElementsByTagName('div')[0];
_divBox.style.width = '100px';
_divBox.style.height = '100px';
_divBox.style.background = '#FF0000';
//这时候我们运行页面就会看到左上角有一个宽100 高100的红色正方形，如果你的函数章节已经看过了，最好把它封装成一个函数，下面会有类似的例子。

• onload页面加载时触发

window.onload=function(){
   //TODO something
}
//当页面加载的时候触发。比如ajax数据的加载，样式定义（有些像素运算问题），都需要在加载时搞定

---

• onclick 点击事件（这个是最多的）
  • 第一种是对象属性直接定义

//如果你上面的代码也是写的这么裸，你可以接着写了
_divBox.onclick=function(){
    _divBox.style.background = '#00FF00';
    //this.style.background = '#00FF00';
}
//上面的俩行代码是一个意思，其中注释中的this是指针，指向当前对象，这个在进阶篇的面向对象中会讲到。
//回到浏览器，打开页面，点击这个红色div会发现它变成了绿色。

• 第二种是监听addEventListener (attachEvent是IE搞的，感觉IE开发太另类，喜欢的自己去查查，很简单)

_divBox.addEventListener('click',function(){
    this.style.background = '#00FF00';
});
//这里我们会看到相同的效果

  * 这两个函数虽然有着相同的效果，但是不同的，当我们使用第一种方法为_divBox的onclick属性设定几个不同的函数时，只会执行最后一个。而addEventListener则会将几个函数都执行一遍。
  * 另外，addEventListener有3个参数(有一个默认的useCapture为false，我们就省略了);当为false时采用冒泡模式监听，为true则是capture/捕获模式监听，我们用下面的代码来看看区别:

//我们需要先在_divBox里面继续插入一个p标签
_divBox.innderHTML='<p>this is para</p>';
//然后定义两个监听事件
_divBox.addEventListener('click',function(){
    console.log('div');
},true);
document.getElementsByTagName('p')[0].addEventListener('click',function(){
   console.log('p');
},true);
//在浏览器中运行，点击div会看到输出div，点击p会看到先输出div然后输出p，这就是capture捕获模式，从外到内
//
//
_divBox.addEventListener('click',function(){
    console.log('div');
},false);
document.getElementsByTagName('p')[0].addEventListener('click',function(){
   console.log('p');
},false);
//在浏览器中运行，点击div会看到输出div，点击p会看到先输出p然后输出div，这就是冒泡模式，从内到外
//也是addEventListener的默认模式，通常情况下也是用默认冒泡模式，使用capture模式的情况比较少。

---

• onmousedown-onmouseup 鼠标左键按下和抬起事件，他俩是onclick的前奏，执行完这俩家伙才会搭理click事件，同样会有属性和监听两种方式，这里就用属性举例吧～

_divBox.onmousedown = function(){
    this.style.background = '#0000FF';
}
_divBox.onmouseup = function(){
    this.style.background = '#FF0000';
}

---

• onkeypress 当按键按下并且被松开触发

//这个例子比较简单，不用我们借用任何元素
window.onkeypress = function(){
    console.log(e.key);
}
//打开调试工具，随便按键盘，看看效果吧

---

• 其他事件事件

事件名称	含义
onmouseover	当鼠标移到元素上去时
onmouseout	当鼠标移出元素时
onmousemove	当鼠标移动时
onsubmit	表单提交事件
onchange	当元素值改变时，常用在input[text/password]/select等
onfocus	当光标在该元素上时/获取焦点时
onblur	当失去焦点时
ondblclick	当双击元素时
onresize	当元素大小有变化时，常用在screen或window
onselect	当对象中的文本被选择时触发
onkeydown	当按键被按下
onkeyup	当按键被松开时触发

---

• 说了这么多为元素绑定事件，如果想把某个元素的事件剔除了，那就用到这个属性了removeEventListener

//这里需要对上面的addEventListener做个修改
function handle(){
    this.style.background='#0000ff';
}
_divBox.addEventListener('click',handle);
_divBox.removeEventListener('click',handle);
//如果没有handle的话是没有办法实现的。。。总是感觉有点坑

• 当然，还有另一个方法就是

//该方法仅适用于通过属性定义的，想移除用addEventListener绑定的还是用上面的方法吧
_divBox.onclick=function(){
 //TODO
}
_divBox.onclick=null;//是不是很简单

---