Javascript中的设置事件/事件对象及事件对象作用

设置事件
DOM1级设置事件的方法
1.
<input type = "text" onclick = "funcName()"/>
<script>
function funcName(){
alert();
}
</script>
2.
<input type = "text" onclick = "执行语句"/>

3.<input type = "text" id = "node"/>
<script>
var node = document.getElementById("node");
node.onclick = function funcName(){
alert();
}
</script>
取消事件: node.onclick = null;

DOM2设置事件的方式:
1.主流浏览器(IE9+)
node.addEventListener("事件类型",事件处理函数[,事件流类型]);
node.removeEventListener("事件类型",事件处理函数[,事件流类型]);
2.IE浏览器(IE6,7,8)
node.attachEvent("事件类型",事件处理函数);
node.detachEvent("事件类型",事件处理函数);
事件类型:就是具体事件,比如onclick
事件处理函数:可以是一个有名或者匿名函数;
事件流类型:true代表捕捉型,false代表冒泡型;
冒泡型:事件从子元素内部往外部父元素依次出发;
捕获型:事件从外部父元素开始出发,直到内部子元素事件;

事件对象:事件处理函数的第一个形参就是事件对象;
1.主流浏览器(IE9+)
onde.onclick = function(evt){//evt就是事件对象;

}

node.addEventListener("onclick",functionName(evt));
functionName = function(evt){//evt就是事件对象;
 
}
2.2.IE浏览器(IE6,7,8)
onde.onclick = function(){
 
var evt = window.event;//window.event;

}

所以为兼顾兼容性,一般写为
functionName = function(evt){//evt就是事件对象;
e = evt || window.event;
}
事件对象的作用:
1.获得事件相关信息,比如按键的值,鼠标的坐标
e.keyCode;
e.PageX;
2.阻止事件流"
e.stopPropagation();//主流浏览器;

window.event.cancelBubble = true;//(IE6,7,8),取消事件冒泡;
3.阻止浏览器默认行为,比如连接单击的提交,表单的提交;
event.preventDefault();//主流浏览器
event.returnValue = false;//(IE6,7,8),
return false;//dom1级事件设置下起作用;