尝试利用捕获来做上报

标准浏览器的事件模型是先捕获再冒泡,由于考虑到兼容问题,事件绑定一般都是基于冒泡来做的,那么什么情况下可以考虑利用捕获来做事件绑定呢?

最近在做的课程查找页上报需求的时候,有两个问题要解决:

  1. 清理之前做的上报
  2. 重新添加新的上报

如果在原来的基础上直接改当然可以,但是将上报和业务代码耦合显然不是理想的解决方案,由于内嵌的webview是chromium, 不用考虑兼容问题,于是尝试利用捕获来处理。

  1. 大多数的上报都是点击上报
  2. 捕获先于冒泡,不用考虑 stopPropagation 的影响

所以可以在最外层,基于捕获来绑定事件:

var getReportKey = function($ele, max) {
    // 这里需要设置一个 max 值, 避免死循环
    max = parseInt(max, 10) || 5;
    var key = [];
    var id = '';
    do {
        id = $ele.attr('id');
        if (id) {
            key.push('#' + id);
        } else {
            key.push($ele.prop("tagName").toLowerCase());
            $ele = $ele.parent();
        }
    } while (!id && --max);
    return key.reverse().join(' ');
};

$('#container')[0].addEventListener('click', function(event) {
    // 获得鼠标点击的元素
    var $target = $(event.target);
    // 根据该元素获取上报的 key
    var reportKey = getReportKey($target);
    var data = null;
    switch (reportKey) {
        case '#container h3 a':
            data = {
                action: 'title_clk'
            };
            break;
        // and so on
        default:
            break;
    }
    data && todoReport(data);
}, true);

以上,所有要上报的点都可以在 switch 里完成,同时可以避免和业务逻辑的耦合。

此外,对于页面资源的加载监控等也可以使用捕获来做。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jojo的技术小屋

原 二、在HTML中使用JavaScrip

作者:汪娇娇 时间:2017年11月4日 一、<script>标签 1、标签的位置 </body>之前 2、延迟脚本 defer 3、异步脚本 async 4、...

2476
来自专栏柠檬先生

html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素.     注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元...

20910
来自专栏葡萄城控件技术团队

带你走近AngularJS - 创建自定义指令

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创...

19310
来自专栏小小挖掘机

哇,原来python字符串是这样的!

python中的字符串一直是困扰小编的一大难题,相信大家伙也曾体验过被各种编码支配的恐惧吧。不过没关系,相信你读了这篇文章,一定会对python字符串豁然开朗!...

3615
来自专栏lgp20151222

JQuery跳出each循环的方法(包含数组遍历)

break----用return false;  continue --用return ture;

803
来自专栏desperate633

我的javascript学习之路_01之js基础1JavaScript的简介JavaScript的使用JavaScript输出javascript语句JavaScript注释JavaScript变量J

近期开始接触学习extjs框架。该框架是基于JavaScript的。为了更好地理解学习extjs,必然需要先对JavaScript有一个较好的理解。

602
来自专栏繁花云

巧用js替换某些不能替换的文字

在运行某些程序时,作者为了保护版权,将版权文字进行了特殊处理,使得我们无法进行修改。

680
来自专栏cs

xml基本知识点

xml, Extensible Markup Language,可扩展的标记语言。 ? xml文档结构.jpg xml文档的规则 1.0 xml文档必须以一个...

3265
来自专栏重庆的技术分享区

项目常用的less语法详解

1335
来自专栏飞扬的花生

JS图片预加载插件

      在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验。  1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟...

1985

扫码关注云+社区