html 部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Event Bubling Example</title>
  5.     </head>
  6.     <body>
  7.         <!--事件冒泡 与事件捕捉 顺序相反-->
  8.         <!--事件冒泡
  9.             1 <div>
  10.             2 <body>
  11.             3 <html>
  12.             4 document
  13.         -->
  14.         <!--事件捕捉
  15.            1.document
  16.            2.html
  17.            3.body
  18.            4.div
  19.         -->
  20.         <div id="myDiv" onclick="showMessage();">Clike Me</div>
  21.         <input type="button" value="click me" onclick="alert(this.value);" />
  22.         <!--如果函数在函数未定义前单击不会抛出错误-->
  23.         <input type="button" value="click me" onclick="try{showMessage();} catch(ex){console.log(ex);}" />
  24.         <input type="button" value="myBtn" id="myBtn"/>
  25.         <input type="button" value="myBtn2" id="myBtn2" />
  26.         <input type="button" value="IEEevent" id="myBtn3" />
  27.         <input type="button" value="13.3.1 DOM中的事件对象" id="myBtn4" />
  28.         <a href="http://www.baidu.com" id='link'> link </a>
  29.  
  30.         <div id="myDiv2" >
  31.             Right click or Ctrl+click me to get a custom context menu.
  32.             <ul id="myMenu" style="position: absolute;visibility: hidden;background-color:silver;">
  33.                 <li><a href="http://www.nczonline.net">Nicholas Site</a></li>
  34.                 <li><a href="http://www.wrox.com">Wrox Site</a></li>
  35.                 <li><a href="http://www.yahoo.com">Yahoo !</a></li>
  36.             </ul>
  37.         </div>
  38.  
  39.         <script type="text/javascript" src="event.js" ></script>
  40.     </body>
  41. </html>

　　

