使用对象.事件 = 函数来绑定响应函数。 它只能同时为一个元素的一个事件绑定一个响应函数，而不能绑定多个，一旦绑定后，后面的响应函数将会覆盖前面的。
<script type="text/javascript"> window.onload = function(){ var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ console.log("哈哈哈~"); }; btn01.onclick = function(){ console.log("hhhhhhh"); }; }; </script> <!-- 输出hhhhhhh-->这是可以使用addEventListener()来绑定函数 他需要三个参数：1）事件的字符串，不要on （例如onclick，写成click） 2）回调函数 3）是否在捕获阶段触发事件，一般都传false eg: btn.addEventListner("click" , function(){} , false ); 当事件触发时，响应函数会按照函数的绑定顺序执行 但是IE8及以下浏览器不支持 可以使用attachEvent() 两个参数：1）事件字符串，要on 2）回调函数 他是先绑定，后执行。执行顺序与addEventListener()相反，它支持IE8及以下浏览器。
创建一个bind函数，来兼容所有浏览器
<script type="text/javascript"> window.onload = function(){ var btn01 = document.getElementById("btn01"); //三个参数：obj 要绑定事件的对象，eventStr 事件的字符串（不要on），callback 回调函数 function bind( obj , eventStr , callback){ if(obj.addEventListener){ obj.addEventListener(eventStr , callback , false); }else{ obj.attachEvent("on"+eventStr , function(){ /* * addEventListener中this是绑定事件的对象， * attachEvent中this是window * 需要统一两个方法中的this * 在匿名函数中调用回调函数，改变attachEvent中的this */ callback.call(obj); }); } }; bind(btn01 , "click" , function(){ console.log("hi~"); }); bind(btn01 , "click" , function(){ alert("hello~"); }); }; </script> <!-- hi~ hello~ -->W3C将事件的传播分为三个阶段， 1）捕获阶段：在捕获阶段时，从最外层的祖先元素开始向目标元素进行事件的捕获，淡漠人不会触发事件 2）目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素上触发事件 3）冒泡阶段：时间从目标元素开始向祖先元素传递，依次触发祖先元祖上的事件
如果希望在捕获阶段就触发事件，可将addEventListener()中的第三个参数设为true，但是注意IE8及以下浏览器没有捕获阶段
setCapture() 对鼠标按下相关的事件进行捕获，（只有IE支持），当调用一个元素的setCapture()方法后，这个元素会把下一次所有鼠标按下的相关事件捕获到自身上 releaseCapture() 取消捕获
注意：在网页中，拖拽网页中的内容时，浏览器默认会去搜索引擎中搜索选中的内容，这时会导致拖拽功能异常。如果不希望有该行为，可以通过 renturn false 来取消默认行为，但是在IE8中不起作用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ //获取box1函数对象 var box1 = document.getElementById("box1"); drag(box1); function drag(obj){ //创建box1的按下鼠标响应函数 obj.onmousedown = function(event){ //开启鼠标按下的捕获 box1.setCapture && box1.setCapture(); //div的偏移量 鼠标.clientX - box1.offsetLeft // 鼠标.clientY - box1.offsetTop var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; //创建document的鼠标移动 document.onmousemove = function(event){ event = event || window.event; //获取鼠标所在位置的坐标 var x = event.clientX - ol; var y = event.clientY - ot; //设置box1的位置 obj.style.left = x + "px"; obj.style.top = y + "px"; }; //创建document鼠标松开响应函数 document.onmouseup = function(){ //取消鼠标移动函数 document.onmousemove = null; //取消鼠标松开函数 document.onmouseup = null; //取消鼠标的捕获 obj.releaseCapture(); }; }; }; }; </script> </head> <body> <div id="box1"></div> </body> </html>