1 国庆过完了 虽然系统的学习了BOM, DOM, DOM扩展，DOM2, DOM3的相关内容 但是为国庆制定的学习计划却未能完成 还是太懒了！ 2 今天来看看 js的事件流， 事件处理程序， 事件对象吧。 3 4 一：事件流 5 6 在 javascript 中 什么是事件流? 7 其实也就是 事件传播的过程和阶段， 事件流 总共有3个阶段 8 1. 事件捕获阶段。 9 2. 目标元素阶段。 10 3. 事件冒泡阶段。 11 12 这三个阶段的 顺序和过程也是按上面的 1，2，3的顺序传播事件的。 13 14 首先来说事件捕获， 举个例子： 15 16 var oBtn = document.getElementById("btn"); 17 oBtn.onclick = function () { 18 alert("1"); 19 }; 20 21 我们为页面上 一个按钮元素 绑定一个事件处理程序，当我们点击这个按钮的时候， 22 首先 接收到这个消息的是 window对象。 如果这时候 window对象上 也绑定了onclick事件， 23 那么就会触发 window对象上的onclick属性所保存的事件处理函数. 24 如果没有 则事件就会传递向document对象. 25 同理 如果document对象上也绑定了onclick事件，那么事件也会被触发. 26 然后 事件依次向下传递给 27 html, 28 body, 29 div... 30 目标元素。 31 直到事件传递到目标元素的父元素的时候 事件捕获阶段 就算完成了 。 32 33 然后 当事件传递到达目标元素的时候 这就是第二个阶段 目标元素阶段了（虽然也属于事件冒泡的一部分） 34 这时候就会触发 我们绑定到目标元素上面的事件处理函数了 35 36 最后一个阶段 就是事件冒泡阶段： 37 也就是 事件离开目标元素 顺着事件捕获时候的路 依次返回的阶段 就是事件冒泡阶段 。 38 事件最终也是会冒泡到window对象上才会停止。 39 40 以上就是我们说的 整个事件流的过程 。 41 42 二: 事件处理程序 43 44 js 的事件处理程序了有三种绑定事件处理程序的方法 45 46 1.为html元素特性赋值一个事件处理函数。 47 2.DOM0级绑定事件处理函数的方式。 48 3.DOM2级绑定事件处理程序的方式。 49 50 我们先来看看第一种 为html元素 添加事件处理程序 51 52 function show() { 53 alert("1") 54 } 55 <button id="btn" onclick="show()"></button> 56 57 这种绑定事件的好处 暂时没想到， 58 坏处了 倒是有几点： 59 1.违背w3c的标准 结构， 样式， 行为没有做到完全分离。 60 2.可阅读 和 可维护性差，紧密耦合。 61 62 第二种是DOM级的绑定方式 63 64 var oBtn = document.getElementById("btn"); 65 oBtn.onclick = function () { 66 alert("1"); 67 }; 68 69 为DOM元素的属性直接绑定 事件处理函数 70 这种绑定事件的方式优缺点如下： 71 1.结构 与 行为分离， 可阅读，可维护，低耦合。 72 2.事件处理函数的作用域就是 DOM元素的作用域 很容易访问当前 DOM元素的其它属性什么的。 73 3.缺点就是 只能为同类型的事件绑定一个事件处理函数。 74 75 第三种是 DOM2级绑定事件的方式 76 77 以IE9+的主流浏览器支持: 78 addEventListener, 79 removeEvenetListen. 80 81 IE6,IE7,IE8支持 82 attachEvent, 83 detachEvent. 84 85 以下是 绑定事件处理程序的跨浏览器兼容写法 86 87 var addEvent = (function () { 88 if (document.addEventListener) { 89 return function (el, type, fn) { 90 el.addEventListener(type, fn, false); 91 } 92 } else { 93 return function (el, type, fn) { 94 el.attachEvent('on' + type, function () { 95 return fn.call(el, window.event); 96 }); 97 } 98 } 99 })(); 100 101 这里其实有个地方值得我们思考 102 也就是 103 el.addEventListener(type, fn, false);的第三个参数 104 这个第三个参数为false的时候 表示事件只在冒泡阶段可以触发 在捕获阶段 不触发。一般也是false 105 因为 在冒泡阶段触发事件 可以做到最大的浏览器兼容性。 106 还有就是 如果设置为了 true那么 有可能会在捕获阶段 触发目标元素的事件处程序 那样的话 目标元素的事件处理程序有可能被触发两次。（书上是这么说的 我也没有实践过！！！）。 107 108 109 为什么 attachEvent绑定事件的时候 不用传入第三个参数了？？？ 110 因为 attachEvent是针对 IE6,ie7,ie8浏览器的 它们只支持 事件冒泡 不支持 事件捕获。 111 112 以上绑定事件处理程序 也以相同的方法 删除已经绑定的事件处理程序，不过在删除的时候 只能删除指定的事件处理函数， 113 删除匿名事件处理函数是没有用的 根本不是一个对象。 114 var removeEvent = function( obj, type, fn ) { 115 if (obj.removeEventListener) 116 obj.removeEventListener( type, fn, false ); 117 else if (obj.detachEvent) { 118 obj.detachEvent( "on"+type, obj["e"+type+fn] ); 119 obj["e"+type+fn] = null; 120 } 121 }; 122 123 三: 事件对象 124 125 事件对象 分为 DOM事件对象 和 IE事件对象 126 事件对象 只在事件处理函数执行的时候存在 函数执行完毕 事件对象就消失。 127 事件对象 在事件处理函数被执行的时候 作为第一个参数被传入事件处理函数中，IE6，7，8的事件对象 被挂在到了window对象上 128 直接在window对象上取 129 130 DOM事件对象有以下属性 131 132 bubbles 返回布尔值，指示事件是否是起泡事件类型。 133 cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。 134 currentTarget 返回其事件监听器触发该事件的元素。 135 eventPhase 返回事件传播的当前阶段。 136 target 返回触发此事件的元素（事件的目标节点）。 137 timeStamp 返回事件生成的日期和时间。 138 type 返回当前 Event 对象表示的事件的名称。 139 initEvent() 初始化新创建的 Event 对象的属性。 140 preventDefault() 通知浏览器不要执行与事件关联的默认动作。 141 stopPropagation() 不再派发事件。 142 143 144 145 IE的事件对象包括下面这些属性 146 147 cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 148 fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 149 keyCode 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 150 offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 151 returnValue 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 152 srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 153 toElement 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 154 x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 155 156 各自大多数 都有对应的属性 就不一一列举了。 157 158 阻止事件冒泡 和 默认事件： 159 160 var stopEvent = function(e){ 161 e = e || window.event; 162 if(e.preventDefault) { 163 e.preventDefault(); 164 e.stopPropagation(); 165 }else{ 166 e.returnValue = false; 167 e.cancelBubble = true; 168 } 169 }, 170 171 172 173 在通过DOM2级事件绑定事件的时候 为同一个事件类型 绑定多个事件处理函数的时候 174 175 DOM2级标准的 事件执行顺序是按照绑定事件的顺序 依次执行 176 而 IE6，7，8的 执行顺序刚好相反 177 178 但是 事件对象有个属性 可以阻止别的同类型事件处理函数的触发 而让本身先触发 这就是事件优先级 179 stopImmediatePropagation属性就有这个作用。 180 181 最后是自定义事件的写法： 182 183 var eve = new Event("custome"); 184 element.addEventListener("custome", function(){ 185 console.log("custome"); 186 }) 187 188 element.dispatchEvent(eve); 189 190 191 192 继续努力 今晚就到这里吧 晚安 布丁-啊————————————————————————
国庆过完了 虽然系统的学习了BOM, DOM, DOM扩展，DOM2, DOM3的相关内容 但是为国庆制定的学习计划却未能完成 还是太懒了！
今天来看看 js的事件流， 事件处理程序， 事件对象吧。
一：事件流
在 javascript 中 什么是事件流?
其实也就是 事件传播的过程和阶段， 事件流 总共有3个阶段
1. 事件捕获阶段。
2. 目标元素阶段。
3. 事件冒泡阶段。
这三个阶段的 顺序和过程也是按上面的 1，2，3的顺序传播事件的。
首先来说事件捕获， 举个例子：
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("1");
};
我们为页面上 一个按钮元素 绑定一个事件处理程序，当我们点击这个按钮的时候，
首先 接收到这个消息的是 window对象。 如果这时候 window对象上 也绑定了onclick事件，
那么就会触发 window对象上的onclick属性所保存的事件处理函数.
如果没有 则事件就会传递向document对象.
同理 如果document对象上也绑定了onclick事件，那么事件也会被触发.
然后 事件依次向下传递给
html,
body,
div...
目标元素。
直到事件传递到目标元素的父元素的时候 事件捕获阶段 就算完成了 。
然后 当事件传递到达目标元素的时候 这就是第二个阶段 目标元素阶段了（虽然也属于事件冒泡的一部分）
这时候就会触发 我们绑定到目标元素上面的事件处理函数了
最后一个阶段 就是事件冒泡阶段：
也就是 事件离开目标元素 顺着事件捕获时候的路 依次返回的阶段 就是事件冒泡阶段 。
事件最终也是会冒泡到window对象上才会停止。
以上就是我们说的 整个事件流的过程 。
二: 事件处理程序
js 的事件处理程序了有三种绑定事件处理程序的方法
1.为html元素特性赋值一个事件处理函数。
2.DOM0级绑定事件处理函数的方式。
3.DOM2级绑定事件处理程序的方式。
我们先来看看第一种 为html元素 添加事件处理程序
function show() {
alert("1")
}
<button id="btn" onclick="show()"></button>
这种绑定事件的好处 暂时没想到，
坏处了 倒是有几点：
1.违背w3c的标准 结构， 样式， 行为没有做到完全分离。
2.可阅读 和 可维护性差，紧密耦合。
第二种是DOM级的绑定方式
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("1");
};
为DOM元素的属性直接绑定 事件处理函数
这种绑定事件的方式优缺点如下：
1.结构 与 行为分离， 可阅读，可维护，低耦合。
2.事件处理函数的作用域就是 DOM元素的作用域 很容易访问当前 DOM元素的其它属性什么的。
3.缺点就是 只能为同类型的事件绑定一个事件处理函数。
第三种是 DOM2级绑定事件的方式
以IE9+的主流浏览器支持:
addEventListener,
removeEvenetListen.
IE6,IE7,IE8支持
attachEvent,
detachEvent.
以下是 绑定事件处理程序的跨浏览器兼容写法
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
}
} else {
return function (el, type, fn) {
el.attachEvent('on' + type, function () {
return fn.call(el, window.event);
});
}
}
})();
这里其实有个地方值得我们思考
也就是
el.addEventListener(type, fn, false);的第三个参数
这个第三个参数为false的时候 表示事件只在冒泡阶段可以触发 在捕获阶段 不触发。一般也是false
因为 在冒泡阶段触发事件 可以做到最大的浏览器兼容性。
还有就是 如果设置为了 true那么 有可能会在捕获阶段 触发目标元素的事件处程序 那样的话 目标元素的事件处理程序有可能被触发两次。（书上是这么说的 我也没有实践过！！！）。
为什么 attachEvent绑定事件的时候 不用传入第三个参数了？？？
因为 attachEvent是针对 IE6,ie7,ie8浏览器的 它们只支持 事件冒泡 不支持 事件捕获。
以上绑定事件处理程序 也以相同的方法 删除已经绑定的事件处理程序，不过在删除的时候 只能删除指定的事件处理函数，
删除匿名事件处理函数是没有用的 根本不是一个对象。
var removeEvent = function( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj["e"+type+fn] );
obj["e"+type+fn] = null;
}
};
三: 事件对象
事件对象 分为 DOM事件对象 和 IE事件对象
事件对象 只在事件处理函数执行的时候存在 函数执行完毕 事件对象就消失。
事件对象 在事件处理函数被执行的时候 作为第一个参数被传入事件处理函数中，IE6，7，8的事件对象 被挂在到了window对象上
直接在window对象上取
DOM事件对象有以下属性
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
IE的事件对象包括下面这些属性
cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。
各自大多数 都有对应的属性 就不一一列举了。
阻止事件冒泡 和 默认事件：
var stopEvent = function(e){
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
},
在通过DOM2级事件绑定事件的时候 为同一个事件类型 绑定多个事件处理函数的时候
DOM2级标准的 事件执行顺序是按照绑定事件的顺序 依次执行
而 IE6，7，8的 执行顺序刚好相反
但是 事件对象有个属性 可以阻止别的同类型事件处理函数的触发 而让本身先触发 这就是事件优先级
stopImmediatePropagation属性就有这个作用。
最后是自定义事件的写法：
var eve = new Event("custome");
element.addEventListener("custome", function(){
console.log("custome");
})
element.dispatchEvent(eve);
继续努力 今晚就到这里吧 晚安 布丁-啊————————————————————————