javascript事件的传播基础实例讲解(35)

本文实例为大家分享了js事件的传播，供大家参考，具体内容如下

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #box1{
    width: 300px;
    height: 300px;
    background-color: deepskyblue;
   } 

   #box2{
    width: 200px;
    height: 200px;
    background-color: cadetblue;
   } 

   #box3{
    width: 100px;
    height: 100px;
    background-color: chocolate;
   } 

  </style> 

  <script type="text/javascript"> 

   function bind(obj , eventStr , callback){ 

    if(obj.addEventListener){
     //如果是正常浏览器
     obj.addEventListener(eventStr , callback , false);
    }else{
     //IE8
     obj.attachEvent("on"+eventStr , function(){
      callback.call(obj);
     });
    }
   } 

   window.onload = function(){ 

    /*
     * 事件的传播
     * - 关于事件的传播微软和网景公司有着不同的理解
     * - 微软公司，认为事件应该是从后代元素向祖先元素传播，即从里向外传播，也就是我们所谓事件的冒泡
     * - 网景公司，认为事件应该是从祖先元素向后代元素传播，即从外向里传播，这一阶段我们称为事件的捕获
     * - W3C综合了两个公司的方案,将事件的传播分成了三个阶段
     *  1.捕获阶段
     *   - 事件从最外层的元素（document），向目标元素进行事件的捕获
     *   - 此阶段默认不会触发事件
     *  2.目标阶段
     *   - 目标指的是触发事件的元素，捕获到目标元素则捕获阶段停止
     *  3.冒泡阶段
     *   - 事件从目标元素向祖先元素中冒泡，此时开始触发事件
     *   - 默认事件都是在冒泡阶段执行的
     *
     * - 事件都是默认在冒泡阶段执行的，一般不需要在捕获阶段触发事件，
     *  如果希望在捕获阶段执行事件，则需要将addEventListener()的第三个参数修改为true
     *
     * - IE8及以下的浏览器没有捕获阶段，也不能设置在捕获阶段触发事件
     */ 

    //分别为三个div绑定单击响应函数
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3"); 

    bind(box1,"click",function(){
     alert(1);
    }) 

    bind(box2,"click",function(){
     alert(2);
    }) 

    bind(box3,"click",function(){
     alert(3);
    }) 

   }; 

  </script>
 </head>
 <body> 

  <div id="box1">
   <div id="box2">
    <div id="box3"></div>
   </div>
  </div> 

 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现事件的中断传播和行为阻止方法示例

    事件传播 MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素.这种自底向上的事件传播方式称为"事件冒泡",也就是事件传播. 如何中断事件的传播? stopPropagation() w3c取消冒泡 cancleBubble = true IE取消冒泡 取消事件默认效果: returnValue = false IE 取消事件效果 defaultPrevent() w3c取消事件效

  • 阻止事件(取消浏览器对事件的默认行为并阻止其传播)

    取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播. 实现代码 复制代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } }

  • JavaScript中使用stopPropagation函数停止事件传播例子

    JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播.如以下例子: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button&

  • Javascript Event（事件）的传播与冒泡

    Javascript Event（事件）的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome.safari.opera.firefox都支持cancelBubble属性. Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能

  • javascript事件的传播基础实例讲解(35)

    本文实例为大家分享了js事件的传播,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: deepskyblue; } #box2{ width: 200px; h

  • javascript事件的绑定基础实例讲解（34）

    本文实例为大家分享了js事件绑定的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var btn01 = document.getElementById("btn01&quo

  • js 事件的传播机制(实例讲解)

    js 事件的传播机制(实例讲解)

    事件的默认传播机制: 捕获阶段:从外向里依次查找元素 目标阶段:从当前事件源本身的操作 冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段) 具体见下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #outer{ margin

  • javascript 玩转Date对象(实例讲解)

    前言:最近在做一个日期选择功能,在日期转换的时候经常换到晕,总结一下常用的Date对象的相关用法,方便日后直接查看使用- 1. new Date()的使用方法有: 不接收任何参数:返回当前时间: 接收一个参数x: 返回1970年1月1日 + x毫秒的值. new Date(1, 1, 1)返回1901年2月1号. new Date(2016, 1, 1)不会在1900年的基础上加2016,而只是表示2016年2月1号. 2. 使用new Date(time) 将时间转换成 Date 对象 注意:

  • JavaScript事件冒泡机制原理实例解析

    这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head>

  • JavaScript之创意时钟项目(实例讲解)

    JavaScript之创意时钟项目(实例讲解)

    "时钟展示项目"说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知识点汇总: jQuery.原生javascript.css3.h5 四.重难点解释 1.各个指针的旋转角度的获取 首先要明确如下概念: 时钟指针旋转一周360度 时针: 表盘上共有12小时,每经过一小时,要旋转30度: 分针: 表盘上共有60个小格子,分针每走一分钟,经过一个小格子,转动6

  • 关于javascript事件响应的基础语法总结(必看篇)

    1.onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用 //例子 <html> <head> <script type="text/javascript"> function add2(){ var numa,numb,sum; numa=6; numb=8; sum=numa+numb; document.write("两数和为:"+sum); }

  • JavaScript实现简单的双色球(实例讲解)

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双色球</title> <link rel="stylesheet" type="text/css" href="css/twoToneClass.css" rel="e

  • Java绘图技术基础(实例讲解)

    Java绘图技术基础(实例讲解)

    如下所示: public class Demo1 extends JFrame{ MyPanel mp=null; public static void main(String[] args){ Demo1 demo=new Demo1(); } public Demo1(){ mp=new MyPanel(); this.add(mp); this.setSize(400,300); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); th

  • 对vue事件的延迟执行实例讲解

    vue事件的延迟执行: <div id="box"> <input type="text" @keyup="show | debounce 2000"> </div> <script> var vm=new Vue({ data:{ }, methods:{ show:function(){ alert(1); } } }).$mount('#box'); </script> 以上这篇对

随机推荐