URL이 합법적이고 완전히 정렬되었는지 판단하는 JavaScript 이벤트 위임에 대해 이야기해 보겠습니다.

이 글은 이벤트 위임 관련 내용을 주로 소개하는 JavaScript에 대한 관련 지식을 제공하고, URL이 합법적인지, 완전한 정리인지 판단하는 데 도움이 되기를 바랍니다.

【관련 권장사항: JavaScript 동영상 튜토리얼, 웹 프론트엔드】

1. 이벤트 위임

효과 시연

요구사항

완성 JavaScript 코드 요구 사항은 다음과 같습니다. 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匹配数字

• .就是[^nru2028u2029]，是通配符，表示几乎任意字符

• *表示出现次数为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

"ul" 태그에 클릭 이벤트 추가
"li"를 클릭한 경우 >" 태그를 클릭하면 태그 내용에 "." 기호가 연결됩니다. 예: "li" 태그를 클릭하면 태그의 내용은 ".."

Hand입니다. -파쇄된 코드

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

이 질문은 매우 간단합니다. 이벤트 위임의 원리는 실제로 이벤트 버블링 메커니즘을 사용합니다.

이벤트 버블링: 개체에서 특정 유형의 이벤트(예: 클릭 이벤트)를 트리거합니다. 개체가 이 이벤트에 대한 핸들러를 정의하면 이벤트는 이 핸들러를 호출합니다. 이벤트 핸들러 또는 이벤트가 true를 반환하는 경우 이벤트는 처리될 때까지(상위 개체의 모든 유사한 이벤트가 활성화됨) 또는 해당 개체에 도달할 때까지 이 개체의 부모 개체에 내부에서 외부로 전파됩니다. 객체 계층 최상위, 즉 문서 객체(일부 브라우저)

실제 개발에서는 이벤트 위임을 사용하여 상위 클래스별로 이벤트를 균일하게 캡처하고 처리하므로 하위 클래스 이벤트의 반복 정의를 줄일 수 있습니다.

🎜2. URL이 유효한지 확인하세요. 🎜🎜🎜JavaScript 코드를 완료하려면 🎜🎜 필요합니다. Boolean의 형식은 문자열 매개변수가 유효한 URL 형식인지 여부를 반환합니다. 🎜🎜참고: 프로토콜은 HTTP(S)🎜🎜🎜손으로 파쇄된 코드🎜

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) 🎜만 해당됩니다. 이 질문은 규칙성의 적용을 조사하고 많은 규칙성을 사용합니다. 지식, 다음을 포함: 🎜🎜🎜🎜<code>^</code>는 🎜🎜🎜🎜<code>[A-Za-z0-9]</code>로 시작한다는 의미는 대문자, 소문자 및 숫자 일치를 의미합니다 🎜🎜🎜 🎜<code>/</code>는 <code>/</code> 일치를 의미합니다. <code>/</code>는 정규 표현식에서 다른 의미를 갖기 때문입니다. 따라서 <code>/</code>와 일치하려면 다음을 수행해야 합니다. 앞에 <code> 사용 ></code>Escape it🎜🎜🎜🎜<code>?</code>는 <code>{0,1}</code>와 동일하며 한 번 표시되거나 표시되지 않음을 나타냅니다. 🎜🎜🎜🎜<code>+</code>는 발생 횟수가 1🎜🎜🎜🎜<code>|</code>(파이프 문자) 이상임을 의미하며, 이는 <strong> 또는 </strong>을 의미하며, <code>| code>🎜🎜🎜🎜<code>.</code> 양쪽의 내용 중 하나가 일치함을 나타냅니다. 이는 <code>/와 마찬가지로 <code>.</code>가 일치함을 의미합니다. code>는 <code>와 일치해야 합니다.</code>는 앞에 <code></code>를 붙여 이스케이프해야 합니다. 🎜🎜🎜🎜<code>{n,m}</code>는 n-m 번을 의미합니다 🎜🎜🎜 🎜<code>d</code> 일치하는 숫자 🎜🎜🎜🎜<code>.</code>는 <code>[^nru2028u2029]</code>이며, 이는 와일드카드 문자이며 거의 모든 문자를 나타냅니다. 🎜🎜🎜🎜 <code>*</code>는 0회 이상 발생 횟수를 나타냅니다. 🎜🎜🎜🎜<code>.*</code>는 임의의 여러 문자와 일치합니다. 🎜🎜🎜🎜<code>$</code>는 끝 🎜🎜🎜🎜<code>g code>는 전역 일치를 나타냅니다. 🎜🎜🎜🎜적법한 <code>URL</code> 형식은 다음과 같습니다. 🎜🎜🎜🎜프로토콜 부분 <code>http(s) 선택사항: <code>((https |http)://)?</code>🎜🎜🎜🎜로 표시 도메인 이름 부분: <code>(([A-Za-z0-9]+로 표시 -[A-Za-z0-9]+|[A -Za-z0-9]+).)+</code>🎜🎜🎜🎜최상위 도메인 이름(예: <code>com</code>) , <code>cn</code> 등은 2~6자리: <code>([a-zA-Z]{2,6})</code>🎜🎜🎜🎜Port 부분:으로 표현 <code>(:d+)?</code>🎜🎜🎜🎜요청 경로는 <code>/login</code>과 같습니다. <code>(/.*)?</code>🎜🎜🎜로 표현됩니다. 🎜<code>?age=1</code>, <code>#dom</code>과 같은 매개변수 및 해시 값을 전달하는 물음표: <code>(?.*)?</code> 및 <code>(#.*)?</code>🎜🎜🎜🎜<a id="3_141">🎜 3. 전체 배열 🎜🎜</a><a id="_142">🎜에는 <code>JavaScript 코드이며 문자열 매개변수의 모든 순열과 조합이 배열 형식으로 반환되어야 합니다. 🎜 참고: 🎜🎜🎜🎜문자열 매개변수의 문자는 반복되지 않으며 소문자만 포함합니다.🎜🎜🎜🎜반환된 순열 배열은 순서를 구분하지 않습니다.🎜🎜🎜🎜예: 🎜rrreee🎜🎜🎜손으로 파쇄한 코드🎜🎜 전체 배열은 가장 일반적인 알고리즘 중 하나이며 다음은 매우 영리한 솔루션입니다. 🎜<pre class="brush:php;toolbar:false">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 중국어 웹사이트의 기타 관련 기사를 참조하세요!