绑定事件
绑定事件有三种方式:
第一种，很土的，不管什么行为样式结构分离的，直接在标签里加事件
如<input type="button" value="点击" onclick="say();"/>
看完整代码:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^案件开始^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
================= js部分===============
<script type="text/javascript"><!--此处为行为部分-->
function xin(){
alert("abc");
}
</script>
===============html 部分===================
<input type="button" onclick="xin()" value="点击" /><!--结构部分-->
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^案例结束^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
代码解释：
上面的代码写的不好，因为它相当于
<script type="text/javascript"><!--此处为行为部分-->
function xin(){
alert("abc");
}
xin();//注意这里，如果在<input type="button" value="点击" onclick=xin() ;/>就是在这里调用这么个方法，此时这个方法属于window了.
</script>
第二种绑定方式：
给dom对象直接加事件
document.getElementByTagName("input")[0].onclick=function (){ aler("abc")};
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^第二种绑定方式完整代码^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
js部分：
<script type="text/javascript"><!--此处为行为部分-->
window.onload=function (){
var buttonObj=document.getElementsByTagName("input")[0];//给按钮加个click事件t*/
buttonObj.onclick=function(){
alert("xin");
注意：这样的绑定方式，优点：
当alert(this);时，代表的是当前对象。即button这个dom对象
不足：不能给一个事件绑定多个执行函数。
}
}
</script>
html部分：
<input type="button" value="点击" /><!--结构部分-->
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^案例结束^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
第三绑定方式domLev3事件绑定标准，为了弥补第二种方式不能绑定多个事件而产生
注意：第三种方式分支持w3c和IE非支持W3c而讨论
addEventListener('事件',函数); // 第一个参数事件参数, 没有前缀"on", w3c的标准,IE不支持
注意点1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"
注意占2: 事件处理函数中的this 指代 DOM节点自身 (w3c标准)
注意点3: 第一个事件参数,一律把事件名称的'on'去掉 (w3c标准)
去除绑定
removeEventListener('事件',函数)
IE下绑定事件与解除事件的方法
attachEvent('事件',函数) // 注意: 事件 要加on
detachEvent('事件',函数) // 事件依然要加on
总结一下:
W3c addEventListener 与IE的attachEvent()的不同
1: 函数名不同
2: 事件名不同, IE下要加on,w3c不加on
3: 加事件后的执行顺序不同, w3c按绑定事件的顺序来执行, 而IE6,7,是后绑定的事件先发生.
4: this的指向, w3c中,绑定函数中的this指向 DOM对象, 而IE6,7中,指向window对象