Java教程

JavaScript-事件委托

本文主要是介绍JavaScript-事件委托，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、什么是事件委托？

把事情托付给比人

说白了就是给父元素注册事件，把处理的代码在父元素的事件中去执行。

事件委托是事件冒泡本身的特性，有利有弊。

事件委托也称为事件代理，在jQuery里称为事件委派。

二、事件委托的作用

节约工作量，提高程序性能。

比如一个ul下面有很多个li，每次点击一个li弹窗一个对话框，如果要是给每个li添加注册事件，太繁琐，而且需要多次访问DOM，就会延长整个网页的交互的中的时间。

如果用事件委托就比较方便，只需要操作一次DOM，这样就可以大大的提高程序的性能。

三、事件委托该如何使用

直接给父元素添加注册时间，利用事件冒泡，当子元素触发事件后，会冒泡到父元素，然后去控制相应的子元素。

该如何去控制子元素？只要使用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{
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 100%;
        }
        ul li{
            width: 100px;
            height: 20px;
            background-color: royalblue;
            margin: 2px;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.onclick = function(e){ 
                e.target.style.backgroundColor = 'yellow';  //事件委托
        }
    </script>
</body>
</html>

 

效果如下图：

这篇关于JavaScript-事件委托的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航