탭 (스페이스 바 구분): 이벤트 의뢰 거품 성능 최적화

순서:

본문을 열기 전에 먼저 몇 가지 설명해야 할 것이 있다.문제1: 문서에 추가된 이벤트 처리 프로그램이 많을수록 페이지 전체의 운행 성능이 떨어진다.2: 모든 함수는 대상이고 메모리를 차지해야 한다. 메모리에 있는 대상이 많을수록 성능이 떨어지기 때문에 뛸 수 없다. 3: 페이지가 불러오자마자 DOM의 이벤트 처리 프로그램을 미리 지정해야 하기 때문에 DOM에 접근하는 횟수를 초래하고 전체 문서의 상호작용 준비 시간을 늦춘다.따라서 상기 측면에서 고려하면 해결1은 페이지에 DOM에 대량의 이벤트 처리 프로그램을 추가하는 것을 피하고 DOM과 js의 연결 수량을 제한한다.의뢰를 이용하여 특정한 조상에게 하나의 사건 처리 프로그램을 지정하여 특정한 종류의 모든 사건을 관리한다.예를 들어 모든 클릭을 관리한다.2> 제거할 DOM의 경우 해당 DOM의 이벤트 프로세서를 수동으로 제거합니다.일부 브라우저는 inner HTML 방식으로 바뀐 요소만 처리하고 방출할 수 없습니다.

방안 1: 이용 의뢰

논증에서 분명히 썼으니 다음은 각 방안에 대한 이전 코드죠.HTML:

CSS:

 .con {
            background: rgba(0, 0, 0, .2);
            border: 1px solid #ff9;
        }

.btn1, .btn2, .btn3 {
            width: 300px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
}

목표: 세 개의 요소를 클릭하여 다른 이벤트 처리 프로그램을 실행합니다.
분석: 세 원소의 공통된 조상은 유명이다.con의 요소입니다.그러니 사건 집행 절차를 그와 연결시키면 된다.전통적으로 모든 요소에 이벤트 처리 코드를 연결하는 것이 아니다.
구현: JS:

  window.onload = function () {
//1: DOM
        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');
        var btn3 = document.querySelector('#btn3');
        var con = document.querySelector('.con');

//2: 
        con.addEventListener('click', function (e) {
            var e = e || event;

            if (e.target.id == 'btn1') {
                // 
                con.style.background = '#80B3FF';
            }
            if (e.target.id == 'btn2') {
                // id
                alert(e.target.id);
            }
            if (e.target.id == 'btn3') {
                // 
                window.location.href = 'https://macrolam.github.io/MK/';
            }

        }, true)
    }

================================================tip: 여기는 이벤트 대상의 target 대상의 id 속성입니다. 물론 이런 것은 실제 개발에 사용되는 것이 적습니다. 모든 요소에 id를 하나씩 주어야 하기 때문에 id가 매우 귀중하기 때문에 함부로 해서는 안 됩니다. 그래서 다른 방식으로 당신이 조작할 요소를 선택했습니다.일반 요소는 노드 이름(라벨 이름), 라벨 내용도 통과할 수 있다.폼 요소는name 속성, 예를 들어 여기의button 단추를 통과할 수 있습니다.탭에name 속성을 설정합니다.js에서 이 속성에 따라 대응하는 DOM을 가져옵니다.
===================================================

다른 방법으로 대응하는 DOM을 받아요.

1. 태그 이름:

HTML:

여기 생략 양식은 위쪽과 일치합니다..con의 자에는 라벨 이름만 있습니다.
JS:

   window.onload = function () {
   
        var btn1 = document.querySelector('button');
        var btn2 = document.querySelector('p');
        var btn3 = document.querySelector('h6');

        var con = document.querySelector('.con');


        con.addEventListener('click', function (e) {
            var e = e || event;
     
            if (e.target.nodeName.toLowerCase() == 'button') {
                // 
                con.style.background = '#80B3FF';
            }
            if (e.target.nodeName.toLowerCase() == 'p') {
                // id
                alert(e.target.nodeName);
                // 
                alert(e.srcElement.nodeName);
            }
            if (e.target.nodeName.toLowerCase() == 'h6') {
                // 
                window.location.href = 'https://macrolam.github.io/MK/';
            }

        }, true)
    }

