https://www.cnblogs.com/ning123/p/10624674.html
https://www.cnblogs.com/yad123/p/11561562.html
https://blog.csdn.net/dreams_deng/article/details/79260936
javaScript中事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript中事件委托</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 360px;
height: 360px;
}
td {
border:5px solid black;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<h2 style="color: #0000CD;">javaScript中事件委托</h2>
<table id="testTable">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script type="text/javascript">
/*
事件委托：
当有比较多的元素需要绑定某事件时,可以把事件绑定在他们的父元素上,委托给父元素来处理
*/
var tableNode = document.getElementById('testTable');
//有这么个需求：点击table表格中的td时，td的背景颜色变为绿色
/*
最笨的办法是在25个<td>上都绑定onclick事件，这种做法可以是可以，但是代价太大了，于是
乎，我们可以用事件委托，把onclick事件绑定到<td>的父元素<table>上，再利用事件对象的target来判断事
件具体落在了<table>的哪个地方上
点击<td>，实际上就等于点击了<table>，换句话说，点击<table>时，那必然会具体落在某个<td>上
*/
tableNode.onclick = function(ev) { //把onclick事件绑定到<td>的父元素<table>上
console.log(this, ev, ev.target, ev.srcElement, ev.target.nodeName);
// ev.target.style.background = 'SeaGreen';
if (ev.target.nodeName == 'TD') {
ev.target.style.background = 'SeaGreen';
}
}
</script>
</html>JQuery中的事件委托
扫描二维码关注公众号，回复：
9784384 查看本文章
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习22篇(事件委托)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
input[type=button] {
width: 200px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<h3 style="color: #cd1636;">JQuery学习22篇(事件委托)</h3>
<input id="input1" type="button" value="添加一个li">
<input id="input2" type="button" value="off()是on()的反向操作" οnclick="ul_off();">
<input id="input3" type="button" value="off()是on()的反向" οnclick="ul2_off();">
<ul id="nameList">
<li>令狐冲</li>
<li>韦小宝</li>
<li>张无忌</li>
</ul>
<ul id="seasonList">
<li>春</li>
<li>夏</li>
<li>秋</li>
</ul>
<table id="table1" style="width: 50%;">
<tr>
<td>任盈盈</td>
<td>小龙女</td>
<td>周芷若</td>
<td>赵敏</td>
</tr>
<tr>
<td>小郡主沐剑屏</td>
<td>建宁公主</td>
<td>阿珂</td>
<td>双儿</td>
</tr>
</table>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#nameList').on('click', 'li', function(){
console.log($(this).html(), this.innerHTML);
});
function ul_off(){
$('#nameList').off('click','li');
}
$('#input1').click(function() {
$('#nameList').append('<li>杨过</li>');
$('#nameList').append('<li>乔峰</li><li>虚竹</li><li>段誉</li>');
});
function fn1(){
console.log($(this).html(), this.innerHTML);
}
var fn2 = function(){
console.log('*****' + $(this).html(), '*****' + this.innerHTML);
}
$('#seasonList').on('click', 'li', fn1);
$('#seasonList').on('click', 'li', fn2);
function ul2_off(){
// $('#seasonList').off();
// $('#seasonList').off('click');
$('#seasonList').off('click', '**');
}
//颜色数组
var colors = ['Tomato', 'SeaGreen', 'Gray', 'RoyalBlue', 'red', 'Yellow'];
console.log(colors);
//随机数
console.log(Math.random(), parseInt(10 * Math.random()), Math.floor(Math.random() * 10 + 1));
console.log(colors.length, parseInt(colors.length * Math.random()));
$('#table1').on('mouseover', 'td', function(){
console.log(this, this.innerHTML, $(this), $(this).html());
// $(this).css('background' , 'Tomato');
var randomNumber = parseInt(colors.length * Math.random());
console.log('随机数=' + randomNumber);
//背景颜色设置为随机颜色
$(this).css('background' , colors[randomNumber]);
});
</script>
</html>