JS事件操作

DOM 1级方式设置(4种)

1. 通过onclick指定JS函数名称

function 函数名称(）{···};

2. 在onclick中直接写入过程代码

3. JS中节点.onclick = 匿名函数
4. JS中节点.onclick = 函数名称 注意是函数名称，不是调用函数

itnode.onclick = 有名函数名称;
function 函数名称(){···}

注意：以上DOM1级事件设置的4种具体表现形式，除了第1种(this代表window)，其他三种方式内部this都代表当前节点本身

DOM 2级事件设置

所谓DOM 2级事件设置可以更加灵活的任何可视节点添加动作事件。

1. addEventListener：节点.addEventListener(动作名称，事件名称，事件流)

//addEventListener第一种使用方式
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',function(){
    this.style.backgroundColor ="pink";
});
//addEventListener第二种使用方式
dv.addEventListener('mouseover',f1);
function f1(){
    dv.style.backgroundColor ="pink";
};  

2. removeEventListener：节点.removeEventListener(动作名称，事件名称，事件流)

如果是IE浏览器(IE9以下)的话最好使用attachEvent(事件类型，事件处理)和detachEvent(事件类型，事件处理)

事件流

多个彼此嵌套的元素，他们拥有相同的时间，最内部事件被触发后，外边多个元素的同类型时间会被触发，多个元素他们同类型时间同时执行的效果称为"事件流"

事件类型

注意：在addEventListener或者removeEventListener中最后一个参数如果为false（冒泡型，从内而外），为true（捕捉型，从外而内）

事件对象

事件对象，每个事件(包括鼠标，键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息，什么键子被触发执行，通过事件对象还可以阻止事件流产生，阻止浏览器默认动作。

1. 获得事件对象
   声明触发方法时参数evt，evt就是事件对象

2. 获取鼠标的坐标信息

event.clientX/clientY  （相对dom的坐标）
event.pageX/pageY （考虑滚动条）
event.screenX/screenY （相对屏幕坐标）

3. 阻止事件流

event.stopPropagetion()  //主流浏览器
event.cancelBubble = true //IE浏览器
冒泡型、捕捉型都可以进行阻止

4. 阻止浏览器默认动作

事件对象.preventDefault()   //主流浏览器
事件对象.returnValue=false   //IE浏览器
return false  //dom1级事件设置

5. 获取被触发键盘键子信息

event.keyCode 获得键盘对应的键值码信息，返回的为ASC码

加载事件 onload

JS代码执行时如果涉及到html或者css时，需要让html和css执行后，在执行js代码，但通过加载事件可以实现JS代码写在html和css代码之前
具体设置：

//方式1（不推荐）

//方式2
//在js中书写
window.load=加载函数();