zoukankan      html  css  js  c++  java
  • Javascript 事件对象(五)事件捕获

    事件捕获:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 div {padding: 50px;}
     8 #div1 {background: red;}
     9 #div2 {background: blue;}
    10 #div3 {background: green; position: absolute; top: 300px;}
    11 </style>
    12 <script>
    13 window.onload = function() {
    14         
    15     var oDiv1 = document.getElementById('div1');
    16     var oDiv2 = document.getElementById('div2');
    17     var oDiv3 = document.getElementById('div3');
    18     
    19     function fn1() {
    20         alert( this.id );
    21     }
    22     
    23     /*oDiv1.onclick = fn1;
    24     oDiv2.onclick = fn1;
    25     oDiv3.onclick = fn1;*/
    26     
    27     //true  = 进去的事件
    28     //false = 出去的事件
    29     
    30     //告诉div1,如果有一个出去的事件触发了你,你就去执行fn1这个函数
    31     /*oDiv1.addEventListener('click', fn1, false);
    32     oDiv2.addEventListener('click', fn1, false);
    33     oDiv3.addEventListener('click', fn1, false);*/
    34     
    35     //告诉div1,如果有一个进去的事件触发了你,你就去执行fn1这个函数
    36     /*oDiv1.addEventListener('click', fn1, true);
    37     oDiv2.addEventListener('click', fn1, true);
    38     oDiv3.addEventListener('click', fn1, true);*/
    39     
    40     oDiv1.addEventListener('click', function() {
    41         alert(1);
    42     }, false);
    43     oDiv1.addEventListener('click', function() {
    44         alert(3);
    45     }, true);
    46     oDiv3.addEventListener('click', function() {
    47         alert(2);
    48     }, false);
    49     //
    50     
    51 }
    52 </script>
    53 </head>
    54 
    55 <body>
    56     <div id="div1">
    57         <div id="div2">
    58             <div id="div3"></div>
    59         </div>
    60     </div>
    61 </body>
    62 </html>
  • 相关阅读:
    企业级应用框架设计备忘录
    DBHelper
    Oracle客户端精简绿色版 不安装oracle客户端 转载
    回车转TAB
    excel列显示列号 转载
    XtraTreeList Drag Event
    XmlSerializer vs DataContractSerializer: Serialization in Wcf 转载
    转载 在Windows64位环境下.net访问Oracle解决方案
    正则表达式学习笔记
    SQL相关子查询的例子
  • 原文地址:https://www.cnblogs.com/trtst/p/3784694.html
Copyright © 2011-2022 走看看