您的位置：首页 > Web前端 > JavaScript

js原生事件委托

2017-07-24 11:54 489 查看

1.普通的是事件委托这里有一个兼容性要注意,var e=e|| window.event;var target = e.target || e.srcElement;
都是为了兼容IE

<body>
<ul id="ul1">

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>
</ul>
<script type="text/javascript">
window.onload=function(){
var oUl = document.getElementById("ul1");
oUl.onclick=function(e){
var e=e|| window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == "li"){
alert(target.innerHTML)
}
}
}
</script>
</body>

2,子元素每个事件都不相同,

<body>
<div id="box">

<input type="button" id="add" value="添加" />

<input type="button" id="remove" value="删除" />

<input type="button" id="move" value="移动" />

<input type="button" id="select" value="选择" />

</div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
oBox.onclick=function(e){
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'input'){
switch(target.id){
case 'add':
alert('添加');
break;
case 'remove':
alert('删除');
break;
case 'move':
alert('移动');
break;
case 'select':
alert('选择');
}
}
}
</script>

3.新增子元素如何事件委托

<body>
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
<script type="text/javascript">
var oBtn = document.getElementById("btn");

var oUl = document.getElementById("ul1");

var aLi = oUl.getElementsByTagName('li');

var num = 4;



//事件委托，添加的子元素也有事件

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 = "#fff";

}



};

oBtn.onclick = function(){

num++;

var oLi = document.createElement('li');

oLi.innerHTML = 111*num;

oUl.appendChild(oLi)

}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航