JavaScript学习笔记

第一种方式

<a href="#" onclick="t()">自学it网</a>
<script type="text/javascript">
	function t(){
		alert('自学it网');
	}
	/*
	在这个过程中，a标签上绑定了onclick事件
    用句柄来描述就是：a标签的onclick句柄上绑定了t函数。
    
    分析：
    1.Dom对象的句柄
    2.句柄上绑定的函数
    3.事件发生的那一瞬间，关于事件的各种信息，
	如：时间、发生时鼠标在屏幕上的坐标、事件类型等等，这些信息被打包成一个对象，便于我们获取。
	这个对象称为事件对象。
	*/
</script>

绑定事件的第一种方式：把事件写在标签的属性里
如<a href="#" onclick="t()">自学it网</a>
这是Dom 0 级的标准（非常古老的标准）
好处：大家都会，几乎所有的浏览器都支持
坏处：夹杂在html代码中，不简洁，这种事件写法效率不高，不符合“行为，结构，样式”相分离

第二种方式

用事件属性来绑定事件函数

好处1：完成了行为的分离。
好处2：便于操作当事对象，因为function是作为对象的on--属性出现的，
因此，函数里操作该对象，直接用this就能引用当事对象。
好处3：可以方便的读取事件对象。

好处2案列

<a href="#" id="test">this</a>
<script type="text/javascript">
document.getElementById('test').onclick = function (){
	this.style.background = 'red';
}
<script>

好处3案列

<a href="#" id="t2">event</a>
<script type="text/javascript">
//事件触发时，系统自动把“事件对象”传递给“事件函数”，以其第一个参数来传。
document.getElementById('t2').onclick = function (ev){
	console.log(ev);
}
<script>

坏处
只能绑定一个事件
后面的事件把前面onload的属性值给覆盖了

window.onload = function(){
	alert('hello');
}

window.onload = function() {
	alert('world');
}

第三种方式-addEventlistener

1.绑在那个事件上？ click,mouseover,mouseout,blur,focus,mouseup等
2.绑定什么函数？---》自定义事件函数
3.什么方式监听执行事件函数？ 捕捉，冒泡？
语法：xxDomObject.addEventlistener(事件，函数);

<div id="test1"></div>
<script type="text/javascript">
	var test1 = document.getElementById('test1');
	test1.addEventListener('click',function(){
		this.style.backgroundColor = 'gray';
	},false);

	test1.addEventListener('click',function(){
		alert('hello');
	},false);

	test1.addEventListener('click',function(){
		alert('world');
	},false);
</script>

注意细节:
1.事件名，一律不带on
2.绑定函数中的this指绑定该事件的对象。
3.绑定的多个事件函数，是按照绑定的顺序执行的。

解除事件绑定：
W3C模型下：Obj.removeEventlistener('事件',监听函数,true/false);
IE8及以下：obj.detachEvent('on事件',监听函数,true/false);