ディレクトリ
- バインドどちらの方法でイベント
- イベントバインディングコードの互換性
- バインディング差のイベント
- アンバンドリング
- 互換性のリコンシリエーション・イベントコードに関連付けられたイベントのバインド
- イベントバブリング
- イベントバブリングを停止します
- イベントの三の段階
- 同じイベントハンドラを指す異なる登録イベントで同じ要素については、
両方のアプローチの結合要素
- 最初：addEventListenerを（「イベントタイプ」、イベントハンドラ、偽）----- GoogleサポートのFirefox、IE8はサポートしていません。
- attachEvent（、イベントハンドラ「イベントタイプのバンド」）----- GoogleはFirefoxや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
- パラメータの数と同じではありません
- 3つのパラメータがありますaddEventListenerを
- attachEvent 2つのパラメータのみ
- ブラウザのサポートは同じではありません
- addEventListenerをグーグル、Firefoxは、IE11のサポート、IE8はサポートしていません。
- attachEvent IEがサポートしていませんが、Googleは、Firefoxは、IE11はサポートしていません。
- 別の本
- この中のaddEventListener現在のオブジェクト結合事象を指し
- これでattachEventは窓を指し、
- さまざまな種類のイベント
- addEventListenerを、イベントの種類ではありません
- 上のイベントタイプをattachEvent
アンバンドリング
注意：どのような方法で、どのような方法でイベントを結合、それはアンバンドリングイベント
最初の
- オブジェクト.onイベント名= ------------イベントハンドラ結合事象
- .onオブジェクトイベント名= NULL; -------------アンバンドリングイベント
//点击第二个按钮，解除第一个按钮的绑定事件
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
btn.onclick = function() {
console.log('Worth it');
}
btn1.onclick = function() {
//解绑事件
btn.onclick = null;
}第2
- （という名前の関数「イベントタイプ」、false）を.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 =; // Googleは、IE8はサポートしていますが、Firefoxはサポートしていません。
- e.stopPropagation（）; //グーグル、Firefoxのサポートが、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>