이벤트 핸들러 및 프레임워크

내가 만들고 있는 프레임워크의 기초를 구축하고 요소의 innerHTML 또는 textContent 를 직접 조작하지 않고도 프레임워크를 사용하여 텍스트를 삽입할 수 있는 방법을 보여주었습니다.

이번에는 함수를 이벤트에 바인딩하겠습니다.

이벤트에 바인딩된 함수는 이벤트 핸들러입니다. 하나의 함수는 많은 이벤트에 바인딩될 수 있고 하나의 이벤트는 많은 함수에 바인딩될 수 있습니다. 이벤트는 모든 종류의 것이 될 수 있습니다. 대부분의 경우 자바스크립트에서는 일종의 사용자 상호작용입니다. 버튼을 마우스로 클릭합니다.

그것이 내가 이 포스트에서 보여줄 것이다. 프레임워크를 사용하여 버튼의 click 이벤트에 함수를 바인딩하는 방법.

따라서 가장 먼저 해야 할 일은 click 이벤트에 함수를 바인딩하도록 프레임워크를 확장하는 것입니다.

이전 게시물에서 프레임워크의 초기화 기능은 모든 요소를 ​​통해 반복되었으므로 여기서부터 시작하겠습니다.

for(let el of elements)
{
/*
* previous work of binding values to elements goes here.
*/
  if(el.getAttribute('onclick'))
  {
    let onclick = el.getAttribute('onclick');
    if(onclick in _internal.originalViewmodel.functions)
    {
      el.addEventListener('click', _internal.originalViewmodel.functions[onclick].bind(_internal));
      el.setAttribute('onclick', '');
    }
  }
}

이것이 의미하는 바는 프레임워크 내에서 요소의 onclick 속성을 설정하는 경우입니다. <button onclick="clickhandler">click me!</button> 뷰 모델에 clickhandler라는 함수가 있으면 버튼에 대한 click 핸들러로 할당됩니다.
click 핸들러 설정 후 onclick 속성이 해제되어 존재하지 않는 핸들러 호출 시도 시 오류가 발생하지 않는다.

이것은 html 및 viewmodel의 작업 예입니다.

<div id="app">
  <p data-model="message"></p>
  <button onclick="changeMessage">Make a change</button>
</div>

import {rjsf} from 'rjsf.js'

(function()
{
  const appElement = document.getElementById('app');

  const app = new rjsf(appElement);

  const viewmodel =
        {
          functions:
          {
            changeMessage: function(e)
            {
              e.preventDefault();
              const v = this;
              v.data.message = 'Now this message is.';
              setTimeout(() => v.data.message = 'This message is here.', 1000);
            }
          },
          data:
          {
            message: 'This message is here.',
          }
        };

  app.init(viewmodel);

})();

여기서 click 처리기는 p 요소의 메시지를 변경한 다음 1초 지연 후 다시 변경합니다.

다음 시간에는 요소를 조건부로 만드는 방법을 조사하겠습니다.

저장소의 github pages에 코드 예제를 추가하기 시작했습니다. 이 프로젝트가 어떻게 진행되고 있는지 보는 또 다른 방법!

아래 의견에 의견이나 질문이 있으면 알려주십시오.

❤️, 🦄, 공유하고 다음 편을 팔로우하세요!