js事件委托，可以使新添加的元素具有事件(event运用)

最新推荐文章于 2020-11-23 06:33:22 发布

weixin_33691817

最新推荐文章于 2020-11-23 06:33:22 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：https://yq.aliyun.com/articles/486496

本文通过一个具体的HTML与JavaScript示例代码，展示了如何使用JavaScript操作DOM元素，包括为列表项添加样式以及实现动态添加列表项的功能。示例中详细介绍了事件处理及DOM操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

miaov视频教程 http://study.163.com/course/courseMain.htm?courseId=231002

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<ul id="ul1">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
  <li>5555</li>
</ul>
<input type="button" id="add" value="添加"/>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');  //ul
var oLi=oUl.getElementsByTagName('li');  //li
var iNow=4;
for(i=0;i<oLi.length;i++){
       this.onclick=function(ev){       //这里不用this，不能发生冒泡
       ev=ev || window.event;            //event兼容
       target=ev.srcElement || ev.target;  //event.target兼容
       if(target.nodeName.toLowerCase() == "li"){    //判断nodeName
           target.style.backgroundColor='red';   //背景红色
       }
   }
}
var oAdd=document.getElementById('add'); //点击添加按钮
  oAdd.onclick=function(){
    iNow++;
    var aLi=document.createElement('li');   //创建li节点
    aLi.innerHTML=iNow*1111;
    oUl.appendChild(aLi);                  //添加li节点
  }
}
</script>
</body>
</html>