事件委托 | 易学教程

认真看,每个人都可以看懂的-_-也可以结合js高级程序设计第三版一起看哦～

什么是事件委托--官方解释
对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到 document 层次。也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序

下面一句话很重要！很重要！很重要！
只要进行了点击就是会有捕获阶段->目标阶段->冒泡阶段三个阶段,和你在哪个阶段去添加事件处理程序无关
意思就是只要有点击,都会有着三个阶段,不管是有没有绑定事件

事件委托主要是利用了冒泡,假如我用鼠标点击了box2,第三阶段是冒泡阶段 ,会从 id为box2的li标签-->ul-->body-->html-->window
说明我不管是点击box1,box2,还是box3 都会经历 boxn -->ul-->body-->html-->window的过程,所以我们可以在li的上一级ul添加一个事件处理程序,因为event里面会有一个target我们获取获取到目标元素
event.target 和 event.currentTarget有什么区别？
event.target表示的目标元素,事件捕获到最底层的那个元素,event.currentTarget表示的是监听元素,这里指的就是addEventListener监听的那个元素

   <ul id="mylinks">
        <li id="box1">box1</li>
        <li id="box2">box2</li>
        <li id="box3">box3</li>
    </ul>

1为什么需要事件委托?
如果我点击父元素底下很多个li标签,每个点击做不同的操作,那么结果就会有数不
清的代码用于添加事件处理程序

    <ul id="mylinks">
        <li id="box1">box1</li>
        <li id="box2">box2</li>
        <li id="box3">box3</li>
    </ul>
</head>
<body>
    <script>
        // 因为冒泡事件是逐级向上冒泡的 所以在最高级去添加一个事件就好 dom2写法
        //需求:点击每一个做不同的操作,如果这里有无数个li 要写100种写法
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var box3 = document.getElementById('box3')
        box1.addEventListener('click', ()=> {
            console.log('box1');
        })
        box2.addEventListener('click', ()=> {
            console.log('box2');
        })
        box3.addEventListener('click', ()=> {
            console.log('box3');
        })
    </script>

如果我用事件委托

   <ul id="mylinks">
        <li id="box1">box1</li>
        <li id="box2">box2</li>
        <li id="box3">box3</li>
    </ul>
</head>
<body>
    <script>
        var bigBox = document.getElementById('mylinks')
        bigBox.addEventListener('click', (event)=> {
            var target = event.target
            switch (target.id) {
                case 'box1':
                    document.title = 'box1'
                    console.log(document.title);    
                    break;
                case 'box2':
                    document.title = 'box2'
                    console.log(document.title);    
                    break;
                case 'box3':
                    document.title = 'box3'
                    console.log(document.title);    
                    break;
            }            
        })

在js高级程序设计中是这样写的

 <ul id="mylinks">
        <li id="box1">box1</li>
        <li id="box2">box2</li>
        <li id="box3">box3</li>
    </ul>
</head>
<body>
    <script>
          <ul id="mylinks">
        <li id="box1">box1</li>
        <li id="box2">box2</li>
        <li id="box3">box3</li>
    </ul>
</head>
<body>
    <script>   
        // 因为冒泡事件是逐级向上冒泡的 所以在最高级去添加一个事件就好 dom2写法
        //需求:点击每一个做不同的操作,如果这里有无数个li 要写100种写法、
        let EventUtil = {
            getEvent: function(event){ 
                return event ? event : window.event; 
            },
            getTarget: function(event){ 
                return event.target || event.srcElement; 
            }
        }
        var bigBox = document.getElementById('mylinks')
        bigBox.addEventListener('click', (event)=> {
            event = EventUtil.getEvent(event); 
            var target = EventUtil.getTarget(event);  
            var target = event.target
            switch (target.id) {
                case 'box1':
                    document.title = 'box1'
                    console.log(document.title);    
                    break;
                case 'box2':
                    document.title = 'box2'
                    console.log(document.title);    
                    break;
                case 'box3':
                    document.title = 'box3'
                    console.log(document.title);    
                    break;
            }            
        })
</script>

书上有提到--IE 中 event 对象的全部信息和方法 DOM 对象中都有
这里是采用的兼容写法---主要是因为获取这个event和event.target的方式不一样

2.事件委托的好处
 document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待 DOMContentLoaded 或 load 事件）。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。
 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM 引用更少，所花的时间也更少。
 整个页面占用的内存空间更少，能够提升整体性能。

来源：https://www.cnblogs.com/antyhouse/p/12298932.html

标签

target

event