编程 Javascript

javascript事件委托的用法及其好处简析

Posted in Javascript onApril 04, 2016

本文为大家简单介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

javascript事件委托的用法及其好处简析

- Author -

向婷风

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Firefox div高度自适应

Apr 28 Javascript

javascript对talbe进行动态添加、删除、验证实现代码

Mar 29 Javascript

使用原生JS实现弹出层特效

Dec 22 Javascript

jQuery解析json数据实例分析

Nov 24 Javascript

Angularjs 实现一个幻灯片示例代码

Sep 08 Javascript

Javascript从数组中随机取出不同元素的两种方法

Sep 22 Javascript

bootstrap 下拉多选框进行多选传值问题代码分析

Feb 14 Javascript

原生JavaScript实现的简单省市县三级联动功能示例

May 27 Javascript

JS中将多个逗号替换为一个逗号的实现代码

Jun 23 Javascript

ReactJS实现表单的单选多选和反选的示例

Oct 13 Javascript

vue实现带复选框的树形菜单

May 27 Javascript

ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

Jan 22 Javascript

基于javascript制作微博发布栏效果

Apr 04 #Javascript

纯js实现手风琴效果

Apr 17 #Javascript

AngularJS中的$watch()，$digest()和$apply()区分

Apr 04 #Javascript

Angular 根据 service 的状态更新 directive

Apr 03 #Javascript

jQuery中的Deferred和promise 的区别

Apr 03 #Javascript

再次谈论React.js实现原生js拖拽效果引起的一系列问题

Apr 03 #Javascript

jQuery qrcode生成二维码的方法

Apr 03 #Javascript