事件委托

最新推荐文章于 2025-08-11 19:52:03 发布

转载最新推荐文章于 2025-08-11 19:52:03 发布 · 43 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gxw123/p/9493359.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML和JavaScript实现的简单示例，包括样式设置、元素操作及事件处理等内容。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
width: 100px;
height: 50px;
background-color: red;
}
li{
float: left;
}

</style>
</head>
<body>
<ul onclick="u()" id="u">
<span>aaaaaaaaaaaaaa</span>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<span>aaaaaaaaaaaaaa</span>
<P id="1" onclick="n()">aaaaaaaaaaaa</P>
</ul>

ul.onclick = function (event){
var e = event || window.event,
source = e.target || e.srcElement;
console.log(source);

/*if (source.nodeName.toLowerCase() == "li") {

};*/
}

function n(e){
stopPropagation(e);
}

function stopPropagation(e) {
if (window.event) {
window.event.cancelBubble = true;
}else{

e.stopPropagation();
}

}

function addElement(){
var li = document.createElement('li');
li.innerHTML="新元素";
li.setAttribute('id', 1);
ul.appendChild(li);

}
addElement();

</script>
</body>
</html>

转载于:https://www.cnblogs.com/gxw123/p/9493359.html