一起來聊聊JavaScript的事件委託、判斷URL是否合法及全排列

這篇文章為大家帶來了關於JavaScript的相關知識，其中主要介紹了事件委託、判斷URL是否合法以及全排列的相關內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：JavaScript影片教學、web前端】

1、事件委託

效果演示

#要求

補全

• ##補全

  JavaScript程式碼，要求如下：

給"
• ul

  "標籤新增點擊事件當點選某"li"標籤時，該標籤內容拼接".

  「符號。如：某"
li

"標籤被點擊時，該標籤內容為」

.."

## 手撕裂程式碼

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件委托</title>
    

        
• .
        
• .
        
• .
    

    <script> // 补全代码 const ul = document.getElementsByTagName(&#39;ul&#39;)[0] ul.onclick = function (e) { const tar = (e || window.event).target // 如果点击的对象的名称是li // localName 获取标签名 if (tar.localName === &#39;li&#39;) { tar.innerHTML = tar.innerHTML + &#39;.&#39; } } </script>

這題挺簡單的，事件委託的原理實際上就是利用了

事件冒泡

的機制。

事件冒泡：在一個物件上觸發某一類事件（例如點擊click事件），如果此物件定義了此事件的處理程序，那麼此事件就會呼叫這個處理程序，如果沒有定義此事件處理程序或事件傳回true，那麼這個事件就會向這個物件的父級物件傳播，從裡到外，直到它被處理（父級物件所有同類事件都將被啟動），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器）

在實際開發中，使用事件委託統一由父類別捕捉並處理事件，這樣可以減少子類別事件的重複定義。

2、判斷URL是否合法

要求補全JavaScript程式碼，要求以

Boolean

的形式傳回字串參數是否為合法的URL格式。

注意：協定僅為HTTP(S)

#手撕程式碼

• const _isUrl = url => {
      // 补全代码
      let reg = /^((https|http):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]{2,6})(:\d+)?(\/.*)?(\?.*)?(#.*)?$/g;
      return reg.test(url)}

  這題就是檢視了正規的應用，運用了大量的正規知識，包括：

• ^

  代表開頭

• [A- Za-z0-9]

  表示符合大小寫字母和數字#\/表示符合/，因為在正規裡/有其它意義，所以要符合

  /
需要在前面使用
• \

  對其進行轉義

  ?
等價於
• {0,1}

  ，表示出現一次或不出現

• 表示出現的次數至少為1|（管道符），是

  或
的意思，表示符合
• |

  兩邊內容的其中任何之一\.表示符合.，與/一樣，要符合

  .
需要在前面使用
• \

  對其進行轉義

• #{n,m}

  表示出現n-m次

• #\d

  符合數字

  .
就是
• [^\n\r\u2028\u2029]

  ，是通配符，表示幾乎任意字元

• *

  表示出現次數為0次或多次

• .*

  就是要匹配任何多個任意字元

• $

  代表結尾

#g

代表全域匹配

合法的
• URL

  格式如下：協定部分

  http (s)
可選: 表示為
• ((https|http):\/\/)?

#網域部分：表示為
• (([A-Za-z0-9] -[A-Za-z0-9] |[A-Za-z0-9] )\.)

  頂級域名，如com、

  cn
等為2-6位元：表示為
• ([a-zA-Z]{2,6})

連接埠部分：表示為
• (:\d )?

  #請求路徑如

  /login
：表示為
• (\/.*)?

  問號傳參及雜湊值如?age=1、 #dom：表示為

  (\?.*)?
和

(#.*)?

#3、全排列

要求

• 補充全

  JavaScript

  程式碼，要求以陣列的形式傳回字串參數的所有排列組合。
注意：
字串參數中的字元無重複且僅包含小寫字母

傳回的排列組合陣列不區分順序

範例：

输入：_permute('abc')
输出：['abc','acb','bac','bca','cab','cba']

#########手撕程式碼######全排列是比較常見的演算法之一，解法很多，這裡提供大家一個很巧妙的解法：###

const _permute = string => {
    // 补全代
    const res = []; // 结果数组
    function search(str) {
    	console.log('1', 'str=' + str);
    	// 如果长度相等了就存放到结果数组中
        if (str.length === string.length) {
            res.push(str)
        }
        // 遍历string
        for (let char of string) {
        	console.log('2', 'str=' + str, 'char=' + char);
        	// 如果str内不含char，就使用str+char开始递归
            if (str.indexOf(char) <p>整体思路就是运用循环加递归，但这个过程中涉及到了<code>JavaScript</code>中循环的执行机制，我们以执行<code>console.log(_permute('ab'));</code>为例查看控制台打印结果：</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/66e36e8cc39d1c0f975c61596092ab88-3.png?x-oss-process=image/resize,p_40" class="lazy" alt="一起來聊聊JavaScript的事件委託、判斷URL是否合法及全排列"></p><p><code>search</code>函数中的<code>for</code>循环执行次数与<code>string</code>参数的长度相等，此时传递的<code>string</code>参数为<code>ab</code>，长度为2，即<code>search</code>函数中的<code>for</code>循环会执行两次。</p><p><strong>这里需要注意的就是：<code>for</code>循环中执行的递归（再次调用<code>search</code>函数）并不会中断当前的<code>for</code>循环，只会将还未执行的循环暂且搁置，等到系统空闲时这些搁置的循环才会开始执行</strong>（ <code>javascript</code> 引擎在同一时刻只能处理一个任务，即<strong>单线程</strong>），具体过程见下方图解：</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/6cdcbaa13171acb1aed4f70f827454d2-4.png?x-oss-process=image/resize,p_40" class="lazy" alt="一起來聊聊JavaScript的事件委託、判斷URL是否合法及全排列"></p><p>【相关推荐：<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">JavaScript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p>

以上是一起來聊聊JavaScript的事件委託、判斷URL是否合法及全排列的詳細內容。更多資訊請關注PHP中文網其他相關文章！