javascript的三种绑定事件
在js中有三中绑定事件的方法
第一种：直接写在标签里面的，不去考虑行为样式结构相分离，它属于DOM lev0级标准
优点：兼容性好
缺点：1，代码臃肿
2，当同时需要触发两个或两个以上函数时，使用t();t1()
3，当在函数内部使用this关键字时并不是指的对象本身，而是指的window对象
如：<input type="button" value="点击" onclick="fn()" />
实例说明
-------------------------------------------------------
<!-- js部分 -->
<script type="javascript/text">
function fn1(){
alert('这是第一种事件绑定方法');
}
</script>
<!-- html部分 -->
<input type="button" value="点击" onclick="fn1()" />
-------------------------------------------------------
第二种：绑定方式
它主要是在绑定一个匿名函数在对象的上
例如：对象.onclick = function (){......}
这样绑定需要注意的是，js代码必须写在页面的下面，或者使用
window.onload = function(){
对象.onclick = function (){....}
}
优点：实现了行为样式结构相分离，this关键字指的是对象本身
缺点：不能同时绑定两个或以上事件，要实现绑定多个事件，只能把其他事件放到绑定一个事件里面去，然后在绑定该事件
实例说明
-------------------------------------------------------
<!-- js部分 -->
<script type="javascript/text">
window.onload = function(){
//获得元素节点
var inp = document.getElementsByTagName('input')[0];
inp.onclick = function (){
alert('这是第二种事件绑定方法');
}
}
</script>
<!-- html部分 -->
<input type="button" value="点击" />
-------------------------------------------------------
第三种：addEventListener绑定（分为IE和非IE讨论，属于lev3）
主要是弥补了第二种方式不能绑定多个事件
非IE下使用addEventListener
addEventListener('监听的事件',回调函数,冒泡/捕捉)
第一个参数是监听的事件名称：例如 onclick,onmouseover,注意的是，在W3C中事件名称是不用加前缀'on'的
第二个参数是执行的回调函数，可以是匿名函数，也可以是具体的函数名称，如果想取消某个事件的回调函数，就必须使用具体的函数名称
第三个参数的值为false/true，默认是false，即为冒泡，当设置为true，则为捕捉，可以不用写，但是建议写上
IE下使用attachEvent
addEventListener('监听的事件',回调函数)
与非IE不同的是，
监听事件名称是要加'on'的
W3c addEventListener 与IE的attachEvent()的不同
1: 函数名不同
2: 事件名不同, IE下要加on,w3c不加on
3: 加事件后的执行顺序不同, w3c按绑定事件的顺序来执行, 而IE6,7,8,是后绑定的事件先发生（也有可能是没有规则的）.
4: this的指向, w3c中,绑定函数中的this指向 DOM对象, 而IE6,7,8中,指向window对象
所以在使用第三中事件绑定的时候一定要考虑浏览器的兼容
实例说明
-------------------------------------------------------
<!-- js部分 -->
<script type="javascript/text">
window.onload = function(){
function t(ev){
//在w3c中，点击后,ev 参数就代表单击那一瞬间的"各个参数",以一个对象的方式传过去
//对于IE, 当事件发生的瞬间,事件对象赋值给window.event属性
ev = ev || window.event;
alert('这是第三种事件绑定方法');
}
//获得元素节点
var inp = document.getElementsByTagName('input')[0];
if(inp.addEventListener){
//w3C标准
inp.addEventListener('click',t,false);
}else{
//第三个参数false可以不写
inp.attachEvent('onclick',t,false);
}
}
</script>
<!-- html部分 -->
<input type="button" value="点击" />
-------------------------------------------------------
去除事件的绑定
在w3c下使用
removeEventListener('事件',函数)
在IE下使用
detachEvent('事件',函数) // 事件依然要加on
事件的中断
在w3c: 事件.stopPropagation();
在IE中, 事件对象.cancelBubble = true;
取消事件的默认效果
事件对象.preventDefault(); // 阻止事件的默认效果, w3c方法
事件对象.returnValue = false; // 设置returnValue 的属性值为false; IE