e.target.nodeName은 대문자 라벨 이름을 가져왔기 때문에 소문자로 바꾸는 것이 좋습니다.toLowerCase () 는 단번에 OK 됩니다.

2. 태그 내용:

HTML:

JS:

   window.onload = function () {

        var con = document.querySelector('.con');

        con.addEventListener('click', function (e) {
            var e = e || event;
            if (e.target.innerHTML == ' ') {
                // 
                con.style.background = '#80B3FF';
            }
            if (e.target.innerHTML == ' ') {
                // id
                alert(e.target.nodeName);
                // 
                alert(e.srcElement.nodeName);
            }
            if (e.target.innerHTML == ' ') {
                // 
                window.location.href = 'https://macrolam.github.io/MK/';
            }

        }, true)
    }

e.target을 이용하세요.innerHTML 또는 e.target.innerText 다 가능합니다.

3. 양식 태그의 name 속성:

만약 폼 요소라면, 폼 요소에name 속성을 설정할 수도 있습니다.
HTML:

JS:여기는 단추 부분만 썼어요.

con.addEventListener('click', function (e) {
            var e = e || event;
            
            if (e.target.name == 'fromDomBtn') {
                // 
                con.style.background = '#80B3FF';
            }
    }

폼에 있는 속성name 이용하기;즉 e.target.name
일반적인 처리 방식은 상기 몇 가지입니다. 당신의 코드에 따라 적합한 방안을 선택할 수 있습니다.

프로젝트 2: 이벤트 처리 프로그램을 수동으로 제거

만약에 어떤 이벤트 처리 프로그램이 있는 요소가 제거될지 알고 있다면, DOM과 js 간의 인용 관계를 끊는 것을 수동으로 비우는 것이 가장 좋다.만약 DOM에 대한 추가 삭제 수정 조사 중의 '삭제', 즉,removeChild ()/replace Child () 등은 우리가 수동으로 그들의 원래 사건 인용을 비울 필요가 없다.전방의 코드는 일반적으로 우리가 메모리 관리, 쓰레기 회수 등의 조작을 할 필요가 없기 때문에 브라우저가 우리를 도와 잘 할 수 있다.여기서 말한 제거될 것은 inner HTML의 방식을 통해 삭제된 결과를 대체하는 것을 말한다. 이때 우리가 해야 할 일이 있다. 왜냐하면 일부 브라우저들이 이 부분을 잘 처리하지 못하기 때문이다. 예를 들어 (IE).다음은 구체적으로 어떻게 실현하는지 코드로 보여 준다.
HTML:

     con 

JS:

  window.onload = function () {
        var con = document.querySelector('.con');
        var btn = document.querySelector('button');
        
        const txt = ` 
Lorem ipsum dolor.
    
 Error esse est illo impedit libero molestias, perspiciatis ratione repudiandae voluptate voluptatem!
`;



        btn.onclick = function () {
            btn.onclick = null;// ； 
            con.innerHTML = txt;
        }
    }

이 코드를 컴파일러에 복사해 보세요. 이벤트를 클릭하면 한 번만 실행될 것입니다.

js 라이브러리 구현 의뢰

만약 당신이 원생 js를 사용하지 않는다면, jQuery나zepto 등을 사용하면 어떻게 합니까?더욱 간단하다.코드를 직접 올리다.
HTML 세그먼트 캡처:

    ![](/gameInfo/images/ban.jpg)
    
    （ ）

jQuery/zepto에서 자체로 가지고 있는 이벤트 등록 on 방법은 3개의 매개 변수만 받아들일 수 있기 때문에 두 번째 매개 변수에 대해서는 DOM;잘 이용해야 한다. 필요한 것을 같은 일을 하는dom에 hrefTo라는 클래스를 붙인다.OK.

    //1: 
    
    //2: banner/ / 
    
    $('body').on('click','.hrefTo',function () {
        window.location.href="https://www.baidu.com/";
    });

--------------------------------------------------좋으면 작은 손을 써라----------------------------------------------------------------------------
------------------------------------------당신의 지원은 살림꾼-밀껍질-macrolam이 전진하는 동력--------------------------------------------------------------------------