javascript事件委托的用法及其好处简析
本文为大家简单介绍了javascript事件委托的用法及其好处，供大家参考，具体内容如下
事件委托:利用冒泡的原理，把事件加到父级上，触发执行效果，
好处：提高性能，新添加的元素还会有之前的事件。
event对象：事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
获取事件源：
IE：window.event.srcElement
标准下：event.target target.nodeName来判断是哪个标签
代码应用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
var iNow=5;
//事件源的方法依然保留父级事件！
oUl.onmouseover=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='red';
}
}
oUl.onmouseout=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}
oBtn.onclick=function()
{
iNow++;
var oLi=document.createElement('li');
oLi.innerHTML=111*iNow;
oUl.appendChild(oLi);
}
}
</script>
</head>
<body >
<input type="button" value="添加" id='btn1'>
<ul id='ul1'>
<li>11111</li>
<li>22222</li>
<li>3333333</li>
<li>44444444</li>
<li>66666666</li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
-
主要内容：为什么要使用事件委托,事件委托实现原理,事件委托的优点,总结利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托（Event Delegation，也称为“事件代理”），是 JavaScript 中最热门的技术之一。 事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。 举个简单的例子，整个宿舍的同学都需要去取快递，一种方法是让他们
-
捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。 这个想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。 在处理程序中，我们获取 event.target 以查看事件实际发生的位置并进行处理。 让我们看一个示例 —— 反映中国古代哲学的 八卦图。 如下所示：在新窗口中打开 在沙箱中打开 其 HTML 如
-
问题内容： 谁能用JavaScript解释事件委托，它有什么用？ 问题答案： DOM事件委派是一种机制，它通过事件“冒泡”（也称为事件传播）的魔术，通过单个公共父节点而不是每个子节点来响应ui事件。 在元素上触发事件时，将发生以下情况： 事件被调度到其目标，并且在该目标中 找到的所有事件侦听器都会被触发。 然后，冒泡事件将触发所有其他事件侦听器，这些事件侦听器可通过向上跟随父链来查找在每个连续上注
-
本文向大家介绍JavaScript动态添加事件之事件委托，包括了JavaScript动态添加事件之事件委托的使用技巧和注意事项，需要的朋友参考一下 先给大家讲下什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到
-
本文向大家介绍事件委托的优点？相关面试题，主要包含被问及事件委托的优点？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 把一个元素响应事件（click、keydown......）的函数委托到另一个元素； 优点：减少内存消耗、动态绑定事件。
-
实现on,off的事件委托! 我们能根据之前的思路,利用同样的方法实现一个事件委托. 先来看看流程图 然后先看看结果是如何，毕竟流程图看的也不一定能懂。 最后我们再来看看代码 Kodo.deleEvents = []; //事件委托存放的事件 Kodo.deleId = 0; //事件委托的唯一标识 on: function(type, selector, fn) { if (typeo
-
本文向大家介绍js事件委托以及冒泡原理?相关面试题，主要包含被问及js事件委托以及冒泡原理?时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 事件委托是利用冒泡阶段的运行机制来实现的，就是把一个元素响应事件的函数委托到另一个元素，一般是把一组元素的事件委托到他的父元素上，委托的优点是 减少内存消耗，节约效率 动态绑定事件 事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onc
-
本文向大家介绍JavaScript事件委托技术实例分析，包括了JavaScript事件委托技术实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下： 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其