javascript-事件委托(代理、委派)

事件委托原理:事件冒泡

使用场景及方法:

如果有一个元素,里面包含了很多个子元素,触发每个子元素都要执行一个事件。
以前是给每个子元素绑定事件,但使用事件委托后,只用给父元素绑定事件就行,子元素不用绑定了- - -父元素绑定事件,事件处理程序中设置触发事件的元素发生改变(e.target触发事件)

代码示例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托title>
    <style>
        ul {
            width: 300px;
            height: 300px;
            padding-top: 30px;
            background-color: pink;
        }
        
        li {
            margin: 5px;
            background-color: #fff;
        }
    style>
head>

<body>
    <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            e.target.style.backgroundColor = 'green';
        }, true);
    script>
body>

html>

页面效果:

javascript-事件委托(代理、委派)_第1张图片

给父元素ul绑定了事件—事件处理程序:触发事件的元素背景色改变,没有给子元素小li绑定事件
点击小li,元素会进行事件冒泡,从自身向上,小li自身没有绑定事件,但是父元素ul有绑定事件,触发了父元素ul绑定事件,所以没有给小li们绑定点击变色事件,点击小li后也会变色

你可能感兴趣的:(前端,javascript,html,css,前端)