li>
5 </ul>
6 <script>
7 var oBtn = document.getElementsByTagName( "input" )[0];
8 var oUl = document.getElementsByTagName( "ul" )[0];
9 var aLi = document.getElementsByTagName( "li" );
10 oBtn.onclick = function(){
11 var oLi = document.createElement( "li" );
12 oLi.innerHTML = 'ghostwu';
13 oUl.appendChild( oLi );
14 }
15 for( var i = 0, len = aLi.length; i < len; i++ ){
16 aLi[i].onmouseover = function(){
17 this.style.backgroundColor = 'red';
18 }
19 aLi[i].onmouseout = function(){
20 this.style.backgroundColor = '';
21 }
22 }
23
24 </script>
新创建的li元素，是不能绑定到onmouseover和onmouseout事件的，我们采用委托模式之后，可以这么做
1 <input type="button" value="创建">
2 <ul>
3 <li>ghostwu1</li>
4 <li>ghostwu2</li>
5 </ul>
6 <script>
7 var oBtn = document.getElementsByTagName("input")[0];
8 var oUl = document.getElementsByTagName("ul")[0];
9 var aLi = document.getElementsByTagName("li");
10 oBtn.onclick = function () {
11 var oLi = document.createElement("li");
12 oLi.innerHTML = 'ghostwu';
13 oUl.appendChild(oLi);
14 }
15 oUl.onmouseover = function( ev ){
16 var oEvent = ev || event;
17 var target = oEvent.target || oEvent.srcElement;
18 if ( target.tagName.toLowerCase() == 'li' ) {
19 target.style.backgroundColor = 'red';
20 }
21 }
22 oUl.onmouseout = function( ev ){
23 var oEvent = ev || event;
24 var target = oEvent.target || oEvent.srcElement;
25 if ( target.tagName.toLowerCase() == 'li' ) {
26 target.style.backgroundColor = '';
27 }
28 }
29 </script>
至此，我们解决了第二个问题：当动态创建dom时，如果给动态创建的dom绑定上事件和相应的特效
最后，我们结合委托模式，来实战一个微博发布的功能，微博发布之后，给动态创建的dom元素添加手风琴折叠功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<form class="form-horizontal">
<div class="form-group">
<input id="title" type="text" class="form-control" placeholder="请输入标题">
</div>
<div class="form-group">
<textarea name="" id="txt" cols="30" rows="5" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="button" value="发布" class="btn btn-primary" id="btn-publish">
</div>
</form>
</div>
<div class="col-md-offset-3 col-md-6" id="content">
</div>
</div>
</div>
</body>
<script>
var oBtnPublish = document.getElementById("btn-publish");
var aTpl = [
'<div class="panel panel