1、什么是事件
通过鼠标、键盘对浏览器页面所做的动作就是事件。
事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任
onclick：鼠标点击
onmouseover：鼠标移入
onmouseout：鼠标移出
onkeyup：键盘按下并抬起
onkeydown：键盘按下
onchange：内容改变
onblur：失去焦点
onfocus：获得焦点
onsubmit：表单提交
2、设置事件
2.1、dom一级事件设置
1. ①<input type=”text” onclick=”函数名称()” /> 2. function 函数名称(){this[window]} 3. 4. ②<input type=”text” onclick=”过程代码this[itnode]” /> 5. 6. ③itnode.onclick = function(){this[itnode]} 匿名函数 7. 8. ④itnode.onclick = 函数名称; 有名函数 9. function 函数名称(){this[itnode]} 10. 11. 取消dom1级事件： 12. itnode.onclick = null;
2.2、dom二级事件设置
1. 1) 主流浏览器方式(包括IE9以上 版本浏览器)： 2. itnode.addEventListener(事件类型，事件处理[，事件流]); //设置 3. itnode.removeEventListener(事件类型，事件处理[，事件流]); //取消 4. 2) IE浏览器方式(IE6/7/8)： 5. itnode.attachEvent(事件类型，事件处理); //设置 6. itnode.detachEvent(事件类型，事件处理); //取消 7. 8. 事件类型：就是我们可以设置的具体事件，例如onclick/onmouseover等 9. 主流浏览器方式没有”on标志”，例如addEventListener(‘click’，...); 10. IE浏览器方式有”on”标志，例如attachEvent(‘onclick’) 11. 事件处理：事件驱动，可以是一个有名/匿名 函数 12. 例如addEventListener(‘click’,function(){}/有名函数); 13. 事件流：true捕捉型、[false冒泡型] 14. 15. 事件取消(removeEventListener/detachEvent)操作具体要求： 16. ① 事件处理 必须是有名函数，不可以是匿名函数。 17. ② 事件取消的参数与绑定的参数完全一致(数量/内容) 18. 19. dom2级事件设置的特点： 20. ① 可以为同一个对象设置多个同类型事件。 21. ② 事件取消也非常灵活。 22. ③ 对事件流也有很好的处理控制。
1. <html> 2. <head> 3. <title>事件设置</title> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <meta name="description" content="" /> 6. <meta name="keywords" content="" /> 7. 8. <script type="text/javascript"> 9. </script> 10. 11. <style type="text/css"> 12. div{width:300px; height:200px; background-color:pink;} 13. </style> 14. </head> 15. <body> 16. <h2>dom2级事件设置</h2> 17. <div>Today is cloud</div> 18. </body> 19. </html> 20. <script type="text/javascript"> 21. //给div进行事件的设置 22. var dv = document.getElementsByTagName('div')[0]; 23. //dv.addEventListener(事件类型，事件处理[，事件流]); 24. dv.addEventListener('click',function(){ 25. //事件处理过程 26. dv.style.backgroundColor = "lightblue"; 27. }); 28. 29. </script>
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. <html> 3. <head> 4. <title>新建网页</title> 5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <meta name="description" content="" /> 7. <meta name="keywords" content="" /> 8. 9. <script type="text/javascript"> 10. </script> 11. 12. <style type="text/css"> 13. div{width:300px; height:200px; background-color:pink;} 14. </style> 15. </head> 16. <body> 17. <h2>dom2级事件取消操作</h2> 18. <div>everyday is beautiful</div> 19. <input type="button" value="取消" onclick="cancel()" /> 20. </body> 21. </html> 22. <script type="text/javascript"> 23. var dv = document.getElementsByTagName('div')[0]; 24. //事件取消操作 25. function cancel(){ 26. //有名函数可以取消，并且事件"取消参数"与"绑定参数"完全一致 27. dv.removeEventListener('click',f1); 28. dv.removeEventListener('mouseover',over); 29. } 30. 31. dv.addEventListener('click',function(){ dv.style.backgroundColor = "lightblue";}); 32. 33. dv.addEventListener('click',function(){ console.log('I am here');}); 34. 35. function over(){dv.style.backgroundColor = "lightgreen";} 36. dv.addEventListener('mouseover',over);//直接拔事件处理函数名字设置上(没有()括号的) 37. 38. function out(){dv.style.backgroundColor = "pink";} 39. dv.addEventListener('mouseout',out); 43. </script>
3、事件流
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”• 1
1. 事件流分为两种类型（如果学过flash的话，可以看出非常相似）： 2. 冒泡型：事件从内部往外部依次执行。 3. 捕捉型：事件从外部往内部依次执行。 4. //addEventListener(类型，处理，事件流true捕捉/[false冒泡]); 5. 6. IE浏览器从开始到后期事件流始终是“冒泡型”的，直到IE9以后版本两种都开始支持。 7. 网景的Navigator浏览器(现在火狐浏览器的许多血统来源于navigator浏览器)一开始的事件流是”捕捉型”。后期事件流有改进，针对捕捉型、冒泡型都可以支持。
4、事件对象
事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。• 1
4.1、获取事件对象
1. ①主流浏览器(IE9以上版本浏览器)： 2. 事件处理函数的第一个形参就是 事件对象 3. 例如： 4. node.onclick = function(evt){evt就是事件对象} 5. addEventListener(类型,function(evt){}/函数名字); 6. function 函数名称(evt){} 7. 红色的evt就是事件对象 8. ② IE(6/7/8)浏览器 9. node.onclick = function(){window.event事件对象} 10. 全局变量event就是事件对象 11. 全局变量直接上级对象是window。可以通过window访问全局变量信息。 12. window.document.getElementById()
4.2、事件对象的作用
1. 1) 获得鼠标的坐标信息 2. event.clientX/clientY; //相对dom区域坐标 3. event.pageX/pageY; //相对dom区域坐标，给考虑滚动条距离 4. event.screenX/screenY; //相对屏幕坐标
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. <html> 3. <head> 4. <title>新建网页</title> 5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <meta name="description" content="" /> 7. <meta name="keywords" content="" /> 8. 9. <script type="text/javascript"> 10. </script> 11. 12. <style type="text/css"> 13. div{width:700px; height:3000px; background-color:pink;} 14. </style> 15. </head> 16. <body> 17. <h2>事件对象作用</h2> 18. <div>Today is very good</div> 19. </body> 20. </html> 21. <script type="text/javascript"> 22. //获得鼠标坐标 23. var dv = document.getElementsByTagName('div')[0]; 24. dv.onclick = function(evt){ 25. console.log(evt.clientX+"---"+evt.clientY);//372---287 相对dom区域坐标 26. console.log(evt.pageX+"---"+evt.pageY);//372---2969 相对dom区域坐标，给计算滚动条距离 27. console.log(evt.screenX+"---"+evt.screenY);//850---310 相对屏幕坐标 28. } 29. </script>
1. 2) 阻止事件流： 2. event.stopPropagation(); //主流浏览器 3. window.event.cancelBubble = true; // IE(678)浏览器
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. <html> 3. <head> 4. <title>新建网页</title> 5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <meta name="description" content="" /> 7. <meta name="keywords" content="" /> 8. 9. <script type="text/javascript"> 10. </script> 11. 12. <style type="text/css"> 13. div{width:400px; height:300px; background-color:pink;} 14. p{width:300px; height:200px; background-color:lightgreen;} 15. span{background-color:lightblue;} 16. </style> 17. </head> 18. <body> 19. <h2>事件流效果</h2> 20. <div> 21. <p> 22. <span>哈哈哈哈</span> 23. </p> 24. </div> 25. </body> 26. </html> 27. <script type="text/javascript"> 28. var dv = document.getElementsByTagName('div')[0]; 29. var ps = document.getElementsByTagName('p')[0]; 30. var sn = document.getElementsByTagName('span')[0]; 31. dv.addEventListener('click', 32. function(evt){ 33. console.log('11111'); 34. evt.stopPropagation(); //阻止事件流 35. }); 36. ps.addEventListener('click', 37. function(evt){ 38. console.log('22222'); 39. evt.stopPropagation(); //阻止事件流 40. }); 41. sn.addEventListener('click', 42. function(evt){ 43. console.log('33333'); 44. evt.stopPropagation(); //阻止事件流 45. }); 46. </script>
1. 3) 感知被触发键盘键子信息 2. event.keyCode 获得键盘对应的键值码信息 3. 通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。
1. 4) 阻止浏览器默认动作 2. 浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。 3. form表单提交的时候，需要对各个表单域进行验证，如果验证失败则禁止浏览器跳转。 4. 5. event.preventDefault(); //主流浏览器(dom1和dom2级事件都起作用) 6. event.returnValue = false; //IE(678)浏览器 7. return false; //dom1级事件设置起作用
5、加载事件onload
1. 什么是加载事件： 2. js代码执行时候，需要html&css的支持，就让html代码先执行(先进入内存)，js代码后执行 3. js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程 4. 5. 加载事件onload可以保证js代码后于html&css执行，其要在最后执行。 6. 具体设置： 7. <body onload=”加载函数()”> 8. window.onload = 匿名/有名 函数; //推荐
$(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); });
