JavaScript绑定事件方式小结

JavaScript绑定事件方式

---

1、直接在DOM里绑定事件

2、在脚本里面绑定事件

3、通过事件监听绑定相应的函数

 

1、直接在DOM里绑定事件

---

 　　只是简单地绑定一个函数，可以写在行内。

    //直接在DOM里绑定事件
    <div id="btn" onclick="clickone()"></div> 
　　　<script>
　　　　　function clickone(){ alert("hello"); }
　　　</script>

 

2、在脚本里面绑定事件

---

 　　可以在脚本里写函数及绑定事件。

//脚本里面绑定
<div id="btn"></div>
<script>
　　　document.getElementById("btn").onclick = function（）{ alert("hello"); } 
</script>

 

3、通过事件监听绑定相应的函数

---

 　　通过事件监听来绑定相应的函数有两种写法，来适应不同的浏览器。

 　　addEventListener的使用方式：target.addEventListener(type, listener, useCapture);
　　　　target： 文档节点、document、window 或 XMLHttpRequest。
　　　　type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
　　　　listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
　　　　useCapture ：是否使用捕捉，一般用 false 。事件冒泡(true)还是事件捕获(false)，涉及到从下到上还是从上到下的事件发生顺序。

　　　　例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

 

　　　　target.attachEvent(type, listener);
　　　　　　target： 文档节点、document、window 或 XMLHttpRequest。
　　　　　　type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
　　　　　　listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

　　　　　　例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

 

　　　　W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
　　　　　　W3C格式:removeEventListener(event,function,capture/bubble);
　　　　　　Windows IE的格式如下:detachEvent(event,function);

 

　　　　用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

<div id="btn"></div>
<script>　　document.getElementById("btn").addeventlistener("click",clickone,false);
function clickone(){ alert("hello"); } //先执行　　　
document.getElementById("btn").addeventlistener("click",clicktwo,false);
function clicktwo(){ alert("world"); } //后执行
</script>

//跨浏览器解决办法
var x = document.getElementById("myBtn");
//所有主流浏览器，除了 IE 8 及更早 IE版本
if (x.addEventListener) {                    
    x.addEventListener("click", myFunction);
// IE 8 及更早 IE 版本
} else if (x.attachEvent) {                  
    x.attachEvent("onclick", myFunction);
}