js事件委托和call（）作用

最新推荐文章于 2022-05-03 13:02:03 发布

chiyanxi1706

最新推荐文章于 2022-05-03 13:02:03 发布

阅读量133

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/kiss69224/blog/906271

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script type="text/javascript">
window.onload = function() {
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>
<div id="box" style="width: 100%;background: red;">
<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>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onclick = function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLocaleLowerCase() == 'input') {
switch (target.id) {
case 'add':
alert('添加');
console.log(target.id)
break;
case 'remove':
alert('删除');
break;
case 'move':
alert('移动');
break;
case 'select':
alert('选择');
break;
}
}
}
}
</script>

<ul id="test">
<li>
<p>11111111111</p>
</li>
<li>
<div>
22222222
</div>
</li>
<li>
<span>3333333333</span>
</li>
<li>4444444</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementById('test');
oUl.addEventListener('click', function(ev) {
var target = ev.target;
// console.log(target)
while (target !== oUl) {

if (target.tagName.toLowerCase() == 'li') {
console.log('li click~');
break;
}
//吧target更新成li

target = target.parentNode;
// console.log(target)
}
})
</script>
<script type="text/javascript">
//call作用
var test = "Tony";
var myobj = {
test: "Tom"
};

function doSomething(name, age) {
alert(this.test + ":" + name + age);
}

doSomething("Tony", 23); //普通调用结果Tony:Tony23
doSomething.call(myobj, "Tony", 23); //call调用结果Tom:Tony23
</script>
</body>

</html>

转载于:https://my.oschina.net/kiss69224/blog/906271

chiyanxi1706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件委托和call（）作用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> ...
复制链接

扫一扫