JavaScript——事件对象event

事件流程

1. 事件流程规定了拥有同类事件的子元素和父元素同时被触发，谁先执行的这么一个规定

2. 整个事件流程分为    事件捕获    和    事件冒泡

    事件捕获：

        事件从最外层的元素开始执行，一层一层的往下，直至最精确的元素

    事件冒泡：

        事件从最精确的元素开始执行，一层一层的往上，直至最外层的元素

    注：高级浏览器才有事件捕获 IE只支持事件冒泡

3. 最外层元素

    

	IE	高级浏览器
最外层元素	document	window

4. 最精确元素    是不区分事件捕获和事件冒泡的

5. 事件流程执行顺序：

    ① 先事件捕获执行

    ② 再事件冒泡执行

    ③ 因为最精确元素不区分捕获和冒泡 所以最精确元素的事件执行顺序按照绑定事件的代码书写先后顺序

Dom0级事件

1. Dom0级绑定事件用法

dom.onxxx = function(e) {
	// 事件函数代码
}

2. Dom0级事件流程执行顺序

    子父元素dom0级绑定同类事件同时触发时事件执行顺序：按照事件冒泡的顺序进行执行

//点击box2   输出 box2 box1 box
box.onclick = function() {
	console.log("box")
}	
box2.onclick = function() {
	console.log("box2")
}
box1.onclick = function() {
	console.log("box1")
}

3. Dom0级移除事件用法

dom.onxxx = null;

dom2级事件

1. Dom2级绑定事件

    addEventListener(type, handler, boolean)

    type: 字符串 事件类型名称  注意： 是不带“on”的事件类型

    handler: 处理的函数

    boolean: 布尔值 false是冒泡阶段，true是捕获阶段

2. Dom2级移除事件

    removeEventListener(type, handler, boolean)

    type: 字符串 事件类型名称  注意： 是不带“on”的事件类型

    handler: 处理的函数

    boolean: 布尔值 false是冒泡阶段，true是捕获阶段

    注意： 要删除的事件，必须和addEventListener 的那个事件是同一个（地址相同）才能移除成功

3. IE中高级绑定事件

    ① 在IE中是不支持addEventListener, 支持自己的attachEvent

    ② IE只支持事件冒泡 不支持事件捕获

    ③ 绑定事件

        attachEvent(type, handler)

        type: 字符串 表示事件类型， 注意: 是带：“on”的类型事件

        handler： 要处理的函数

        没有第三个参数， 所以说不支持捕获阶段。

    ④ 移除事件

        detachEvent(type, handler)

        type: 字符串 表示事件类型， 注意: 是带：“on”的类型事件

        跟addEventListener 用法一模一样 但是没有第三个参数。

  注意： 要删除的事件， 必须和attachEvent 的那个事件是同一个（地址相同）才能移除成功

4. Dom2级事件流程执行顺序

    子父元素dom2级绑定同类事件同时触发时事件执行顺序：    

    ① 先事件捕获执行

    ② 再事件冒泡执行

    ③ 因为最精确元素不区分捕获和冒泡 所以最精确元素按照绑定事件的先后顺序

    

//点击box2  
// 输出    box捕获 box1捕获 box2冒泡 box2捕获 box1冒泡 box冒泡 
box.addEventListener("click", function() {
    console.log("box  冒泡")
}, false)
box1.addEventListener("click", function() {
    console.log("box1  冒泡")
}, false)
box2.addEventListener("click", function() {
    console.log("box2  冒泡")
}, false)
box.addEventListener("click", function() {
    console.log("box  捕获")
}, true)
box1.addEventListener("click", function() {
    console.log("box1  捕获")
}, true)
box2.addEventListener("click", function() {
    console.log("box2  捕获")
}, true)

dom0级和dom2级综合运用绑定事件的事件流程执行顺序

子父元素dom0级和dom2级绑定同类事件同时触发时事件执行顺序：    

    dom0级按照事件冒泡的顺序进行执行

    ① 先事件捕获执行

    ② 再事件冒泡执行

    ③ 因为最精确元素不区分捕获和冒泡 所以最精确元素按照绑定事件的先后顺序

