在 JavaScript 中，页面内事件处理程序的个数会直接影响页面的整体性能，
因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，
页面的性能则越差。此外，事件处理程序需要与 DOM 节点进行交互，
访问 DOM 的次数越多，引起浏览器重绘和重排的次数也就越多，从而影响页面的性能。
当页面中很多表格或列表需要添加事件时，如果逐个添加那就太麻烦了，
但是使用事件委托就能极大的减轻我们的工作量，同时也能提高页面的性能。
例：div > ul > li
比如给li加一个click 事件，那么事件会有里向外一层一层执行，执行顺序 li > ul > div,
即给最外层div添加点击事件，li>ul>div冒泡到最外层div上，都会触发，这就是事件委托，委托父集代为执行事件；
事件委托是利用事件的冒泡原理来实现的，大致可以分为三个步骤：
1. 确定要添加事件元素的父级元素；
2. 给父元素定义事件，监听子元素的冒泡事件；
3. 使用 event.target 来定位触发事件冒泡的子元素。
每个都需要绑定，性能则差
3.1.1JavaScript普通方式：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
(function(){
var the_ul = document.getElementById('list');
var the_li = the_ul.getElementsByTagName('li');
for( var i=0; i < the_li.length; i++ ){
the_li[i].onclick = function(){
console.log(this.innerHTML)
}
}
})()
// (function(){
// var the_ul = document.getElementById('list');
// var the_li = the_ul.getElementsByTagName('li');
// for( var i=0; i < the_li.length; i++ ){
// the_li[i].onclick = function(event){
// console.log(event.target.innerHTML)
// }
// }
// })()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
(function(){
var the_ul = $('#list');
var the_li = $('li');
for( let i=0; i < the_li.length; i++ ){
the_li.eq(i).click(function(){
console.log($(this).text());
});
}
})()
// $(document).ready(function(){
// let the_ul = $('#list');
// let the_li = $('li');
// for( let i=0; i < the_li.length; i++ ){
// the_li.eq(i).click(function(){
// console.log($(this).text());
// });
// }
// });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
(function(){
var the_ul = document.getElementById('list');
the_ul.onclick = function(e){
console.log(e.target.innerHTML)
}
})()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// (function(){
// let the_ul = $('#list');
// the_ul.on('click', 'li', function () {
// console.log($(this).text());
// })
// })()
$(document).ready(function(){
let the_ul = $('#list');
the_ul.on('click', 'li', function () {
console.log($(this).text());
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>鼠标事件</p>
<input type="text" id="text" />
<script>
var p1 = document.getElementsByTagName("p")[0]; //获取段落文本的引用指针
var t = document.getElementById("text"); //获取文本框的指针引用
function f () { //事件侦测函数
var event = event || window.event; //标准化事件对象
t.value = (event.type); //获取当前事件类型
}
p1.onmouseover = f; //注册鼠标经过时事件处理函数
p1.onmouseout = f; //注册鼠标移开时事件处理函数
p1.onmousedown = f; //注册鼠标按下时事件处理函数
p1.onmouseup = f; //注册鼠标松开时事件处理函数
p1.onmousemove = f; //注册鼠标移动时事件处理函数
p1.onclick = f; //注册鼠标单击时事件处理函数
p1.ondblclick = f; //注册鼠标双击时事件处理函数
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p>鼠标事件</p>
<input type="text" id="text" />
<script>
let p1 = $("p"); //获取段落文本的引用指针
let t = $("input"); //获取文本框的指针引用
function f (event) { //事件侦测函数
let e = event || window.event; //标准化事件对象
t.val(e.type); //获取当前事件类型
}
p1.mouseenter(f); //注册鼠标经过时事件处理函数
p1.mouseleave(f); //注册鼠标移开时事件处理函数
p1.mousedown(f); //注册鼠标按下时事件处理函数
p1.mouseup(f); //注册鼠标松开时事件处理函数
p1.click(f); //注册鼠标单击时事件处理函数
p1.dblclick(f); //注册鼠标双击时事件处理函数
p1.hover(f); //hover()方法用于模拟光标悬停事件
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）