동적 생성된 JavaScript 요소에 이벤트 프로세서 첨부

JavaScript를 사용할 때 새 요소를 동적으로 만들어야 하는 경우가 있으므로 새 요소를 처리해야 합니다.그것은 한 번의 클릭일 수도 있고, 보통 함수를 실행해야 한다.
동적 생성 요소의 문제는 이들이 타고난 이벤트 처리 프로그램과 기존 요소가 다르다는 데 있다.새 요소가 만들어져 같은 목록에 추가될 때, 클래스 이름을 바꾸거나 추가할 수 있는 항목 목록이 있다면, 이벤트 처리 프로그램 첨부 파일을 잃어버리거나 바꿀 수 있습니다.이 자습서는 새로 만든 요소에 이벤트 프로세서를 동적으로 첨부하는 순수한 JavaScript 방법을 소개합니다.
다른 원소와 틈새 없이 융합하다.
카탈로그

태그 생성

onclick 함수 만들기

연결 onclick 기능

동적 생성 요소

동적 추가 이벤트

실제 사용

함수를 순환 밖으로 유지

프리젠테이션 기능

태그 생성
HTML을 만드는 것부터 시작하겠습니다. 목록 장면을 고려하고 간단한 <ul> 링크를 만들 것입니다.

<ul id="links">
<li class="dynamic-link">List item 1</li>
<li class="dynamic-link">List item 2</li>
<li class="dynamic-link">List item 3</li>
<li class="dynamic-link">List item 4</li>
</ul>

Onclick 함수 만들기
원클릭 함수를 만드는 것은 간단합니다. 요소를 만들고 클릭 처리 프로그램을 설정하기만 하면 됩니다.

var element = document.getElementById('id');
element.onclick = function() {
  // onclick stuff
}

함수를 개별적으로 설정한 다음 이러한 함수를 호출하는 것이 좋습니다. 특히 루프를 처리할 때는 다음과 같습니다.

var element = document.getElementById('id');

function myFunction() {
  // onclick stuff
}

element.onclick = myFunction; // Assigned

추가 onclick 함수
위의 지식에 따라 우리는 HTML을 순환적으로 훑어보고 이벤트 처리 프로그램을 각각 <li> 표시에 추가할 수 있다.
우선, 나는 달러 기호를 사용하여 jQuery 스타일로query Selector를 설정할 것이다. 이것은 원본 DOM 선택기이다.

// querySelector, jQuery style
var $ = function (selector) {
  return document.querySelector(selector);
};

이를 통해 우리는 다음과 같은 요구를 충족할 수 있습니다.

$('.className');

querySelector를 사용하여 #links ID를 대상으로 한 다음 목록 요소를 찾습니다.$("#links li")를 사용할 수 있지만 querySelectorAll을 사용해야 합니다.그리고 링크 그룹을 반복해서 훑어보고 위의 'myFunction' 을 모든 요소에 추가합니다.

var links = $('#links').getElementsByTagName('li');

// For each <li> inside #links
for (var i = 0; i < links.length; i++) {
  var link = links[i];
  link.onclick = myFunction;
}

좋습니다. 하지만 다이내믹 이벤트라는 진짜 함수를 추가합니다.

function dynamicEvent() {
  this.innerHTML = 'Dynamic event success.';
  this.className += ' dynamic-success';
}

// Assign it like so (this will be inside the loop)
link.onclick = dynamicEvent;

지금까지, 우리는 페이지의 모든 정적 항목에 onclick 이벤트 처리 프로그램을 추가했습니다. 이것은 매우 간단합니다.지금 클릭하면 다이내믹 이벤트 함수를 실행하고 텍스트는'다이너믹 이벤트 success'로 바뀝니다.
동적 요소 생성
이제 JavaScript를 사용하여 새로운 <li> 요소를 만들고 텍스트를 포함하여 #link 무질서한 목록에 추가하려고 합니다.이렇게 하면 매우 쉽다.

var li = document.createElement('li');
$('#links').appendChild(li);

