JavaScript学习：事件处理

day two

JavaScript事件处理函数与绑定

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。

今天主要分享一下给HTML元素的事件绑定JavaScript事件处理函数的几种方法。

一：ele.onxxx = function(event){}

特点：

• 兼容性很好，但是同一个元素的同一个事件上只能绑定一个处理程序
• 基本等同于写在HTML行间

绑定函数：

<script>
var div = document.getElementByTagName('div')[0];
div.onclick = function (){
	this.style.backgroundColor = 'green'
}
</script>

this指向元素本身

解除绑定：

ele.onclick = null/false/'';

实例：
如果想让一个事件只能被触发一次：

<script>
var div = document.getElementByTagName('div')[0];
div.onclick = function (){
	console.log('a');
	this.onclick = null; //让事件处理函数只执行一次
}
/*
div.onclick = null;
解除绑定
*/
</script>

二、ele.addEventListener(type,fn,false);

特点：

• IE9以下不兼容（w3c标准），可以为一个事件绑定多个处理程序

绑定函数：

<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',text,false);
div.addEventListener('click',texttwo,false);
function text(){
	console.log('a');
}
function texttwo(){
	console.log('b');
}
/*测试this指定哪个位置
div.addEventListener('click',function (){
	console.log(this)
},false);
*/
</script>

注：给一个元素绑定同一个事件，只能绑定一次

this指向元素本身

解除绑定

ele.removeEventListener(type, fn,false);

实例：

<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',text,false);
div.addEventListener('click',texttwo,false);
function text(){
	console.log('a');
}
function texttwo(){
	console.log('b');
}
div.removeEventListener('click',text,false);
div.removeEventListener('click',texttwo,false);
</script>

注：若绑定匿名函数，则无法解除

三、obj.attachEvent(‘on’+type,fn);

• IE独有，一个事件同样可以绑定多个处理程序

<script>
var div = document.getElementsByTagName('div')[0];
div.attatchEvent('click',text,false);
div.attachEvent('click',texttwo,false);
function text(){
	console.log('a');
}
function texttwo(){
	console.log('b');
}
</script>

注：给一个元素绑定同一个事件，能绑定多次
this指向windows

解除绑定

ele.detachEvent('on/+type,fn);

用法与上个相同，同样的匿名函数无法解除绑定。