码迷,mamicode.com
首页 > 其他好文 > 详细

事件委托

时间:2020-02-12 14:49:37      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:事件   内存   为什么   功能   let   head   结合   body   current   

认真看,每个人都可以看懂的-_-也可以结合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 引用更少,所花的时间也更少。
? 整个页面占用的内存空间更少,能够提升整体性能。

事件委托

标签:事件   内存   为什么   功能   let   head   结合   body   current   

原文地址:https://www.cnblogs.com/antyhouse/p/12298932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!