對JS中事件委託的理解

時間 2019-11-21

原文原文鏈接

什麼是事件委託：javascript

事件委託——給父元素綁定事件，用來監聽子元素的冒泡事件，並找到是哪一個子元素的事件。(不理解冒泡的能夠去百度下)css

定義：
利用事件冒泡處理動態元素事件綁定的方法，專業術語叫事件委託。
使用事件委託技術能夠避免對特定的每一個節點添加事件監聽器，相反，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪一個子元素的事件。

事件委託的好處：html

事件委託技術能夠避免對每一個字元素添加事件監聽器，減小操做DOM節點的次數，從而減小瀏覽器的重繪和重排，提升代碼的性能。java

使用事件委託，只有父元素與DOM存在交互，其餘的操做都是在JS虛擬內存中完成的，這樣就大大提升了性能。jquery

何時用事件委託：瀏覽器

當子元素有不少，須要對子元素的時間進行監聽的時候函數

案例：性能

（1）原生JS實現事件委託效果測試

<!DOCTYPE html>
<html>
<head>
<title>事件委託測試</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>測試1</a></li>
        <li><a>測試2</a></li>
        <li><a>測試3</a></li>
        <li><a>測試4</a></li>
        <li><a>測試5</a></li>
        <li><a>測試6</a></li>
        <li><a>測試7</a></li>
        <li><a>測試8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener('click',function(e){
    alert("點擊的內容是："+e.target.innerHTML);
});
</script>
</body>
</html>

事件委託三部曲：
第一步：給父元素綁定事件
給元素ul添加綁定事件，經過addEventListener爲點擊事件click添加綁定spa

第二步：監聽子元素的冒泡事件
這裏默認是冒泡，點擊子元素li會向上冒泡

第三步：找到是哪一個子元素的事件

經過匿名回調函數的參數e用來接收事件對象，經過target獲取觸發事件的目標

（2）JQ實現事件委託

<!DOCTYPE html>
<html>
<head>
<title>事件委託測試</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>測試1</a></li>
        <li><a>測試2</a></li>
        <li><a>測試3</a></li>
        <li><a>測試4</a></li>
        <li><a>測試5</a></li>
        <li><a>測試6</a></li>
        <li><a>測試7</a></li>
        <li><a>測試8</a></li>
    </ul>
</div>
<script type="text/javascript">
$("ul").on('click',function(e){
    alert("點擊的內容是："+$(e.target).text());
});
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。