js 部分

  1. function showMessage() {
  2.     alert("Hello world!");
  3. }
  4. //alert(this.value)  匿名函数thi.value翻译 from 是所属表单
  5. // function(){
  6. //     with(document)
  7. //     {
  8. //         with(this.form)
  9. //         {
  10. //             with(this)
  11. //             {
  12. //                 //元素属性值
  13. //             }
  14. //         }
  15. //     }
  16. // }
  17.  
  18. //13.2.2
  19.  
  20. var btn = document.getElementById("myBtn");
  21. btn.onclick = function () {
  22.     alert("Clicked");
  23.     alert(this.id);
  24.     btn.onclick = null; //事件删除
  25. }
  26.  
  27. //13.2.3 DOM2级事件处理程序
  28.  
  29. btn.addEventListener('click', function () {
  30.     alert(this.id);
  31. }, false);
  32.  
  33. btn.addEventListener('click', function () {
  34.     alert("Hello wolrd!");
  35. }, false);
  36.  
  37. btn.removeEventListener('click', function () { alert(this.id); }, false); //此处无法删除事件，因为事件引用不同。
  38. //btn.onclick =null; //此处也无用，因为事件监听是属于一个观察者模式，所以这里删除btn本身的事件无法达到删除监听设置的事件
  39. //下属方式可以实现增加和删除事件
  40.  
  41. //实现事件监听和移除
  42. var btn2 = document.getElementById("myBtn2");
  43. var handler = function () { alert(this.id); };
  44. btn2.addEventListener('click', handler, false);
  45. //btn2.removeEventListener('click',handler,false); //有效
  46.  
  47. //13.2.4 IE事件处理程序
  48.  
  49. var btn3 = document.getElementById("myBtn3");
  50. //下面代码在IE11中已经不支持，IE11支持 addEventListener
  51. // btn3.attachEvent('onclick',function(){
  52. //     alert('clicked');
  53. // });
  54. // var handler2 = function(){alert('Clicked');};
  55. // btn3.attachEvent('onclick',handler2);
  56. // btn3.detachEvent('onclick',handler2);
  57.  
  58. //13.2.5 跨浏览器的事件处理程序
  59.  
  60. var EventUtil = {
  61.     addHandler: function (element, type, handler) {
  62.         if (element.addEventListener) {
  63.             element.addEventListener(type, handler, false);
  64.         } else if (element.attachEvent) {
  65.             element.attachEvent('on' + type, handler);
  66.         }
  67.         else {
  68.             element['on' + type] = handler;
  69.         }
  70.     },
  71.     removeHandler: function (element, type, handler) {
  72.         if (element.removeEventListener) {
  73.             element.removeEventListener(type, handler, false);
  74.         } else if (element.detachEvent) {
  75.             element.detachEvent('on' + type, handler);
  76.         }
  77.         else {
  78.             element['on' + type] = null;
  79.         }
  80.     }
  81. };
  82.  
  83. var handler = function () { alert('Clicked'); };
  84.  
  85. EventUtil.addHandler(btn3, 'click', handler);
  86. //EventUtil.removeHandler(btn4,'click',handler);
  87.  
  88. //13.3 事件对象
  89. // 13.3.1 DOM中的事件对象
  90.  
  91. // 属性方法     类型       读写    说明
  92. //  bubbles      Boolean   只读    表明事件是否冒泡
  93. // cancelable    Boolean   只读    表明是否可以取消事件的默认行为
  94. // currentTarget Element   只读    其事件处理程序应当正在处理事件的那个元素
  95. // defaultPrevented Boolean 只读   为true表示已经调用了preventDefault() DOM3级事件中新增
  96. // detail         Integer  只读    与事件相关的详细信息
  97. // eventPhase     Integer  只读    调用事件处理程序的阶段：1表示事件捕捉阶段，2表示 "处于目标" 3表示冒泡阶段
  98. // preventDefault Function 只读    取消事件的默认行为,如果cancelable是true,则可以使用这个方法
  99. // stopImmediatePropagetion Function 只读    取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用 DOM3级事件中新增
  100. // stopPropagation   Function 只读     取消事件的进一步捕捉或冒泡。如果bubbles 为true  则可使用该方法
  101. // target           Element  只读     事件的目标
  102. // trusted      Boolean     只读      为true表示事件是浏览器生成的，为false表示事件是有开发人员通过avascript 创建的 DOM3 中新增
  103. // type          string     只读      触发事件的类型
  104. // view          AbstractView  只读  与事件关联的抽象视图。等同于发生事件的window 对象
  105.  
  106. //事件冒泡到body click
  107.  
  108. // document.body.onclick = function (event) {
  109. //     alert(event.currentTarget === document.body); //当前处理事件的元素是body
  110. //     alert(this === document.body);
  111. //     alert(event.target === document.getElementById("myBtn")); //事件目标，由谁触发
  112.  
  113. // }
  114.  
  115. var btn4 = document.getElementById("myBtn4");
  116. var handler4 = function (event) {
  117.     switch (event.type) {
  118.         case "click":
  119.             alert("Clicked");
  120.             break;
  121.         case "mouseover":
  122.             event.target.style.backgroundColor = 'red';
  123.             break;
  124.         case "mouseout":
  125.             event.target.style.backgroundColor = '';
  126.             break;
  127.     }
  128. }
  129.  
  130. btn4.onclick = handler4;
  131. btn4.onmouseover = handler4;
  132. btn4.onmouseout = handler4;
  133.  
  134. var link = document.getElementById("link");
  135. link.onclick = function (event) {
  136.     if (event.cancelable) {
  137.         event.preventDefault(); //取消事件默认行为
  138.     }
  139.     event.stopPropagation(); //取消事件向下冒泡
  140. };
  141.  
  142. //13.3.2 IE中的事件对象 （IE11版本都已支持DOM2 DOM3 的特性即html5 等标准）
  143. //  属性/方法             类型     读写    说明
  144. //   cancelBubble       Boolean   读/写   默认为false ,但将其设置为true就可以取消事件冒泡
  145. //                                        与 DOM 中的stopPropagation() 方法相同
  146. //   returnValue        Boolean   读/写   默认值为true ,但将其设置为false 就可以取消事件的默认行为
  147. //                                        与DOM中的preventDefault() 方法相同
  148. //   srcElement         Element   只读     事件的目标（与DOM中的target属性相同）
  149. //   type               string    只读     被触发的事件类型
  150.  
  151. // 13.3.3 跨浏览器的事件对象
  152.  
  153. var EventUtilExt = {
  154.     addHandler: function (element, type, handler) {
  155.         if (element.addEventListener) {
  156.             element.addEventListener(type, handler, false);
  157.         } else if (element.attachEvent) {
  158.             element.attachEvent('on' + type, handler);
  159.         }
  160.         else {
  161.             element['on' + type] = handler;
  162.         }
  163.     },
  164.     removeHandler: function (element, type, handler) {
  165.         if (element.removeEventListener) {
  166.             element.removeEventListener(type, handler, false);
  167.         } else if (element.detachEvent) {
  168.             element.detachEvent('on' + type, handler);
  169.         }
  170.         else {
  171.             element['on' + type] = null;
  172.         }
  173.     },
  174.     getEvent: function (event) {
  175.         return event ? event : window.event; //ie 低版本只支持window.event
  176.     },
  177.     getTarget: function (event) {
  178.         return event.target || event.srcElement;
  179.     },
  180.     preventDefault: function (event) {
  181.         if (event.preventDefault) {
  182.             event.preventDefault();
  183.         } else {
  184.             event.returnValue = false;
  185.         }
  186.     },
  187.     stopPropagation: function (event) {
  188.         if (event.stopPropagation) {
  189.             event.stopPropagation();
  190.         } else {
  191.             event.cancelable = true;
  192.         }
  193.     }
  194. };
  195.  
  196. // btn4.onclick =function(event){
  197. //     event = EventUtilExt.getEvent(event);
  198. // }
  199.  
  200. // 13.4 事件类型
  201. // 13.4.1 UI事件
  202. //             load : 当页面完全加载后在window 上面触发
  203. //            unload: 当页面完全卸载后在window 上面触发
  204. //             abort: 当用户停止下载过程时，如果嵌入的内容没有加载完成，则在<object> 元素上面触发
  205. //             error: 当发生javascript错误时候在window 上面触发
  206. //            select: 当用户选择文本框（input 或 texterea) 中一或者多个字符时触发
  207. //            resize: 当窗口或者框架的大小发生变化时在window或者框架上触发。
  208. //            scroll: 当用户滚动带滚动条的元素的内容时候触发。在该元素上触发
  209. //    document.implementation.hasFeature("HTMLEvents","2.0") //确定浏览器是否支持DOM2级事件规定的HTML事件
  210.  
  211. // EventUtil.addHandler(window, 'load', function (event) {
  212. //     alert('Loaded');
  213. // });
  214.  
  215. //13.4.2 焦点事件
  216. // blur  元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
  217. // DOMFocusIn: 在元素或得焦点时候触发，这个事件与html事件focus 等价，但会冒泡，只有Opera 支持 DOM3级别已废除，选择focusin
  218. // DOMFocusOut: 在元素失去焦点时候触发，DOM3已废除 支持focusout
  219. // focus : 获得焦点 元素获得焦点时候触发，不会冒泡。所有浏览器支持
  220. // focusin : focus等价，但会冒泡
  221. // focusout : 失去焦点时触发与blur 等价
  222.  
  223. //13.4.3 鼠标与滚动轮事件
  224.  
  225. // click  单击
  226. // dbclick  双击
  227. // mousedown 按下鼠标任意键，不能通过键盘触发该事件
  228. // mouseenter 鼠标首次移动到元素内触发，鼠标DOM2 不支持，DOM3 纳入标准，不冒泡
  229. // mouseleave 鼠标离开元素时候触发
  230. // mousemove  鼠标在元素内部移动时候触发。不能通过键盘触发
  231. // mouseout   鼠标指针位于一个元素上方，然后用户将其以入到另外一个元素时候触发
  232. // mouseover  鼠标在一个元素外部，然后用户首次以入一个元素边界之内时候触发
  233. // mouseup    在用户释放鼠标按钮时候触发，不能通过键盘触发这个事件
  234.  
  235. document.implementation.hasFeature('MouseEvents', "2.0"); //检查DOM2 是否支持鼠标事件
  236. document.implementation.hasFeature('MouseEvent', "3.0"); //检查DOM3 是否支持鼠标事件
  237.  
  238. //event.clientX event.ClientY 从可视口（可见区域的位置)基于 窗口左上角计算
  239. //event.pageX event.pageY 基于页面计算的位置，当视图没有滚动条上海clientx =pagex;
  240. //event.screenX event.screenY 基于屏幕的位置计算
  241.  
  242. //DOM通过对象的relateTarget属性提供相关元素信，这个属性只对于mouseover mouseout 事件才有效
  243. EventUtilExt.getRelateTarget = function (event) {
  244.     if (event.relatedTarget) {
  245.         return event.relatedTarget;
  246.     } else if (event.toElement) {
  247.         return event.toElement;
  248.     }
  249.     else if (element.fromElement) {
  250.         return event.fromElement;
  251.     } else {
  252.         return null;
  253.     }
  254. }
  255.  
  256. //鼠标按钮
  257. EventUtilExt.getButton = function (event) {
  258.     if (document.implementation.hasFeature("MouseEvents", "2.0")) {
  259.         return event.button; //原生DOM 模式
  260.     } else {
  261.         //IE 模式下的button
  262.         switch (event.button) {
  263.             case 0:
  264.             case 1:
  265.             case 3:
  266.             case 5:
  267.             case 7:
  268.                 return 0;
  269.             case 2:
  270.             case 6:
  271.                 return 2;
  272.             case 4:
  273.                 return 1;
  274.         }
  275.     }
  276.  
  277. }
  278.  
  279. //鼠标滚动
  280. //mousewheel
  281.  
  282. //键码 event.keyCode  参考键码表  event.charcode 
  283.  
  284. //textInput 事件
  285.  
  286. //btn.addEventListener('textInput',function(event){},false);
  287. //textInput 事件中包含 属性  inputMethod 表示文本输入文本框的方式
  288.  
  289. //复合事件
  290. //compositionStart : 在IME的文本复合系统打开时触发，表示要输入了
  291. //compositionupdate: 在向输入字段中插入新字符时候触发，
  292. //compositioned :  在IME的文本复合系统关闭时触发，表示返回正常的键盘输入状态
  293. //document.implementation.hasFeature("CompositionEvent","3.0"); 确定浏览器是否支持复合事件
  294.  
  295. //13.4.6 变动事件
  296. document.implementation.hasFeature("MutationEvents","2.0"); //检查浏览器是否支持变动事件
  297. // DOMSubtreeModified: 在DOM结构中发生任何变化时触发，这个事件在其他任何事件触发后都会触发
  298. // DOMNodeInserted: 在一个节点作为一个子节点插入到另外一个节点时触发
  299. // DOMNodeRemoved:  在节点从其父节点中被移除时触发
  300. // DOMNodeInsertIntoDocument : 在一个节点被直接插入文档或者通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
  301. // DOMAttrModified : 在特性被修改之后触发
  302. // DOMCharacterDataModified : 在文本节点的值发生变化时触发
  303.  
  304. //13.4.7 HTML5事件
  305. //contextmenu 鼠标右键
  306. EventUtilExt.addHandler(window,'load',function(event){
  307.     var div = document.getElementById("myDiv2");
  308.     EventUtilExt.addHandler(div,'contextmenu',function(event){
  309.  
  310.         event =EventUtilExt.getEvent(event);
  311.  
  312.         EventUtilExt.preventDefault(event);
  313.  
  314.         var menu = document.getElementById("myMenu");
  315.         menu.style.left = event.clientX+"px";
  316.         menu.style.top = event.clientY+"px";
  317.         menu.style.visibility ='visible'
  318.     });
  319.  
  320.     EventUtilExt.addHandler(document,'click',function(){
  321.         document.getElementById("myMenu").style.visibility ='hidden';
  322.     });
  323.  
  324. });
  325.  
  326. //beforeunload  设计目的是让开发人员有可能在页面卸载前阻止这一操作
  327. //readystatechange  含（uninitialized loading loaded interactive(交互) complete)
  328. //pageshow pagehide
  329. //hashchange 事件 以便在URL的参数列表（及URL中#号后面的所有字符串发生变化时通知开发人员
  330. //之所以新增这个事件，是因为在Ajax应用中，开发人员经常利用URL参数列来保存状态信息或导航
  331.  
  332. //13.6.1 DOM中的事件模拟
  333.  
  334. //document.createEvent()  方法接收一个参数分别为  UEEvents MouseEvents MutationEvents HTMLEvents
  335. //_event.initMouseEvent() //接收15个参数
  336. //参数列表
  337.     //1. type（字符串） 表示要触发的事件类型 ，如click
  338.     //2. bubbles（boolean) 表示事件是否应该冒泡，为精准模拟鼠标事件，应该把这个参数设置为true
  339.     //3. cancelable(boolean)  表示事件是否可以取消，精准模拟鼠标事件，应该把这个参数设置成为true
  340.     //4. view(AbstractView) 与事件关联的视图，这个参数几乎总是要设置为 document.defaultView
  341.     //5. detail (整数) 通常设置成0
  342.     //6. screenX 事件相对于屏幕的X坐标
  343.     //7. screenY 事件相对与屏幕的Y坐标
  344.     //8. clientx 事件相对于视口的X坐标
  345.     //9. clientY 事件相对于视口的Y坐标
  346.     //10.ctrlKey 表示是否按下了Ctrl键，默认值为false
  347.     //11 altKey  表示是否按下了Alt键， 默认值为false
  348.     //12 shiftKey 表示是否按下了Alt键，默认值为false
  349.     //13 metaKey  表示是否按下了Meta键，默认值为false
  350.     //14 button 整数，表示按下了哪个一个鼠标键，默认值为0
  351.     //15 relateTarget(对象) 表示与事件相关的对象，这个参数只在模拟mouseover 或 mouseout 时使用
  352.  
  353.     //模拟鼠标事件示例
  354.     var btn5 = document.getElementById("myBtn5");
  355.     //创建事件
  356.     var __event = document.createEvent("MouseEvents");
  357.     //初始化事件
  358.     __event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
  359.     //触发事件
  360.     btn5.dispatchEvent(__event);
  361.  
  362.     //模拟键盘事件示例
  363.     //事件对象包含initKeyboardEvent方法
  364.     //type 表示触发的事件类型 如 keydown
  365.     //bubbles boolean 表示事件是否应该冒泡，为精准模拟事件应该设置为true
  366.     //cancelable 表示是否可以取消，为精准模拟事件应该设置为true
  367.     //view(AbstractView) 与事件关联的视图，这个参数几乎总是要设置为 document.defaultView
  368.     //key (boolean) 表示按下键的键码
  369.     //location (整数) 表示按下了哪里的键，0 表示默认主键盘，1表示左键盘，2表示右键盘，3表示数字键盘，4表示移动设备，5表示手柄
  370.     //modifiers (字符串) 空格分隔的修改键列表，如shift
  371.     //repeat 整数，在一行中按下了这个键多少次
  372.     //ctrlKey 表示是否按下了Ctrl键，默认值为false
  373.     //altKey  表示是否按下了Alt键， 默认值为false
  374.     //shiftKey 表示是否按下了Alt键，默认值为false
  375.     //metaKey  表示是否按下了Meta键，默认值为false
  376.     //keyCode (整数) 被按下或释放的键的键码，这个参数对于keydown keyup事件有用，默认值为0
  377.     //charCode(整数) 通过按键生成的ASCII编码，这个参数对于keypress事件有用，默认值为0
  378.  
  379.     function KeyboardEventA(){
  380.     // var textbox = document.getElementById("myBtn6"),event;
  381.     // if(document.implementation.hasFeature("KeyboardEvents","3.0")){
  382.     //     event = document.createEvent("KeyboardEvent");
  383.     //     event.initKeyboardEvent('keydown',true,true,document.defaultView,'a',0,"Shift",0);
  384.     // }
  385.     // //触发事件
  386.     // textbox.dispatchEvent(event);
  387.  
  388.     //此处代码不知道为什么在浏览器失效，以后再研究。
  389.     var txt=document.getElementById("myBtn6");
  390.     txt.focus();
  391.     if(document.implementation.hasFeature("KeyboardEvents","3.0")){
  392.         var evt =document.createEvent("KeyboardEvent");
  393.         evt.initKeyboardEvent("Keydown",true,true,document.defaultView,"a",0,"Shift",0);
  394.         txt.dispatchEvent(evt);
  395.     }
  396. }

　　

