zoukankan      html  css  js  c++  java
  • 事件冒泡与捕获&事件托付

    设想这样一种情况   

    一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span?

    准确的说两个都触发了,这种认可大家都允许,事实就是这种,

    第二个问题来了,这个事件应该有个先后顺序 ,先触发span还是div?

    早期就有两个主流的浏览器厂商各执己见,IE觉得,这个事件首先触发span,然后依次往父节点传递,终于传递到document,(这个过程称为冒泡)

    网景浏览器觉得,不论什么事件都首先触发document,然后依次往下传递到span元素,(这个过程称为捕获)

    按正常人的思维更加倾向与冒泡这样的方式,笔者也是这么认为的,

    后来的w3c标准认为两种方式各有长处,于是综合了两种方式,因此两种都是标准,

    就眼下来看,IE用户有下降的趋势,标准的w3c浏览器用户在不断添加,可是IE用户毕竟不少,

    所以大部分站点开发者都不会用捕获,由于IE不支持捕获,而其它w3c标准浏览器既支持捕获又支持冒泡,

    所以非常多人仅仅知道冒泡不知道捕获,就大部分事件处理逻辑来看,冒泡基本已经可以完毕,可是捕获有自己的优势,某些相对复杂的事件处理採用冒泡结合捕获会更佳,


    以上是个人对事件冒泡以及捕获的理解,以下利用冒泡来看一下事件托付实现原理(採用捕获相同能够实现,道理一样)

    依据事件冒泡机制,不论什么事件都会冒泡到document,事件托付就是把全部事件处理函数绑定到document,依据事件參数推断事件源对象,

    推断不同的对象给予不同的处理函数,


    举个样例:(jquery方式)

    $(document).on("click",function(e){
    	var  _this = e.target;     //获取事件源对象
    	var  id = $(_this).attr('id');   //获取对象的id
    	switch(id)
    	{
    		case   "btnid"  :  function(){ 
    			//do some thing
    		} ;  break;
    		case   "divid"  :   function(){ 
    			//do some thing
    		}; break;
    		default : function(){ 
    			//do some thing  
    		};
    	}
    });



  • 相关阅读:
    yii2自带的backend,frontend不够用,添加一个后台模块怎么做?
    用yii2给app写接口(上)
    .htaccees什么鬼?怎么用?
    Nginx的伪静态是什么
    论中国为什么造不出cpu和操作系统
    Linux上查看用户名和组并把特定用户放到特定的组之下
    CentOS7上LNMP安装包一步搭建LNMP环境
    杭州考驾照-2017.4
    深入理解Nginx
    CentOS7上安装并配置Nginx、PHP、MySql
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/3756764.html
Copyright © 2011-2022 走看看