참고 URL : https://minkdak.tistory.com/5
$(document).on()
이 경우는 "이벤트를 위임"을 보여준다고 생각하면 된다.
이 이벤트 핸들러(event handler)는 DOM트리 보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아 실행한다.
대부분의 DOM 이벤트 들이 Tree의 꼭대기에서 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 이것이 가능한 것이다.
그래서 해당하는 id의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 된다.
즉 우리가 알고있는 DOM 트리(꼭대기가 html의 뿌리라고 볼수 있는 <html> 태그 부터 아래로 나뭇가지처럼 자식태그들이 형성이 되어 있고,
자식 태그 들이 없는 태그들(나뭇잎)까지 쭉쭉 뻗어 있는 듯한 모양)보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 태그가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있다는 것이다.
$(document).ready()
이 경우는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 한다.
엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없다.
쉽게 말하면 이 경우에서 click 함수를 전파할 때 알고있는 DOM의 엘리먼트 들에는 새롭게 생성된 태그들은 존재하지 않다고 알고 있기 때문이다.
.bind 함수를 사용하여서 추가하여도 되나, 아래의 방법으로 미리 지정해놓아도 된다.
* bind 사용법
$('##idp_user_name').bind({
focusout : idcheck
});
* on 사용법
$(document).on(이벤트명,태그명,function(){
실행할 내용
}
1. 동적으로 불러오는 테이블이 있는데, 그 테이블의 td에 마우스를 올릴 경우 상세 내용을 표시하고 싶었음.
또한 해당 td를 input 으로 변경시에도 내용을 표시하고싶음
2. 모든 페이지에서 사용하는 공통 js 파일에 아래의 내용을 기재
* 아래의 소스는 mouseover 이벤트를 적용 한 예
* td 태그에 마우스올릴시 (mouserover) 해당 이벤트 실행
=================================================================================================================
//... 으로 표시된 텍스트 위에 마우스 올릴시 모든 내용을 표시할때 사용
$(document).on("mouseover","td",function() {
$('td').each(function () {
if (this.offsetWidth < this.scrollWidth)
$(this).attr('title', $(this).text());
});
});
//내용이 길어서 짤린 input 에 적용
$(document).on("mouseover","input",function() {
$('input').each(function () {
if (this.offsetWidth < this.scrollWidth)
$(this).attr('title', $(this).val());
});
});
=================================================================================================================
2. 동적으로 불러 오는 테이블에 마우스를 올릴경우 해당 이벤트가 실행됨
URL https://api.jquery.com/category/events/
위의 URL 에 기재되어있는 이벤트들은 다 된다고 보면됨
또는 아래의 방법으로 적용 가능 이벤트 확인
1. browser를 연다.
2. f12를 누른다.
3. console창에 console.dir($(document)); 를 친다.
또는 console.dir(document) 를 친다
4. event와 property를 찾아본다.
5. on으로 시작되는애들은 전부event로 보면된다.