DOM 이벤트 모델

1994 단어

onclick 및addEventListener ('click', function () {})


xxx.onclick = function () {} 요소에 onclick 이벤트만 연결할 수 있습니다
xxx.ddEventListener('click','function() {})는 여러 개의 click 이벤트를 추가할 수 있습니다. 추가할 때마다 대기열에 들어가서 순서대로 실행합니다. xxx를 사용할 수 있습니다.removeEventListener ('click', function () {}) 는 클릭 대기열을 취소합니다. 이벤트마다 다른 대기열이 있습니다.
이벤트 감청을 설정할 수 있습니다.
function f1() {
  console,log(1)
xxx.removeEventListener('click', f1)
}

xxx.addEventListener('click', f1)

우리가 원소를 한 번 클릭하면 이 감청 사건은 취소된다
이 두 가지는 다른 사건에도 똑같이 적용된다

이벤트 캡처 및 이벤트 거품


원소를 클릭하여 이벤트를 촉발할 때.이벤트는 먼저 원소의 최외층 부원소에서 촉발된 원소로 한 층 한 층 들어간 다음에 촉발 원소에서 한 층 한 층에서 최외층 부원소로 돌아가고 최외층 한 층 들어간 단계를 사건 포획 단계라고 하고 가장 안쪽에서 한 층 밖으로 나가는 단계를 거품이라고 한다.
여기 아날로그 이벤트 클릭 전 과정의 애니메이션이 있어요.
우리는 여기서 사건의 거품을 이용하여 점개부동층, 폐쇄부동층의 예를 써서 모두가 사건 모델을 더욱 잘 이해하고 요구하도록 한다
  • 버튼을 클릭하여 부동층을 팝업합니다
  • 다른 곳을 클릭하여 부동층을 닫습니다
  • 부동층을 클릭할 때 부동층은 닫을 수 없습니다
  • 버튼을 다시 누르면 부동층이 사라집니다

  • 생각
  • 버튼에 클릭 이벤트를 추가하고 버튼을 누르면 플로팅 디스플레이를 전환하거나 닫습니다
  • document에 감청 클릭을 설정하여 부층을 닫습니다.document는 최상위 요소입니다. 이벤트가 거품이 나기 때문에document의 임의의 하위 요소를 누르면document에 거품이 생기고document의 클릭 이벤트를 촉발하여 임의의 곳을 클릭하여 부층을 닫는 효과에 도달합니다

  • 요점
  • 이벤트가 거품이 나기 때문에 우리는document의 임의의 하위 요소를 누르면 이벤트를 document에 거품을 일으킬 수 있다. 우리는document에 클릭 이벤트를 추가함으로써 그의 모든 하위 요소에서 온 클릭 이벤트를 감청할 수 있다. 그러면 화면 어디를 누르든지 부층을 닫는 효과를 얻을 수 있다
  • stopPropagation () 을 이용하여 이벤트의 거품을 막을 수 있습니다. 그러면 우리는 부층의 이전 부모 요소에 stopPropagation () 을 적용하여 부층의 클릭 이벤트가document로 전달되는 것을 막을 수 있습니다. 그러면 우리가 부층을 클릭할 때 부층이 닫히지 않습니다
  • 이벤트 거품은 이벤트 귀속 함수가 실행된 후에 발생한다. 이것은 만약에 우리가 버튼을 눌렀을 때 버튼이 귀속된 이벤트 함수가 실행된 후에 이벤트 거품이 발생한다는 것을 의미한다. 이것은 우리가 버튼이 귀속된 이벤트 함수에서document에 클릭 이벤트를 감청하도록 설정하면 이벤트 거품으로 인해 이 이벤트는 여전히 촉발된다는 것을 의미한다.따라서 만약에 우리가 button에서 이벤트를 누르면document를 감청할 수 있다. 우리는 비동기적인 방법을 통해 사건이 발생한 후에 document의 감청을 설정할 수 있다. 여기에서 settimeout으로 비동기적으로 document 감청을 설정할 수 있다

  • demo

    좋은 웹페이지 즐겨찾기