下拉框触发单击事件_JavaScript事件详解仓库管理系统论文
想必⼤家对JavaScript的事件都不陌⽣吧，⼤多数在⽹站开发的时候都会⽤到，这也是JavaScript的基本功之⼀，本⽂就为各位梳理⼀下相关知识。
JavaScript事件模型
JavaScript事件模型，也就是事件机制，分为两类DOM0级事件模型和DOM2级事件模型。
DOM0级事件模型
DOM0级事件模型是早期的事件模型，⽐如说⼀个onclick事件
缺点：
⽆法绑定多个相同的事件，注册多个同类型的函数的话，就会发⽣覆盖，之前注册的函数就会⽆效
var event=event||window.event;
var target=event.target||event.srcElement
alert(target);
}
DOM2级事件模型
在DOM2级中使⽤addEventListener和removeEventListener来注册和解除事件（IE8及之前版本不⽀持，IE7、IE8⽤ attachEvent）。这种函数较之前的⽅法好处是⼀个dom对象可以注册多个相同类型的事件，不会发⽣事件的覆盖，会依次的执⾏各个事件函数。
addEventListener('事件名称','事件回调','捕获/冒泡') ，第三个参数默认为false，捕获：true，冒泡：false 阻⽌冒泡：event.stopPropagation()
阻⽌默认动作：event.preventDefault()
IE模型⽤attachEvent，兼容IE8以下浏览器（ie 6 7），阻⽌冒泡 event.cancelBubble=true，阻⽌默认 urnValue=false
//这段代码，我们使⽤了捕获事件，由于inner是嵌套在outer中的
//所以我们知道当使⽤捕获的时候outer是应该⾸先捕获到这个事件的
//其次inner才能捕获到这个事件。那么结果就是outer⾸先执⾏，其次是inner执⾏。
var click = ElementById('inner');
var clickouter = ElementById('outer');
click.addEventListener('click',function(){
alert('inner show');
},true);
clickouter.addEventListener('click',function(){
alert('outer show');
},true);
热工自动化技术//如果这么改：就先执⾏inner 再执⾏outer
clickouter.addEventListener('click',function(){
alert('outer show');
2010年1月3日
},false);
DOM事件流
事件流税收楔子
1.先⾃顶向⾥⼀层⼀层地触发捕获，⼀直到当前元素，然后⾃⾥向顶⼀层⼀层触发冒泡。 2.最顶层是window。
3.使⽤捕获的⽅法：将addEventListener 的第三个参数设为true。
事件流⼜称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于⽬标阶段(target phase)和事件冒泡阶段(bubbling phase)
⾸先发⽣的是事件捕获，为截获事件提供了机会。然后是实际的⽬标接收到事件，最后⼀个阶段是冒泡阶段，可以在这个阶段对事件做出响应
如图所⽰：事件捕获（123）和事件冒泡（4567）
为了更好的说明DOM标准中的事件流原理，我们把它放在“事件传送”⼩结⾥来更具体的解释。显然，如果为⼀个超链接添加了click事件，那么当该链接被点击时该事件就会被执⾏。但如果把该事件指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发该事件。这是因为事件不仅仅对触发的⽬标元素产⽣影响，它们还会对沿着DOM结构的所有元素产⽣影响。这就是⼤家所熟悉的事件转送。W3C事件模型中明确地指出了事件转送的原理。事件传送可以分为3个阶段。 如图：标准的事件转送模式
事件捕获（Capturing）阶段
事件将沿着DOM树向下转送，⽬标节点的每⼀个祖先节点，直⾄⽬标节点。例如，若⽤户单击了⼀个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。在此过程中，浏览器都会检测针对该事件的捕捉事件，并且运⾏这件事件。
⽬标（target）阶段
浏览器在查到已经指定给⽬标事件的事件之后，就会运⾏ 该事件。⽬标节点就是触发事件的DOM节点。例如，如果⽤户单击⼀个超链接，那么该链接就是⽬标节点（此时的⽬标节点实际上是超链接内的⽂本节点）。
冒泡（Bubbling）阶段
事件将沿着DOM树向上转送，再次逐个访问⽬标元素的祖先节点到document节点。该过程中的每⼀步。浏览器都将检测那些不是捕捉事件的事件，并执⾏它们。
事件委托
利⽤触发冒泡事件的原理，只指定⼀个事件处理程序，就可以管理某⼀类型的所有事件。⼀般就是⼀次性将⽗元素绑定事件，通过判断event.target 来执⾏相应的⽅法，后续添加⼦元素的时候不⽤再次绑定。
在JavaScript中，添加到页⾯上的事件处理程序数量将直接关系到页⾯的整体运⾏性能，因为需要不断的与dom节点进⾏交互，访问dom 的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页⾯的交互就绪时间，这就是为什么性能优化的主要思想之⼀就是减少DOM操作的原因；如果要⽤事件委托，就会将所有的操作放到js程序⾥⾯，与dom的操作就只需要交互⼀次，这样就能⼤⼤的减少与dom 的交互次数，提⾼性能；
每个函数都是⼀个对象，是对象就会占⽤内存，对象越多，内存占⽤率就越⼤，⾃然性能就越差了，⽐如上⾯的100个li，就要占⽤100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果⽤事件委托，那么我们就可以只对它的⽗级（如果只有⼀个⽗级）这⼀个
对象进⾏操作，这样我们就需要⼀个内存空间就够了，是不是省了很多，⾃然性能就会更好。
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
tiedaobu
<li>444</li>
</ul>
var oUl = ElementById("ul1");
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
LowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
更多：
关于我
Web开发知识点总结
参考资料：
JavaScript事件模型
JavaScript事件处理机制解析
ADAMSGOLF深⼊理解DOM事件机制系列第⼀篇——事件流js中的事件委托或是事件代理详解
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议