디렉토리
- 바인딩 두 방법 모두 이벤트
- 이벤트 바인딩 코드 호환을
- 차 이벤트를 바인딩
- 개별적으로 가격을 매기는
- 화해 이벤트 코드 호환에게 묶여 바인딩 이벤트
- 이벤트 버블 링
- 정지 이벤트 버블 링
- 이벤트의 세 단계
- 동일한 이벤트 핸들러를 가리키는 등록 이벤트로 같은 요소에 대해서는
두 가지 접근 방식의 요소를 결합
- 첫 번째 :하여 addEventListener ( '이벤트 유형', 이벤트 핸들러, 거짓) ----- 구글 지원 파이어 폭스, IE8은 지원하지 않습니다
- 는 attachEvent (이벤트 핸들러 '이벤트 유형에 밴드') ----- 구글은 파이어 폭스, IE8 지원을 지원하지 않습니다
<body>
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById('btn');
//为按钮绑定点击事件: DOM中，只有一种，但是不兼容，所以有两种
//第一种：addEventListener('事件类型'， 事件处理函数， false)-----谷歌火狐支持，IE8不支持
//参数1： 事件的类型----也就是事件的名字，没有on
//参数2: 事件处理函数----也就是函数（命名函数或匿名函数）
//参数3： Boolean类型，暂时为false
//第二种： attachEvent（'带on的事件类型'，事件处理函数）-----谷歌火狐不支持，IE8支持
//参数1： 事件类型----带on
//参数2： 事件处理函数-----函数（命名或匿名）
btn.addEventListener('click', function() {
console.log('明智之举');
}, false);
btn.addEventListener('click', function() {
console.log('作词：许嵩');
}, false);
btn.addEventListener('click', function() {
console.log('作曲：许嵩');
}, false);
btn.addEventListener('click', function() {
console.log('演唱：许嵩');
}, false);
// btn.attachEvent('onclick', function() {
// console.log('明智之举');
// });
// btn.attachEvent('onclick', function() {
// console.log('如约而至');
// });
// btn.attachEvent('onclick', function() {
// console.log('许嵩');
// });
</script>
</body>이벤트 바인딩 코드 호환을
//为任意一个元素，绑定任意事件 任意元素， 事件的类型，事件处理函数
function addEventListener(element, type, fn) {
if (element.addEventListener) { //判断这个浏览器是否支持这个方法
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn); //element.attachEvent('onclick',function(){})
} else {
element['on' + type] = fn; // element.onclick = function() {}
}
}이벤트 바인딩 차이
같은 점
이벤트를 결합 할 수있는 요소
다른 점
- 메소드 이름이 동일하지 않습니다
- 또는 addEventListener
- 는 attachEvent
- 매개 변수의 수와 동일하지 않음
- 세 개의 매개 변수가있다하여 addEventListener
- 는 attachEvent 두 개의 매개 변수
- 브라우저 지원은 동일하지 않습니다
- 또는 addEventListener 구글, 파이어 폭스, IE11 지원, IE8은 지원하지 않습니다
- 는 attachEvent IE는 지원하지 않습니다, 구글, 파이어 폭스, IE11은 지원하지 않습니다
- 다른이
- 이것으로하여 addEventListener 현재 개체 바인딩 이벤트를 참조
- 이의는 attachEvent 창을 말한다
- 이벤트의 종류
- 하여 addEventListener 이벤트 유형에없는
- 의 이벤트 유형는 attachEvent
개별적으로 가격을 매기는
참고 : 어떤 방법으로 어떤 방법으로 이벤트를 바인딩, 그것은 개별적으로 가격을 매기 이벤트
첫 번째
- 개체 CSTE 연구진은 이벤트 이름 = ------------ 이벤트 핸들러 바인딩 이벤트
- CSTE 연구진은 객체 이벤트 이름 = NULL; ------------- 개별적으로 가격을 매기 이벤트
//点击第二个按钮，解除第一个按钮的绑定事件
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
btn.onclick = function() {
console.log('Worth it');
}
btn1.onclick = function() {
//解绑事件
btn.onclick = null;
}두 번째
- 바인딩 이벤트를 .addEventListener (거짓 '이벤트 유형'이라는 기능) 객체 ----------
- ( '이벤트 유형'이라는 기능 false)를 .removeEventListener 객체 ------- 바인딩 해제 이벤트
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
function f3() {
console.log('明智之举');
}
function f4() {
console.log('作词：许嵩');
}
btn.addEventListener('click', f3, false);
btn.addEventListener('click', f4, false);
btn1.onclick = function() {
//这种方式解绑的时候需要使用命名函数
btn.removeEventListener('click', f4, false);
}세 번째
- .attachEvent (이름 기능 '이벤트 유형에 밴드') 객체;
- .detachEvent (이름 기능 '이벤트 유형에 밴드') 객체;
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
function f3() {
console.log('明智之举');
}
function f4() {
console.log('作词：许嵩');
}
btn.attachEvent('onclick', f3);
btn.attachEvent('onclick', f4);
btn1.onclick = function() {
btn.detachEvent('onclick', f3);
};화해 타임 코드 호환에게 묶여 바인딩 이벤트
<input type="button" value="歌曲" id="btn">
<input type="button" value="清空歌曲" id="btn1">
<body>
<script src='common.js'></script>
<script>
//绑定事件的兼容代码
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn);
} else {
element['on' + type] = fn;
}
}
//解绑事件的兼容代码
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fnName);
} else {
element['on' + type] = null;
}
}
//test
function f1() {
console.log('明智之举');
}
function f2() {
console.log('作词：许嵩');
}
addEventListener(my$("btn"), "click", f1);
addEventListener(my$("btn"), "click", f2);
my$("btn1").onclick = function() {
removeEventListener(my$("btn"), "click", f1);
};
</script>이벤트 버블 링
소자 내부 이벤트가 트리거되는 경우 중첩 된 복수의 요소, 계층 관계는, 이들 요소는 동일한 이벤트에 등록되어있는 경우 자동으로 외부 소자를 트리거
<style>
#dv1 {
width: 300px;
height: 400px;
background-color: #def;
}
#dv2 {
width: 250px;
height: 350px;
background-color: #edf;
}
#dv3 {
width: 200px;
height: 300px;
background-color: #fed;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
//事件冒泡：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的该事件自动触发
var dv1 = document.getElementById('dv1');
var dv2 = document.getElementById('dv2');
var dv3 = document.getElementById('dv3');
dv1.onclick = function() {
console.log('dv1');//dv1
}
dv2.onclick = function() {
console.log('dv2');//dv2 dv1
}
dv3.onclick = function() {
console.log('dv3');//dv3 dv2 dv1
}
</script>정지 이벤트 버블 링
- 사실 window.event.cancelBubble =; // 구글은 IE8은 지원하지만, 파이어 폭스를 지원하지 않습니다
- e.stopPropagation (); // 구글, 파이어 폭스 지원하지만, IE8을 지원하지 않습니다
<style>
#dv1 {
width: 300px;
height: 400px;
background-color: #def;
}
#dv2 {
width: 250px;
height: 350px;
background-color: #edf;
}
#dv3 {
width: 200px;
height: 300px;
background-color: #fed;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
var dv1 = document.getElementById('dv1');
var dv2 = document.getElementById('dv2');
var dv3 = document.getElementById('dv3');
// 在事件被触发时会产生一个事件处理对象参数
//如何阻止事件冒泡
//1. window.event.cancelBubble = true;//谷歌，IE8支持，但火狐不支持
//2. e.stopPropagation();//谷歌、火狐支持，但是IE8不支持
dv1.onclick = function() {
console.log(this.id);
}
dv2.onclick = function(e) { //这里的e就是事件触发时产生的事件处理对象参数
console.log(this.id);
//阻止事件冒泡
e.stopPropagation();
}
dv3.onclick = function() {
console.log(this.id);
//阻止事件冒泡
window.event.cancelBubble = true;
}
</script>
</body>이벤트의 세 단계
- 1 이벤트가 내 외측 ----------> 위상 캡처 것을 나타낸다
- 2 단계는 이벤트 목표를 나타냅니다
- 3 나타내고 있다고 내부에서 이벤트 버블 위상 ---------->
- 경우
<style>
#dv1 {
width: 300px;
height: 400px;
background-color: #def;
}
#dv2 {
width: 250px;
height: 350px;
background-color: #edf;
}
#dv3 {
width: 200px;
height: 300px;
background-color: #fed;
}
</style>
</head>
<body>
<div id='dv1'>
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
//同时注册点击事件
var objs = [document.getElementById('dv1'),
document.getElementById('dv2'),
document.getElementById('dv3')
];
//遍历注册事件
objs.forEach(function(ele) { //传一个参数的时候，这个参数是元素
//为每个元素绑定事件；
// ele.addEventListener('click', function() {
// console.log(this.id + '--------->' + window.event.eventPhase);
// }, false);
ele.addEventListener('click', function() {
console.log(this.id + '--------->' + window.event.eventPhase);
}, true);
});
//array.forEach(function(数组当前项的值， 数组当前的索引，数组对象本身){
//});
</script>- 개요
为元素绑定事件
addEventLinstener('没有on的事件类型'，事件处理函数，控制事件阶段的)
false------>表示事件冒泡阶段（从内向外 或者 从上到下）
true-------> 表示事件捕获阶段（从外向内 或者 从下到上）
事件触发的过程中可能会出现事件冒泡的效果，为了阻止事件冒泡----->
1. window.event.cancelBubble = true;谷歌，IE8支持，火狐不支持
window.event就是一个对象，是IE的标准
2. e.stopPropagation();
window.event 和 e 都是事件参数对象，一个是IE标准，一个是火狐标准
事件参数e在IE8中的浏览器中是不存在的，此时用window.event来代替
addEventLinstener中的第三的参数是用来控制事件阶段的
事件阶段有三个
1-----》事件捕获阶段
2-----》事件目标阶段
3-----》事件冒泡阶段
一般默认用冒泡阶段，很少用捕获阶段동일한 이벤트 핸들러를 가리키는 등록 이벤트로 같은 요소에 대해서는
<body>
<input type="button" value="nice!" id='btn'>
<script>
var btn = document.getElementById('btn');
btn.onclick = f1;
btn.onmouseover = f1;
btn.onmouseout = f1;
function f1(e) {
switch (e.type) {
case 'click':
alert("nice!");
break;
case 'mouseover':
this.style.backgroundColor = '#def';
break;
case 'mouseout':
this.style.backgroundColor = '#fed';
break;
}
}
</script>
</body>