本文共 4738 字，大约阅读时间需要 15 分钟。
JavaScript
本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
事件
• 关于事件实际上我们已经初步接触过了，指的就是用户与浏览器交互的一瞬间。
• 我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件触发以后我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。
事件对象 Event ※
• 在DOM对象上的某个事件被触发时，会产生一个事件对象Event，这个对象中包含着所有事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
• 例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event对象，但支持方式不同。
• DOM标准的浏览器会将一个event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个event对象。
• 可以通过这种方式获取：
• Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。 • 与访问 DOM 中的 event 对象不同，要访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。
• 在IE中event对象作为window对象的属性存在的，可以使用window.event来获取event对象。
例 ※ （clientX cilentY）
在IE8中，响应函数被触发时，浏览器不会传递事件对象。在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。所以涉及到事件对象的兼容性问题。
解决方案：event = event || window.event; Insert title here
练习 ※ （使div可以跟随鼠标移动）
事件的冒泡 ※ （Bubble）
例
事件的委派 ※
像之前，我们如果给每一个超链接绑定一个单击响应函数，使用遍历的方法绑定，
但是这种方式操作比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定。那我们希望的是，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。这就是事件的委派。 
事件的绑定 ※ addEventListener() attachEvent()
小总结：（绑定的方法）
对象.事件 = 函数
btn01.onclick = function(){ alert(2);}; addEventListener()
- 可以同时为一个元素的相同事件同时绑定多个响应函数。
- 当事件被触发时，响应函数将会按照函数的绑定顺序执行。
- 是否在捕获阶段触发事件，需要一个布尔值，一般都传false。
- 事件的字符串，不要on。
- 方法不支持IE8及以下的浏览器。
btn01.addEventListener("click",function(){ alert(1);},false); attachEvent()
- 可以同时为一个元素的相同事件同时绑定多个响应函数。
- 当事件被触发时，响应函数的执行顺序和addEventListener()相反。
- 和addEventListener()相比，不需要传递布尔值。
- 事件的字符串，要on。
- 在IE8中使用attachEvent()来绑定事件。
btn01.attachEvent("onclick",function(){ alert(1);}); 
事件的传播 ※
练习一：实现拖拽效果 ※
改进版：
我是一段文字
再改进版：
我是一段文字 
练习二：滚轮事件 ※
练习三：键盘事件 ※
练习四：使div可以根据不同的方向键向不同的方向移动 ※
总结 ※※
event = event || window.event;
event.cancelBubble = true;
event.clientX; event.clientY;
window.onload = function(){};
btn.onclick = function(){};
info.onscroll = function(){};
document.onkeydown = function(event){};
document.onkeyup = function(){};
box1.onmousewheel = function(event){};
//onmousedown事件会在鼠标按下时触发box1.onmousedown = function(event){ event = event || window.event; //onmousemove事件会在鼠标移动时触发 document.onmousemove = function(event){ event = event || window.event; }; //onmouseup事件会在鼠标松开时触发 document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; };}; 👆👇（应用）简便方法：
window.onload = function(){ //获取box1 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); //开启box1的拖拽 drag(box1); //开启box2的 drag(box2);};/* * 提取一个专门用来设置拖拽的函数 * 参数：开启拖拽的元素 */function drag(obj){ //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown obj.onmousedown = function(event){ //设置box1捕获所有鼠标按下的事件 obj.setCapture && obj.setCapture(); event = event || window.event; var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; //为document绑定一个onmousemove事件 document.onmousemove = function(event){ event = event || window.event; var left = event.clientX - ol; var top = event.clientY - ot; obj.style.left = left+"px"; obj.style.top = top+"px"; }; //为document绑定一个鼠标松开事件 document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; //当鼠标松开时，取消对事件的捕获 obj.releaseCapture && obj.releaseCapture(); }; return false; };} 简便方法：
window.onload = function(){ var btn01 = document.getElementById("btn01"); bind(btn01 , "click" , function(){ alert(this); }); var box1 = document.getElementById("box1"); //为box1绑定一个鼠标滚轮滚动的事件 box1.onmousewheel = function(event){ event = event || window.event; if(event.wheelDelta > 0 || event.detail < 0){ //向上滚，box1变短 box1.style.height = box1.clientHeight - 10 + "px"; }else{ //向下滚，box1变长 box1.style.height = box1.clientHeight + 10 + "px"; } event.preventDefault && event.preventDefault(); //当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动。如果不希望发生，则可以取消默认行为 return false; }; //为火狐绑定滚轮事件 bind(box1,"DOMMouseScroll",box1.onmousewheel); };//事件的绑定function bind(obj , eventStr , callback){ if(obj.addEventListener){ //大部分浏览器兼容的方式 obj.addEventListener(eventStr , callback , false); }else{ //IE8及以下 obj.attachEvent("on"+eventStr , function(){ //在匿名函数中调用回调函数 callback.call(obj); }); }} 转载地址：http://toyki.baihongyu.com/