javascript权威指南第13章 事件示例代码的更多相关文章

  1. javascript权威指南第11章 DOM扩展

    //javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...

  2. 【笔记】javascript权威指南-第六章-对象

    对象 //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...

  3. 【笔记】javascript权威指南-第三章-类型，值和变量

    javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.27   计算机程序运行时需要对值(value ...

  4. JavaScript权威指南科13章 webj浏览器avascript

    13.1 clientjavascript window对象是所有clientjavascript特点和api主要的接入点.它代表了一个浏览器窗口,通过window对象引用它. window 方法 a ...

  5. javascript权威指南第14章 表单脚本示例代码

    HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...

  6. javascript权威指南第12章DOM2 DOM3 示例代码

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Example XHTML ...

  7. javascript权威指南第16章 HTML5脚本编程

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  8. 《Javascript权威指南》13号学习笔记：使用日期和时间

    一.创Date示例 1.Date类的方法和属性是非常不静,故,申请书Date属性和方法之前.必须创建Date类的实例. var date = new Date();  //以当前日期和时间创建实例. ...

  9. javascript权威指南第22章高级技巧

    HTML <!DOCTYPE html> <html> <head> </head> <body> <div style=" ...

随机推荐

  1. PAT甲级题分类汇编——图

    本文为PAT甲级分类汇编系列文章. 图,就是层序遍历和Dijkstra这一套,#include<queue> 是必须的. 题号 标题 分数 大意 时间 1072 Gas Station 3 ...

  2. 【Linux】一步一步学Linux——Linux版本(03)

    目录 00. 目录 01. Linux内核版本 02. Linux内核官方网站 03. Linux发行版本 04. Linux发行版本介绍 4.1 Ubuntu 4.2 RedHat 4.3 Debi ...

  3. Python2和3字符编码的区别

    Python2和3字符编码的区别 一.字符编码应用之Python 1.1 执行Python程序的三个阶段 Python test.py(我再强调一遍,执行test.py的第一步,一定是先将文件内容从硬 ...

  4. [tomcat] 连接池参数maxActive、maxIdle 、maxWait 等

    maxActive 连接池支持的最大连接数,这里取值为20,表示同时最多有20个数据库连接.设 0 为没有限制.maxIdle 连接池中最多可空闲maxIdle个连接 ,这里取值为20,表示即使没有数 ...

  5. Codeforces-975C - Valhalla Siege 前缀和 思维

    C. Valhalla Siege time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  6. html中标签的英文含义！

    html中的标签缩写的英文是什么?  标签  英文全称  含义 ul unordered lists 无序列表 li list item 列表项目 ol ordered lists 有序列表 dl d ...

  7. js中的BOM和DOM常用事件方法

    笔记: window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开 ...

  8. js控制台不同的打印方式

    在控制台单个输出: console.log(...):值 console.info(...):信息 console.debug(...):调试信息 console.warn(...):警告信息 con ...

  9. active port

    2510099 - SSL Port XXXXX Not Active - message on NWA even though SSL works Resolution Open the defau ...

  10. linux IPC简单学习

    Posix和system v区别 所谓的IPC(进程间通信)指的是消息队列,共享内存,信号量3种机制合并起来,当然,这是个狭义的概念,只包含这三种.IPC又可以分为system v进程间通信和posi ...