绑定事件的方式

js事件的绑定方式 3种
方式1

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

方式2

<div id="btn2">2.脚本里面绑定</div>
<script>
    document.getElementById("btn2").onclick = function () { alert("hello2"); }
    document.getElementById("btn2").onclick = function () { alert("hello3"); }
</script>

方式3

<div id="btn3">3.通过侦听事件处理相应的函数 </div>
<script>
    document.getElementById("btn3").addEventListener("click", clickone, false);
    document.getElementById("btn3").addEventListener("click", clickone1, false);
    function clickone() { alert("hello"); }
    function clickone1() { alert("hello"); }
</script>

那么问题来了，1 和 2 的方式是我们经常用到的，那么既然已经有两种绑定事件的方法为什么还要有第三种呢 ？
答案是这样的：
  用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，
  而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；
  在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

onabort 图像的加载被中断
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。