js事件

Posted 2020-07-16

事件流：事件在DOM结构中传播的过程；
事件冒泡：事件从最开始的具体元素到最外层的document出啊脉搏的过程；
事件捕获：不太具体的节点应该最先接收到消息，一直传播到最里层的节点；

事件处理程序的方式：
1.<input type="button" value="button1" id="button1" onclick="alert("Hello World!");" />
2.<script>
var btn = document.getElementById("button1");
btn.onclick = function(){alert("Hello World!");}
btn.onclick = null;
</script>
3.var btn = document.getElementById("button1");
btn.addEventListner("click",function(){alert("Hello World!");},false);
btn.removeEventListner("click",function(){alert("Hello World!");},false);

4.ie事件处理程序函数：
btn.attach("onclick",function_name);//注意这里又变成了onclick
btn.detach("onclick",funciton_name);//而且只有两个参数

5.那怎么样兼容浏览器呢？
跨浏览器的时间处理程序：
将不同事件处理程序放在if else判断语句中，再将它们放在一个对象中，进行调用；

var eventHandler{
addHandler:function(element_name,event_name,function_name){
if(element_name.addEventHandler){
element_name.addEventHandler(event_name,function_name,false);
}else if(element_name.attach){
element_name.attach("on"+evemt_name,function_name);
}else{
element_name["on"+event_name] = function_name;
}
}
removeHandler:function(element_name,event_name,function_name){
if(element_name.removeEventHandler){
element_name.addEventHandler(event_name,function_name,false);
}else if(element_name.attach){
element_name.detach("on"+evemt_name,function_name);
}else{
element_name["on"+event_name] = null;//js中所有的"."都可以替代成"[]";
}
}
}
//调用对象的两个方法；
eventHandler.addHandler(btn,"click",showMessage);
eventHandler.removeHandler(btn,"click",showMessage);

6.DOM中的事件对象event；
function showMessage(event){
alert(event.type);//获取事件类型；
alert(event.target.nodeName);//获取事件发出点；
event.stopPropagation();//阻止事件冒泡，不在父级元素相应事件；
}
还有一个比较重要的event对象的方法就是preventDefault();它组织事件的默认行为；
例：<a id="go" ref="http://www.baidu.com/">Go</a>
<script>
var my_go = document.getElementById("go");
my_go.onclick = function(event){event.preventDefault();}//再点击就不会跳转了
</script>

6.而在IE事件处理对象中，event=window.event;//event的获取方式不一样；
event.type;//type获取方式一样；
event.srcElement;//target获取方式不同；
event.cancelBubble = true;//组织冒泡；
event.returnValue = false;//组织默认方法；