JavaScript高级知识（三）

绑定事件的2种常用方式

事件对象：事件发生的一瞬间，关于事件的各种信息，如时间，如发生时鼠标在屏幕上的坐标，事件类型等等，这些信息被打包成一个对象，便于我们获取

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


//第二种事件绑定方式：用事件的属性来绑定函数
document.getElementById("test").onclick = function(){
    alert("有人点我");
} 
/*
好处1：完成了行为的分离
好处2：便于操作当事对象，因为function是作为对象的on***属性出现的，因此，函数里操作该对象，直接用this就能引用当事对象
好处3：方便读取事件对象
*/

addEventListener高级事件绑定

第三种事件绑定方式：W3c中的标准——addEventListener

绑定在哪个事件上？click，load，change，blur，focus等等
绑定什么函数？——自定义事件函数
什么方式监听执行事件函数？——捕捉，冒泡。

var test = document.getElementById('test');
test.addEventListener('click',function(){this.style.background = "gray";},false);
test.addEventListener('click',function(){alert("自学！");},false);
test.addEventListener('click',function(){alert("IT");},false);

细节：

事件名一律不带on
绑定事件函数的“this”，指绑定该事件的对象
执行顺序是按绑定顺序来执行的。

捕捉模型与冒泡模型

function $(id){
    return document.getElementById(id);
}
$("china").addEventListener('click',function(){alert("进入chian");},true);
$("bj").addEventListener('click',function(){alert("进入bj");},true);
$("hd").addEventListener('click',function(){alert("进入hd");},true);

$("china").addEventListener('click',function(ev){alert("离开chian");},false);
$("bj").addEventListener('click',function(){alert("离开bj");},false);
$("hd").addEventListener('click',function(){alert("离开hd");},false);

总结：

第三个参数true/false代表捕捉/冒泡模型，如果不填，默认为false（不建议省略）
系统会为事件函数自动传入事件对象，作为第一个参数传入：ev

事件停止传播与效果阻止

事件（捕捉/冒泡）的过程中，如果想停止事件的传播，比如：被bj捕捉后，hd就不会再去捕捉了，事件到此停止，或hd冒泡后，事件结束，bj就不能冒泡。就需要使用事件对象的stopPropagation();函数

function $(id){
    return document.getElementById(id);
}
$("china").addEventListener('click',function(){alert("进入chian");},true);
$("bj").addEventListener('click',function(ev){alert("进入bj";ev.stopPropagation(););},true);
$("hd").addEventListener('click',function(){alert("进入hd");},true);

以表单为例，我想点击“onsubmit”时，检查是否填写完全，如果不完全，不让它提交，即取消事件本应有的效果，就需要使用事件对象的preventDefault();函数

$("form").addEventListener('submit',function(ev){
    if($("age").value = ''){
        ev.preventDefault();
    }
},false);

解除绑定

<p>哈哈</p>
<input type="button" value="让你哭" onclick="addcry()">
<input type="button" value="让你笑" onclick="addla()">
<input type="button" value="你别哭" onclick="remcry()">
<input type="button" value="你别哭" onclick="remcry()">

<script>
    function cry(){
	alert("我想哭！");
    }

    function la(){
	alert("我想笑！");
    }

    function addcry(){
        document.getElementsByTagName('p')[0].addEventListener('click',cry,false);
    }

    function addla(){
        document.getElementsByTagName('p')[0].addEventListener('click',la,false);
    }

    function remcry(){
        document.getElementsByTagName('p')[0].removeEventListener('click',cry,false);
    }

    function remla(){
        document.getElementsByTagName('p')[0].removeEventListener('click',la,false);
    }
</script>

IE事件模型与标准事件模型详细对比

IE9及以上版本，已经支持W3c标准，在IE9以下版本中，是IE独有的事件模型，与W3c标准模型主要有以下几点不同：

绑定事件的函数不一样，IE用attachEvent();，移除事件函数用detachEvent();
事件必须要加on
绑定的事件不是严格的顺序执行，是随机执行
W3c中，this指向对象本身，而IE模型中，this指向window

window.onload = function(){
			document.getElementById('test1').attachEvent('onclick',function(){alert("捕捉");},true);
			document.getElementById('test1').attachEvent('onclick',function(){alert("冒泡");},false);
		}

相关文章