addEventListener 및 onclick

패키지를 복습할 때, 우리는 모든 하위 요소에 onclick 이벤트를 설정할 때 패키지를 추가해야 한다는 것을 알고 있다. 그렇지 않으면 마지막 하위 요소에만 메시지 응답 이벤트를 추가해야 한다.

  window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            for (var i=0;i<aLi.length;i++){
                    (function(i){
                            aLi[i].onclick = function(){
                                    alert(i);
                            };
                    })(i);
            }
            };

그러나 제가 쓴 하위 요소 응답 사건은 영향을 받지 않았습니다.

// tag 
function moveToDelete(){
    var con=$('tag-box');
    for(var i=0;i<con.childNodes.length;i++){
        con.childNodes[i].addEventListener('mouseover',function(e){
            var e=e||window.event;
            var ele= e.target;
            //console.log(ele);
            ele.style.background='blue';
            ele.innerHTML=" "+ele.innerHTML;
        });
        con.childNodes[i].addEventListener('mouseout',function(e){
            var e=e||window.event;
            var ele= e.target;
            ele.style.background='#d45d5c';
            var s=ele.innerHTML.toString();
            // 
            ele.innerHTML= s.slice(2);
        });
        con.childNodes[i].addEventListener('click',function(e){
            var e=e||window.event;
            var ele= e.target;
            var index=parseInt(ele.getAttribute('data-index'));
            // 
            data1.splice(index,1);
            renderTag();
        });

    }
}

일단 왜 클러치를 쓰냐고.설명이 매우 상세한 버전을 찾다.
순수 JS의 문제가 있어서 기쁩니다.
일,
@양커피가 말한 JS전삼은 전치가 주소를 전하지 않는 것이지 사실은 그렇지 않다.JS의 전참은 다음과 같은 두 가지 방법이 있습니다.
by value and by sharing.
C, C++, Java와 같이 이들의 전참 방식은
by value와 by reference.전자는 전치이고, 후자는 전지다.JS도 마찬가지다. 전자는 전가, 후자는 전지다.
Byvalue는 원시 데이터 형식, 예를 들어 int,char 등에 대한 것이다.Bysharing과 Byreference는 Object,struct 같은 고급 데이터 구조에 대한 것이다.우리는 하나의 Object나struct가 전가를 통해서만 전참할 수 없다는 것을 상상할 수 있다.
간단한 예는byreference와bysharing의 차이를 설명한다.
var bar; var foo = bar; bar = {'key' : 'value'}; console.log(foo , bar );
Bysharing에서 foo는 undefined이고 bar는 {'key':'value'}입니다.By reference는 둘 다 {'key':'value'}이어야 한다.
2. 사실 LZ는 이 문제를 이해하고 JS의 작용역(scope)을 알아야 한다.
모든 함수는 생성이 끝났을 때, 3개의 중요한 내장 속성 (property) 도 동시에 생성됩니다.
{AO//function 내의 변수, 매개 변수 등 정보this//는this.xx를 호출할 때this scope///는 외부 함수 AO를 가리키는 체인입니다.
JS에서 흔히 말하는 스코프는 사실 이렇다. 스코프=AO+scope.
패키지를 닫는 문제로 돌아가기:
만약 우리가 이 프로그램을 이렇게 쓴다면:
for(var i =0; iinner function을 얻을 수 있는 SCOPE는 다음과 같습니다.
{AOthis//는 link[i]scope//윈도우를 가리키는 기록입니다. 우리가 필요로 하는 변수 i}를 포함하여 이 for 순환이 즉시 실행됩니다. 그러면 onclick이 터치할 때 inner function이 변수 i를 찾을 때 AO+scope에서 찾습니다. AO에는 없습니다. scope의 변수 i는 링크가 되었습니다.length.
여러분이 말씀하신 클립을 이용해서 이 프로그램을 쓰세요.
//here is the window scope for(var i =0; i이때 inner function이 촉발되면 자신의 AO와 scope(outer function의 AO와 윈도우즈cope)에서 변수를 찾습니다. i. outer function의 AO에 i가 포함되어 있고 이 for 순환에 대응하는 N개가 있습니다.
(function () {}) () 이 생성되어 실행됩니다.그래서 모든 inner function에는 변수 i를 포함하는 특정한 outer function이 있습니다.
이렇게 하면 0, 1, 2, 3을 순조롭게 출력할 수 있다.......
결론: 폐쇄는 사실 Scope 때문에 생긴 것이기 때문에 넓은 의미에서 보면
모든 함수는 패키지입니다.그리고 이 안에도 포함되어 있는데,
this,functionexpression과functiondeclaration의 차이점은 일일이 말하지 않겠습니다.
3. 다른 방법:
dom onclick 이벤트의 버블 특성을 이용하여
@xiiiiin에서 말한 에이전트를 만듭니다.
링크dom 노드의 부모 노드에서 onclick 이벤트 감청을 정의합니다.매개 변수는 e입니다. (다른 이름도 가능하지만 매개 변수가 있어야 합니다.)이렇게 하면 우리는 e.target을 통해 그 하위 노드가 클릭되었다는 것을 알 수 있고 해당하는 처리를 할 수 있다.
이것은 비교적 좋은 방법이다.(패킷을 닫으면 메모리 유출이 발생할 수 있다.)
저자: 양지
링크:http://www.zhihu.com/question/20019257/answer/13688887
알고 있다
저작권은 작가의 소유이다.상업 전재는 작가에게 연락하여 권한을 얻으십시오. 비상업 전재는 출처를 밝히십시오.
MDN https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
onclick은dom0에서 정의하고addeventlistener는dom2에서 정의합니다.
내일

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

addEventListener 및 onclick

좋은 웹페이지 즐겨찾기