Let’s talk about JavaScript event delegation, judging whether the URL is legal and fully arranged.

This article brings you relevant knowledge about JavaScript, which mainly introduces the related content of event delegation, judging whether the URL is legal and full arrangement. Let’s take a look at it together. I hope it will be helpful to everyone. helpful.

【Related recommendations: JavaScript video tutorial, web front-end】

1. Event delegation

Effect demonstration

##Requirements

Complete

JavaScript Code, the requirements are as follows:

• Add a click event to the "ul" tag

• When a "

  li" label is clicked, the content of the label is spliced ​​with "." symbols. For example: when a "li" tag is clicked, the content of the tag is ".."

## Tear the code

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>This question is quite simple. The principle of event delegation actually uses the

event bubbling

mechanism.

Event bubbling: triggering a certain type of event (such as a click event) on an object. If the object defines a handler for this event, then the event will call this handler. If this event handler is not defined or the event returns true, then this event will be propagated to the parent object of this object, from inside to outside, until it is handled (all similar events of the parent object will be activated), or it Reached the top level of the object hierarchy, that is, the document object (some browsers)

In actual development, event delegation is used to uniformly capture and process events by the parent class, which can reduce the duplication of subclass events definition.

2. Determine whether the URL is legal.

Requires to complete the

JavaScript

code and requires The format of Boolean returns whether the string parameter is in the legal URL format. Note: The protocol is only

HTTP(S)

Hand-shredded code

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)}

This question examines the regularity Application, using a lot of regular knowledge, including:

• ^

  represents the beginning

• [A- Za-z0-9]

  means matching uppercase and lowercase letters and numbers

• \/

  means matching /, because in the regular expression / has other meanings, so to match / you need to escape it with \

• ?

  is equivalent to {0,1}, which means it appears once or not.

• means it appears at least once It is 1

• |

  (pipe character), which means or , indicating that it matches the content on both sides of | Any one of

• \.

  means matching ., just like /, it must match .Needs to be escaped with \ in front

• {n,m}

  means n-m times

• \d

  Matching numbers

• .

  is[^\n\r\u2028\u2029] is a wildcard character that represents almost any character

• *

  represents 0 or more occurrences

• .*

  is to match any multiple arbitrary characters

• $

  represents the end

• g

  represents global matching

  ##The legal
URL

format is as follows:

Protocol part

http (s)
• Optional: expressed as

  ((https|http):\/\/)?

  Domain name part: expressed as
(([A-Za-z0-9] -[A-Za-z0-9] |[A-Za-z0-9] )\.)

• Top-level domain names, such as
com
• ,

  cn, etc., are 2-6 digits: expressed as ([a-zA-Z]{2,6})

  Port part: expressed as
(:\d)?

• ##The request path is such as

  /login
: Represented as
• (\/.*)?

  Question mark and hash value such as

  ?age=1
,
• #dom

  : expressed as (\?.*)? and (#.*)?

3. Full arrangement

Requires

to complete the JavaScript code and requires all permutations and combinations of string parameters to be returned in the form of an array.

Note:

The characters in the string parameter are not repeated and only contain lowercase letters

• The returned permutation and combination array does not distinguish the order

• Example:

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

Hand-shredded code

Full arrangement is one of the more common algorithms, and there are many solutions. Here is a very clever solution for you:

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="https://img.php.cn/upload/article/000/000/067/66e36e8cc39d1c0f975c61596092ab88-3.png" alt="Let’s talk about JavaScript event delegation, judging whether the URL is legal and fully arranged."></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="https://img.php.cn/upload/article/000/000/067/6cdcbaa13171acb1aed4f70f827454d2-4.png" alt="Let’s talk about JavaScript event delegation, judging whether the URL is legal and fully arranged."></p><p>【相关推荐：<a href="//m.sbmmt.com/course/list/17.html" target="_blank" textvalue="javascript视频教程">JavaScript视频教程</a>、<a href="//m.sbmmt.com/course/list/1.html" target="_blank">web前端</a>】</p>

The above is the detailed content of Let’s talk about JavaScript event delegation, judging whether the URL is legal and fully arranged.. For more information, please follow other related articles on the PHP Chinese website!