码迷,mamicode.com
首页 > 其他好文 > 详细

8月16号=》411页-420页

时间:2014-08-17 19:46:02      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:http   使用   io   for   ar   cti   div   代码   

15.2.4  事件冒泡

    当浏览者在页面上执行某个动作时,页面上实际有多个元素可以响应该事件 ,假如单击页面的某个按钮,而该按钮又处于<div>元素之内,则实际

    上用户既单击了该按钮,也单击了该<div>元素。

    代码示范:

      //脚本代码

      var gotClick = function(who)

      {

        document.getElementById("results").innerHTML += who+"被单击";

      }

      //HTML代码

      <div onclick="gotClick(‘div元素‘)">

        <button onclick="gotClick(‘按钮元素‘)">冒泡测试</button>

      </div>

      <div id="results">

      </div>

    点击按钮元素时id为results的div元素内容将会显示“按钮元素被单击”,"div元素被单击"。

    如果想取消冒泡,在事件脚本内加上以下代码即可。

      event.cancelBubble = true;

 

15.2.5  重定向事件

    事件冒泡机制严格从子节点向父节点上溯,但在某些时候,我们不想让事件触发严格的按DOM树上溯,而是希望事件在不同节点之间跳跃,

    此时就可以借助Internet Explorer的事件重定向机制来实现。

    代码示范:

      //脚本代码

      var gotClick = function(who)

      {

        document.getElementById("results").innerHTML += who+"被单击";

        //阻止冒泡

        event.cancelBubble = true;

        //重定向到id为forward元素的onclick事件

        document.getElementById("forward").fireEvent("onclick",event);

      }

      //HTML代码

      <div onclick="gotClick(‘div元素‘)">

        <button onclick="gotClick(‘按钮元素‘)">测试</button>

      </div>

      <input type="button" id="forward" value="重定向的按钮" onclick="gotClick(‘重定向的按钮‘)"/>

      <div id="results">

      </div>

     点击测试按钮,id为results的div元素内将会显示“按钮元素被单击”,“重定向的按钮被单击”。

 

15.2.6  取消事件默认行为

    前面介绍了一种取消事件默认行为的方式:让事件处理函数的返回值为false,即可取消事件的默认行为。Internet Explorer还提供了另一种

    方式来取消事件的默认行为:将事件对象的returnValue属性设为false。

    代码示范:

      //脚本代码

      var clickTest = function()

      {

        //使用确认对话框获取一个布尔值

        var ok = confirm("是否跳转到链接");

        //修改event.returnValue属性值

        event.returnValue = ok;

      }

      document.getElementById("aTest").onclick = clickTest;

      //html代码

      <a id="aTest" href=www.baidu.com>跳转a标签</a> 

8月16号=》411页-420页,布布扣,bubuko.com

8月16号=》411页-420页

标签:http   使用   io   for   ar   cti   div   代码   

原文地址:http://www.cnblogs.com/duzuoyan/p/3918073.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!