监听项目中指定属性数据,点击或模块显示时

2024-01-29 07:28

本文主要是介绍监听项目中指定属性数据,点击或模块显示时,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

当项目中,需要获取某个页面上、某个标签上、有指定自定义属性时,需要在点击该元素时进行公共逻辑处理,或该元素在显示的时候进行逻辑处理,这时可以定义一个公共的方法,在每个页面引用,并写入数据即可

(通过IntersectionObserver 监听页面元素是否显示,MutationObserver监听DOM元素等实现)

效果图

找到页面中 标签 含有 自定义属性 sen-trace="tracesen_bi"    获取到 senEventId 和 senJson里面的数据,点击的时候进行逻辑处理;

找到标签中 含有 自定义属性 senShow="trace_exposure"  获取到senJson里面的数据,在该元素显示的时候进行逻辑处理;

<div class="box"><div  sen-trace="tracesen_bi" senEventId="test1" senShow="trace_exposure" senExposureId="test4" senJson='{"modle":"内容1","id":1}' class="item">内容1</div><div  sen-trace="tracesen_bi"  senEventId="test2" senShow="trace_exposure" senExposureId="test5" senJson='{"modle":"内容2","id":3}' class="item">内容2</div><div  sen-trace="tracesen_bi" senEventId="test3" senShow="trace_exposure" senExposureId="test6" senJson='{"modle":"内容3","id":3}' class="item">内容3</div>
</div>

元素可见时操作

//监听元素曝光
function observeElements(elements) {const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {const element = entry.target;const senExposureId = element.getAttribute('senExposureId');const senJson = JSON.parse(element.getAttribute('senJson'));// 在这里执行你希望执行的操作等console.log(`senExposureId: ${senExposureId}`);console.log(`senJson:`, senJson);// 一旦元素曝光后,可以停止观察该元素以提高性能observer.unobserve(element);}});});elements.forEach((element) => {observer.observe(element);});
}// 创建MutationObserver实例
const mutationObserver = new MutationObserver((mutationsList, observer) => {for(let mutation of mutationsList) {if (mutation.type === 'childList') {// 获取新增的节点const addedNodes = mutation.addedNodes;// 检查新增节点中是否有需要观察的元素const elementsToObserve = Array.from(addedNodes).filter((node) => {return node.nodeType === Node.ELEMENT_NODE && node.matches('[senShow="trace_exposure"]');});// 如果有需要观察的元素,则调用observeElements函数进行观察if (elementsToObserve.length > 0) {observeElements(elementsToObserve);}}}
});// 监听document中子节点的变化,因为有节点是通过ajax动态插入的所以需要监听节点变化
mutationObserver.observe(document, { childList: true, subtree: true });// 页面加载完成后,开始观察初始存在的目标元素
window.addEventListener('load', () => {const initialElements = document.querySelectorAll('[senShow="trace_exposure"]');observeElements(initialElements);
});

点击操作

document.addEventListener('click', function(event) {var target = event.target;// 检查是否带有指定属性的元素被点击if (target.hasAttribute('sen-trace') && target.getAttribute('sen-trace') === 'tracesen_bi') {// 获取senEventId和senJson的值var eventId = target.getAttribute('senEventId');var jsonValue = target.getAttribute('senJson');// 进行日志记录或其他逻辑处理console.log('js点击',eventId,jsonValue)}
});

也可以用jquery方式

$(document).on('click', '[sen-trace="tracesen_bi"]', function() {// 获取senEventId和senJson的值var eventId = $(this).attr('senEventId');var jsonValue = $(this).attr('senJson');// 日志记录或其他逻辑处理console.log('jauery点击',eventId,jsonValue)
});

这篇关于监听项目中指定属性数据,点击或模块显示时的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/656170

相关文章

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

SpringSecurity显示用户账号已被锁定的原因及解决方案

《SpringSecurity显示用户账号已被锁定的原因及解决方案》SpringSecurity中用户账号被锁定问题源于UserDetails接口方法返回值错误,解决方案是修正isAccountNon... 目录SpringSecurity显示用户账号已被锁定的解决方案1.问题出现前的工作2.问题出现原因各

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再