js事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js事件相关的知识,希望对你有一定的参考价值。

事件流:事件在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;//组织默认方法;

以上是关于js事件的主要内容,如果未能解决你的问题,请参考以下文章

js原生模拟点击事件

js动态绑定onclick事件,事件点击多时无响应

js阻止默认事件的方法

怎样理解js中的事件监听

JS事件

js如何清除所有绑定的事件?