//点击box2  
// 输出    box捕获 box1捕获 box2冒泡 box2捕获 box2冒泡 box1冒泡 box冒泡 
// dom0级绑定事件 绑定到冒泡阶段
box.onclick = function() {
    console.log("box 冒泡")
}		
box1.onclick = function() {
    console.log("box1 冒泡")
}
box2.onclick = function() {
    console.log("box2 冒泡")
}
// dom2级绑定事件 绑定到捕获和冒泡阶段
box.addEventListener("click", function() {
    console.log("box  捕获")
}, true)
box1.addEventListener("click", function() {
    console.log("box1  捕获")
}, true)
box2.addEventListener("click", function() {
    console.log("box2  捕获")
}, true)		
box2.addEventListener("click", function() {
    console.log("box2  冒泡")
}, false)

dom0级和dom2级的addEventListener区别

① 绑定事件数量：

dom0级 只能给一个元素的一个事件绑定一个函数

dom2级 可以给一个元素的一个事件绑定多个函数

② 执行顺序（给同一元素绑定同类事件）：

按照代码的绑定书写先后顺序

③ 可以同时存在

④ this指向

指向绑定事件的元素

dom0级和IE中高级绑定事件attachEvent区别

① 绑定事件数量：

dom0级 只能给一个元素的一个事件绑定一个函数

attachEvent 可以给一个元素的一个事件绑定多个函数

② 执行顺序（给同一元素绑定同类事件）：

dom0级优先执行，attachEvent事件是逆序执行的

//输出 box 我是IE高级事件222 我是dom2级高级事件111 我是IE高级事件333
box.attachEvent("onclick", function() {
    console.log("我是IE高级事件333")
})
box.attachEvent("onclick", function() {
    console.log("我是dom2级高级事件111");
    console.log(this)
})
box.attachEvent("onclick", function() {
    console.log("我是IE高级事件222")
})	
box.onclick = function() {
    console.log("box");
    console.log(this)
}

③ 可以同时存在

④ this指向

dom0级 指向绑定事件的元素

attachEvent         指向window

绑定事件总结：

dom0级：

使用方式： dom.onclick = function() {}

只可以绑定一个事件函数

可以与dom2级同时存在

执行顺序是 代码的绑定顺序

this指向 绑定事件的元素

addEventListener:

使用方式：dom.addEventListener(type, handler, boolean)

可以绑定多个事件函数

执行顺序是 顺序执行

this指向 绑定事件的元素

attachEvent:

使用方式： dom.attachEvent(type, handler)

可以绑定多个事件函数

执行顺序是 逆序执行 dom0级优先执行

this指向 window  

自定义兼容绑定事件函数

function bindEvent(dom, type, handler) {
    if (dom.addEventListener) {
	// 说明是高级浏览器
	dom.addEventListener(type, handler, false)
    } else if (dom.attachEvent) {
	// 说明是IE中的高级版本
	dom.attachEvent("on" + type, handler)
    } else {
	// 说明是IE的低级版本， 或者其他不知名的浏览器
	dom["on" + type] = handler;
    }
}

事件对象

当事件被触发的时候，会产生一系列的信息，这些信息会被浏览器收集起来封装成一个对象，并传入到事件函数中

	事件对象event
高级浏览器	可以传递到事件函数中的，在event（事件函数arguments[0]）
IE浏览器	没有被传递到事件函数中，而是在window.event

兼容方式： var e = e || window.event

阻止事件冒泡

1. 高级浏览器的阻止冒泡方式

e.stopPropagation();

2. IE中的阻止冒泡方式

e.cancelBubble = true;

阻止默认事件

当点击有些标签时候， 会执行一些默认的事件、 行为

比如：

a标签有href属性， 它会跳转页面

submit 会默认提交表单

当鼠标滚轮滚动时候， 如果页面有滚动条， 自动改变滚动条的位置

这些都称之为默认事件、行为

1. 高级浏览器阻止默认事件的方式：

e.preventDefault();

注意：如果是dom0级 还可以使用 return false

如果是dom2级 使用 return false 不可以阻止默认事件

2. IE中的阻止默认事件方式：

e.returnValue = false;

注意：如果是dom0级 还可以使用 return false