간단합니다. 새 요소를 만들고 #links ID에 추가했습니다. 괜찮습니다.그런데 문제가 있어요!간단하게 새 목록 항목을 추가하는 것은 신기하게도 함수를 클릭하고 실행할 수 없습니다. 이것은 새로운 요소를 만들 때 보통 문제가 됩니다.이 링크를 만들고 이벤트 처리 프로그램을 추가하지 않으면 이 링크는 아무런 역할을 하지 않습니다.AJAX에서도 이 문제가 발생하여 서버에서 새 정보를 추출할 때 JavaScript 준비 상태가 제공되지 않습니다.
동적 추가 이벤트
이것은 생각보다 간단하다. 우리가 새로운 요소를 만드는 함수에 이벤트 처리 프로그램과 우리가 그에게 분배하고자 하는 함수를 추가해야 한다. 이렇게 할 수 있다.

// Create the new element
var li = document.createElement('li');
li.className = 'dynamic-link'; // Class name
li.innerHTML = dynamicValue; // Text inside
$('#links').appendChild(li); // Append it
li.onclick = dynamicEvent; // Attach the event!

다 끝났어.하지만 그것을 더욱 실제적인 용도로 쓰자."그걸로 뭘 할 수 있어요?"-아무거나!jResize와 브라우저 기반 응답 개발 도구를 만들 때 이 문제를 만났습니다. (비록 jQuery에서 부정행위를 했지만, 여기는 자바스크립트 방법입니다.)
실제 사용
내가 설정한 프레젠테이션에서 현재 항목 목록을 볼 수 있습니다. 한두 번 누르면 텍스트의 변화를 관찰하고 예쁜 아이콘을 보여 줍니다.봐라!이제 다음 단계는 자신의 요소를 만드는 것입니다. 이 점을 실현하기 위해 좋은 스크립트와 작은 폼을 만들었습니다.필드 입력에 단어를 입력하고 요소를 생성하기만 하면 됩니다.새로 만든 요소는 onclick 함수를 첨부합니다.
함수를 순환 밖으로 유지하기
JSLint는 순환에서 함수를 만들지 말아야 하며, 어떤 경우에는 이렇게 할 수 있지만, 본 강좌에 대해서는 전적으로 동의합니다.정적 및 동적으로 생성된 요소에서 함수를 실행하면 반복되는 태그를 작성하지 않습니다. (이것이 바로 dynamicEvent가 순환 밖에서 생성되고 간단하게 호출되는 이유입니다.)
프리젠테이션 기능
위의 단계를 어떻게 사용하는지 프레젠테이션에 관심이 있는 사람은 다음과 같은 내용과 의견을 볼 수 있습니다.

(function(){

  // querySelector, jQuery style
  var $ = function (selector) {
    return document.querySelector(selector);
  };

  // Create function outside loop
  function dynamicEvent() {
    this.innerHTML = 'Dynamic event success.';
    this.className += ' dynamic-success';
  }

  // Iterate over #links <li>
  // Use querySelector to target #links and then get tag names <li>
  var links = $('#links').getElementsByTagName('li');

  // For each <li> inside #links
  for (var i = 0; i < links.length; i++) {
    var link = links[i];

    // <li> onclick, runAlert function
    link.onclick = dynamicEvent;
  }

  // Onsubmit
  $('.generate').onsubmit = function() {

    // Grab the input value
    var dynamicValue = $('.generate-input').value;

    // If empty value
    if(!dynamicValue) {

      alert('Please enter something.');

    } else {

      // Change the submit value
      $('.generate-submit').value = 'Click your item below!';

      // Create the links with the input value as innerHTML
      var li = document.createElement('li');
      li.className = 'dynamic-link';
      li.innerHTML = dynamicValue;

      // Append it and attach the event (via onclick)
      $('#links').appendChild(li);
      li.onclick = dynamicEvent;
    }

    // Prevent the form submitting
    return false;
  }
})();

읽어줘서 고마워요!!!