首页 > 代码库 > jQuery完整的事件委托(on())
jQuery完整的事件委托(on())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery完整的事件委托(on())</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
$("#box").on("click","div,p,li,span",function (event) {
if(event.target.nodeName.toLowerCase()=="div"){ //nodeName 元素节点名称
if(event.target.id=="div1"){
$(this).css({"background-color":"orange"});
}
else if(event.target.id=="div2"){
$(this).css({"background-color":"yellow"});
}
else if(event.target.id=="div3"){
$(this).css({"background-color":"blue"});
}
else if(event.target.id=="div4"){
$(this).css({"background-color":"pink"});
}
}
if(event.target.nodeName.toLowerCase()=="li"){
$(this).css({"background-color":"red"});
}
if(event.target.nodeName.toLowerCase()=="p"){
$(this).css({"background-color":"black"})
}
if(event.target.nodeName.toLowerCase()=="span"){
$(this).css({"background-color":"green"})
}
})
})
</script>
<style>
div{ width: 200px;height: 200px;border: 1px solid black; }
p{width: 200px;height: 100px;border: 1px solid black; color: white }
span{width: 400px;height:100px;border: 1px solid black; }
li{width: 200px;height: 100px;border: 1px solid black; }
</style>
</head>
<body>
<div id="box">
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<div id="div4">我是div4</div>
<p>我是p</p>
<li>我是li</li>
<span>我是span</span>
</div>
</body>
</html>
jQuery完整的事件委托(on())
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。