javascript事件委托的用法及其好处简析
更新时间：2016年04月04日 10:10:48 作者：向婷风
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
本文详细介绍了前端处理.xlsx文件流并触发下载的完整实现方案,包括核心实现流程、关键增强功能、常见问题处理以及最佳实践建议,方案推荐使用FileSaver.js,适用于中型以上项目,需要的朋友可以参考下2025-03-03
设置checkbox为只读的方法有很多，在本文为大家详细介绍下两种比较实用的方法，感兴趣的朋友不要错过2013-10-10
本篇文章主要讲诉了前端跨域问题的几种解决方案，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了js实现简单模态框实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
看到大师级的canvas文字粒子动画，要10个jq币才能下载啊，我内心的小鹿蠢蠢欲动，我也要写一个。所以本文就来用Canvas实现简单的文字粒子流特效，希望对大家有所帮助2023-01-01
WebSocket最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种,下面这篇文章主要给大家介绍了关于如何优雅的使用WebSocket的相关资料,需要的朋友可以参考下2022-05-05
正因为JavaScript本身没有完整的类和继承的实现，并且我们也看到通过手工实现的方式存在很多问题， 因此对于这个富有挑战性的任务网上已经有很多实现了2009-07-07
这篇文章主要介绍了微信JS接口汇总及使用详解，十分的全面、详尽，包含分享到朋友圈，分享给朋友，分享到QQ，拍照或从手机相册中选图，识别音频并返回识别结果，使用微信内置地图查看位置等接口，有需要的小伙伴参考下吧2015-01-01
这篇文章主要为大家详细介绍了微信小程序uniapp添加悬浮菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
JavaScript字符串截取方法总结(slice、substring、substr等)
在开发中常常会需要截取字符串,而 JavaScript 提供了很多种方法实现截取操作,本文对各种方法做个整理,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2024-01-01
最新评论