[JavaScript_JQuery] 2021.01.27. DAY_65 dblclick 더블클릭 이벤트함수사용, on함수

◎ dblclick(function(){  })

• 더블클릭을 하는 이벤트 : dblclick
• dblclick(function() {  이벤트 내용  })

 

◎ on 이벤트 함수

이벤트를 처리하는 방법은 여러가지이다
보통 이벤트이름이 같은 이름을가진 내장함수로 존재한다

1. 이벤트이름을 가진 함수를 바로 호출한다
$(이벤트적용대상).이벤트함수(function(){  })

2. on함수를 사용하여, 이벤트를 매개변수에서 호출한다

2-1
  $(이벤트적용할 곳).on("이벤트이름", function() {});
  이때는 이벤트를 적용하는 곳에 이벤트가 적용된다
2-2
  $(이벤트적용할 곳).on("이벤트이름", "자식노드",  function() {});
  이때는 이벤트를 적용하는곳의 자식노드에 이벤트가 적용된다

---

※ 더블클릭하면, li태그가 삭제되는 코드

---

※ 더블클릭하면, Node를 생성하는 코드 _ 1. 이벤트를 걸어놓은 태그만 이벤트적용

• body에 h1태그가 생성되어있고,
• 그 h1태그에 더블클릭을 하면, 같은값을 가진($(this).html()) h1태그가 생성된 후
• body에 붙는다
• 이렇게 작성할 경우, 맨처음 원래 생성되어있던 태그에만 이벤트가 적용된다
• ==나중에 생성된 태그도 같은내용, 같은 태그이지만 이벤트는 적용받지 못한다는 의미

---

※ 더블클릭하면, Node를 생성하는 코드 _ 2. 다음에 생성된 태그에도 이벤트부여

• 1번과 같은 코드를 작성하고, 
• 다음에 생성된 태그에도 이벤트를 걸어준다
• 하지만, 역시 두번째로 생성된 태그에는 이벤트가 적용되지 않는다
• 따라서, 이 방법은 비효율적이다

---

※ 더블클릭하면, Node를 생성하는 코드 _ 3. 생성되는 모든 태그에 이벤트 부여

• 2번에서의 코드를 수정하여 작업해보자,
• 나중에 만들어진 태그에도 이벤트를 적용하려면, 이벤트함수를 호출하는 곳을 document로 지정한다
• 또, 이벤트를 호출하여 사용하는 on함수에 매개변수를 3개 입력한다
• $(이벤트적용할 곳).on("이벤트이름", "자식노드",  function() {});