河南建设网站官网,农业科技公司网站案例,淘宝小程序开发文档,wordpress使用一个数据库当项目中#xff0c;需要获取某个页面上、某个标签上、有指定自定义属性时#xff0c;需要在点击该元素时进行公共逻辑处理#xff0c;或该元素在显示的时候进行逻辑处理#xff0c;这时可以定义一个公共的方法#xff0c;在每个页面引用#xff0c;并写入数据即可
需要获取某个页面上、某个标签上、有指定自定义属性时需要在点击该元素时进行公共逻辑处理或该元素在显示的时候进行逻辑处理这时可以定义一个公共的方法在每个页面引用并写入数据即可
通过IntersectionObserver 监听页面元素是否显示MutationObserver监听DOM元素等实现
效果图 找到页面中 标签 含有 自定义属性 sen-tracetracesen_bi 获取到 senEventId 和 senJson里面的数据点击的时候进行逻辑处理
找到标签中 含有 自定义属性 senShowtrace_exposure 获取到senJson里面的数据在该元素显示的时候进行逻辑处理
div classboxdiv sen-tracetracesen_bi senEventIdtest1 senShowtrace_exposure senExposureIdtest4 senJson{modle:内容1,id:1} classitem内容1/divdiv sen-tracetracesen_bi senEventIdtest2 senShowtrace_exposure senExposureIdtest5 senJson{modle:内容2,id:3} classitem内容2/divdiv sen-tracetracesen_bi senEventIdtest3 senShowtrace_exposure senExposureIdtest6 senJson{modle:内容3,id:3} classitem内容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([senShowtrace_exposure]);});// 如果有需要观察的元素则调用observeElements函数进行观察if (elementsToObserve.length 0) {observeElements(elementsToObserve);}}}
});// 监听document中子节点的变化因为有节点是通过ajax动态插入的所以需要监听节点变化
mutationObserver.observe(document, { childList: true, subtree: true });// 页面加载完成后开始观察初始存在的目标元素
window.addEventListener(load, () {const initialElements document.querySelectorAll([senShowtrace_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-tracetracesen_bi], function() {// 获取senEventId和senJson的值var eventId $(this).attr(senEventId);var jsonValue $(this).attr(senJson);// 日志记录或其他逻辑处理console.log(jauery点击,eventId,jsonValue)
});
