js的事件委派

阿新 • • 發佈：2020-07-13

事件委派就是把子元素的事件繫結在父元素身上，通過判斷事件目標的不同，做不同的事 e.target;

以下為事件委派的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:  
0;
            padding: 0;
        }
        .wrap{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            padding: 50px 0;
            background-color: #ccc;

        }
    </style>
</head>
<body>
    <div class="wrap">
        <h1 class="title">我是段落，點我文字變紅</h1>
        <div id="tex">我是div,點我背景變藍</div>
        <span>我是span，點我大小變30px</span>
    </div>
    <script>
        // 
事件委派 
        var objWrap=document.querySelector('.wrap');
        objWrap.onclick=function(e){
            var elm=e.target;
            if(elm.className==='title'){
                elm.style.color='red'
            }else if(elm.id==='tex'){
                elm.style.backgroundColor='skyblue'
            } 
else if(elm.tagName==='SPAN'){
                elm.style.fontSize='30px';
            }
        }
    </script>
</body>
</html>

js的事件委派

事件委派就是把子元素的事件繫結在父元素身上，通過判斷事件目標的不同，做不同的事 e.target;

JS 事件機制完整示例分析

本文例項講述了JS 事件機制。分享給大家供大家參考，具體如下： <html> <head>

node.JS事件機制與events事件模組的使用方法詳解

node.JS事件機制說明多數 Node.js 核心 API 都是採用慣用的非同步事件驅動架構，其中某些型別的物件（稱為觸發器）會週期性地觸發命名事件來呼叫函式物件（監聽器）。例如，一個net.Server物件會在每次有新連線時觸

js事件機制----捕獲與冒泡機制例項分析

本文例項講述了js事件機制----捕獲與冒泡機制。分享給大家供大家參考，具體如下：

從Node.js事件觸發器到Vue自定義事件的深入講解

Node.js中的事件觸發器所引發的思考今天在看 Node.js 文件的時候講到事件觸發器，其中的 emit 方法讓我想到了 Vue 中的自定義事件，藉此我對 Vue 又有了新的理解，所以將我的理解記錄下來，留作學習筆記。

js 事件迴圈訊息佇列和微任務巨集任務

事件迴圈與訊息佇列因為js是單執行緒指令碼語言，一般情況下程式碼是同步執行。也就是說js執行程式碼是一行一行向下執行的，前面沒有執行完成是不會執行後面的程式碼的。

JS事件委託中同一個標籤執行不同操作

JS事件委託中同一個標籤執行不同操作，根據標籤的選擇器選擇 <!DOCTYPE html>

詳解node.js 事件迴圈

Node.js 是單程序單執行緒應用程式，但是因為 V8 引擎提供的非同步執行回撥介面，通過這些介面可以處理大量的併發，所以效能非常高。

小謝第46問：js事件機制

當我們開啟網站時，網頁的渲染過程就是一大堆同步任務，比如頁面骨架和頁面元素的渲染。而像載入圖片音樂之類佔用資源大耗時久的任務，就是非同步任務。，我們用導圖來說明：

第十一章-js事件

事件繫結和事件冒泡題目編寫一個通用的事件監聽函式描述事件冒泡的流程無限下拉圖片列表，如何監聽每個圖片的點選

video.js事件監聽判斷播放進度，執行動畫

------------恢復內容開始------------ 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5<title>video.html</title>

JS事件迴圈機制event loop巨集任務微任務原理解析

首先看一段程式碼 async function (){ await f2() console.log(\'f1\') } async function f2(){ console.log(\'f2\')

10、JS事件委託或者事件代理原理以及實現

JS事件委託或者事件代理原理以及實現事件委託（事件代理）原理：簡單的說就是將事件交由別人來執行，就是將子元素的事件通過冒泡的形式交由父元素來執行。

js-事件

概念理解事件的定義：使用者與瀏覽器產生的互動行為（點選、滾動滑鼠、鍵盤操作...

nodejs.cn-Node.js-入門教程：Node.js 事件觸發器

ylbtech-nodejs.cn-Node.js-入門教程：Node.js 事件觸發器 1.返回頂部 1、 Node.js 事件觸發器

nodejs.cn-Node.js-入門教程：Node.js 事件模組

ylbtech-nodejs.cn-Node.js-入門教程：Node.js 事件模組 1.返回頂部 1、 Node.js 事件模組目錄

JS——事件物件

什麼是事件物件？ e就是事件物件。事件物件概述：事件發生以後，會產生一個事件物件，作為引數傳給監聽函式。瀏覽器原生提供一個Event物件，所有的事件都是這個物件的例項，或者說繼承了Event.prototype物件。

js中的事件流（對js事件流簡單的瞭解介紹）

事件流什麼是事件流：　　每個事件發生時，都會有一個觸發並執行的過程，也就是事件的傳播過程，我們稱為事件流；簡單來說，事件事件流就是事件從發生到執行結束的流程。

移動端雙指縮放圖片JS事件的實踐心得

一、Chrome瀏覽器雙指觸控的模擬結果是模擬不了。頁面整體縮放行為是可以通過按住Shift鍵+頁面左鍵模擬的，但是，實際上，還是一個觸控點，因此無法模擬雙指縮放行為。

JS 事件基礎

事件基礎 1.什麼是事件事件分為兩部分：行為本身：瀏覽器天生就賦予其的行為， onclick、onmouseover（onmouseenter）、onmouseout（onmouseleave）、onmousemove、onmousedown、onmouseup、onmousewheel（滑鼠滾