이벤트 버블링
3010 단어 eventbubblingjavascript
참조
Você já reparou no comportamento de uma garrafa ou copo de refrigerante? Percebeu como as bolhas se deslocam do fundo até o topo do copo?
O event bubbling no javascript funciona de maneira similar, quando alguma ação ou interação com o HTML é feita por um componente filho, o evento que é causado por efeito colateral é propagado como uma "bolha"até o elemento pai, que lida com o mesmo .
프라티카
Podemos observar os seguintes elementos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div onclick="alert('elemento pai')">
FORM
<div onclick="alert('elemento filho')">
DIV
<div onclick="alert('elemento neto')">P</div >
</div>
</div>
</body>
</html>
Ao clicarmos no elemento neto temos o efeito bubbling e o evento será propagado e acionado nos demais elementos ancestrais, ou seja, ocorrerão três alertas:
alerta 1 "엘리멘토 네토"
얼러타 2 "엘리멘토 필호"
얼러타 3 "엘리멘토 파이"
Como essa propagação só ocorre entre os ancestrais, esse movimento nos três elementos só funciona partindo do elemento neto. Caso o clique seja aplicado no elemento filho, a propagação trará o seguinte resultado:
얼러타 1 "엘리멘토 필호"
얼러타 2 "엘리멘토 파이"
확인된 평가:
방해꾼 선전
Para que a propagação seja interrompida, devemos utilizar o stopPropagation. Assim, quem lidará com o evento será o próprio elemento e não chegará aos elementos ancestrais.
Podemos observar então esse comportamento:
Ao clicarmos no elemento filho, a propagação não irá ocorrer para o elemento pai porque foi interrompida, o mesmo não ocorrerá para o elemento neto pois a propagação só funciona para elementos ascendentes.
Também podemos observar que, após o clique no elemento neto, o evento se propaga para o elemento filho e para nele, interrompendo a propagação.
에 isto!
Para mais informações, aqui fica o artigo de inspiração eventBubbling Javascript
Reference
이 문제에 관하여(이벤트 버블링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/julianepires/event-bubbling-3m3p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
