URL が合法で完全に調整されているかどうかを判断する、JavaScript イベントの委任について話しましょう。

この記事では、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>この質問は非常に単純ですが、イベント委任の原理は実際には イベント バブリング

メカニズムを使用します。

イベント バブリング: オブジェクト上で特定のタイプのイベント (クリック イベントなど) をトリガーします。オブジェクトがこのイベントのハンドラーを定義している場合、イベントはこのハンドラーを呼び出します。このイベントの場合ハンドラーが定義されていない場合、またはイベントが true を返した場合、このイベントは、処理される (親オブジェクトの同様のイベントがすべてアクティブ化される) か、イベントに到達するまで、このオブジェクトの親オブジェクトに内部から外部に伝播されます。オブジェクト階層の最上位、つまりドキュメント オブジェクト (一部のブラウザ)

実際の開発では、イベント委任を使用して親クラスによってイベントを均一に取得して処理するため、重複を減らすことができます。サブクラスのイベント定義。

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 回は 1

• | (パイプ文字) で、 または を意味し、両側のコンテンツと一致することを示します。 |

• \. のいずれかは、/ と同様に、. と一致することを意味します。 .# と一致する必要があります ##先頭に \ を付けてエスケープする必要があります

• {n,m}

  は n-m 回を意味します

• \d

  一致する番号

• .

  is[^\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']

手作業で細断されたコード

完全な配置は、より一般的なアルゴリズムの 1 つです解決策はたくさんありますが、ここでは非常に賢い解決策を紹介します:

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="URL が合法で完全に調整されているかどうかを判断する、JavaScript イベントの委任について話しましょう。"></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="URL が合法で完全に調整されているかどうかを判断する、JavaScript イベントの委任について話しましょう。"></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>

以上がURL が合法で完全に調整されているかどうかを判断する、JavaScript イベントの委任について話しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。