JS 바인딩 events_javascript 기술 이해
- WBOY원래의
- 2016-05-16 15:19:081231검색
이 기사에서는 참고용으로 JS 바인딩 이벤트에 대한 자세한 분석을 제공합니다.
이벤트 바인딩에 호환성 문제가 있습니다. IE 초기 버전에서는 obj.attachEvent()를 사용했지만, 다른 브라우저에서는 addEventListener()를 사용했습니다.
두 메소드 모두 이벤트 유형, 이벤트 함수 의 세 가지 매개변수를 가지며, 마지막 매개변수는 부울 값 이며 true 또는 false입니다.
true는 이벤트 캡처 단계에서 실행됨을 의미하고, false는 이벤트 버블링 단계에서 실행됨을 의미합니다.
IE는 이벤트 버블링만 지원하므로 대부분의 경우 이벤트 핸들러는 이벤트 흐름의 버블링 단계에 추가되며 기본값은 "false"입니다.
이는 다양한 브라우저와의 호환성을 극대화합니다. 이벤트가 대상에 도달하기 전에 이벤트를 가로채야 하는 경우에만 캡처 단계에 이벤트 핸들러를 추가하는 것이 가장 좋습니다. 특별히 필요한 경우가 아니면 이벤트 캡처 단계 동안 이벤트 핸들러를 등록하지 않는 것이 좋습니다.
다양한 브라우저의 이벤트 바인딩과 호환됩니다:
function addEvent(obj, eventType, callback, bubble){
if(obj.addEventListener){
obj.addEventListener(eventType, callback, bubble);
}else{
obj.attachEvent(eventType, callback, bubble);
}
}
호출할 때 콜백 함수에는 setTimeout과 마찬가지로 괄호가 필요하지 않습니다.
이 부분은 비교적 이해하기 쉽습니다. 마지막 매개변수에 대해서는 많은 사람들이 잘 이해하지 못하고 있다고 생각합니다. 간단히 말해서 실제로 알아내기 전에 테스트할 프로그램을 작성해야 합니다.
HTML 부분:
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="">
<title>Document</title>
<!--css js 文件的引入-->
</head>
<body>
<div id="out">
<p>我是路人甲</p>
<div id="middle">
<div id="inner">最里面的</div>
</div>
<p>我是路人乙</p>
</div>
</body>
</html>
js 콘텐츠: (첫 번째 경우)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：inner-------middle------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js 콘텐츠: (두 번째 경우)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
js 콘텐츠: (세 번째 경우)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js 콘텐츠: (네 번째 사례)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------middle------inner
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js 콘텐츠: (다섯 번째 상황)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：middle-------inner------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js 콘텐츠: (여섯 번째 사례)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------inner------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
위의 6가지 상황에 해당하는 결과를 읽으신 후에는 마지막 매개변수가 참인지 거짓인지에 대한 차이를 이미 깊이 이해하셨으리라 믿습니다.