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

WBOY
풀어 주다: 2022-11-16 20:50:35
앞으로
1644명이 탐색했습니다.

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

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

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

1. 이벤트 위임

효과 시연

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

요구사항

완성 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]+).)+

  • 顶级域名,如comcn等为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="https://img.php.cn/upload/article/000/000/067/66e36e8cc39d1c0f975c61596092ab88-3.png" 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="https://img.php.cn/upload/article/000/000/067/6cdcbaa13171acb1aed4f70f827454d2-4.png" 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!