尝试利用捕获来做上报

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

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

  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 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python框架:Django写图书管理系统(LMS)

今天我会带大家真正写一个Django项目,对于入门来说是有点难度的,因为逻辑比较复杂,但是真正的知识就是函数与面向对象,这也是培养用Django思维写项目的开始

861
来自专栏软件测试经验与教训

LR录制时不能启动IE浏览器的解决方法

在使用loadrunner录制脚本的时候,经常会出现不能自动启动IE的情况,或者可以启动,但是录制不到内容,事务数一直为0,action的内容为空。

732
来自专栏LIN_ZONE

mac 初次配置apache,及mac下安装mysql

先打开apache,在浏览器上输入    localhost     回车后会如果屏幕上显示:It works!  如下图:

753
来自专栏有趣的django

23.Django基础

Django基本配置 Python的WEB框架有Django、Tornado、Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成...

3445
来自专栏拭心的安卓进阶之路

Android Studio 的 Android Monitor / DDMS 中不显示应用的进程(看不到 log)

问题 不知道怎么 app 对应的进程在 Android Monitor / DDMS 中都看不到了,想调试或者看个日志都不行。 分析 一般我们在输出日志时都会根...

3528
来自专栏竹清助手

Laravel 5 系列入门教程(一)【最适合中国人的 Laravel 教程】

2. http://www.golaravel.com/laravel/docs/5.0/

1392
来自专栏Python研发

LInux50个基本命令

cd:(切换) vim:(创建文件)   vi:编辑文件 bc:(计算器)quit:退出计算器 mkdir:(创建目录)   mkdir -p:递归建立目录 r...

663
来自专栏淡定的博客

Webpack基本使用

692
来自专栏云计算教程系列

使用GNU Screen管理持久终端会话

GNU Screen是一种与终端会话配合使用的工具,允许用户在断开连接后恢复会话。Screen可防止会话“超时”或断开SSH连接或本地终端仿真器。单个Scree...

982
来自专栏前端儿

Webpack打包构建太慢了?试试几个方法

webpack支持监听模式,此时需要重新编译时就可以进行增量构建,增量构建是很快的,基本不到一秒或几秒之内就能重新编译好

2112

扫码关注云+社区