百度有啊前端框架分析(浏览器内置事件)

简介:

  

事件是JavaScript中非常重要的一个内容,在百度有啊的前端框架中主要对事件分成了浏览器内置事件和自定义事件两部分。

BBEvent下主要对浏览器内置事件进行了标准化。
target :事件目标对象
BBEvent.target = function(A) {
    A = A || window.event;
    return A.target || A.srcElement;
};
isLeftClick :判断是否为鼠标左键点击
BBEvent.isLeftClick = function(A) {
    A = A || window.event;
    return (((A.which) && (A.which == 1)) || ((A.button) && (A.button == 1)));
};
pageX :鼠标相对于整个页面的X轴的坐标
BBEvent.pageX = function(A) {
    A = A || window.event;
    return A.pageX || (A.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
};
pageY :鼠标相对于整个页面的y轴的坐标
BBEvent.pageY = function(A) {
    A = A || window.event;
    return A.pageY || (A.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
};
pagePosition :鼠标相对整个页面的坐标
BBEvent.pagePosition = function(A) {
    A = A || window.event;
    return {
        x: BBEvent.pageX(A),
        y: BBEvent.pageY(A)
    };
};
layerX 鼠标相对于当前元素的X坐标(当前元素要position:absolute,否则会跟pageX相同)
BBEvent.layerX = function(A) {
    A = A || window.event;
    return A.layerX || A.offsetX;
};
layerY鼠标相对于当前元素的Y坐标(当前元素要position:absolute)
BBEvent.layerY = function(A) {
    A = A || window.event;
    return A.layerY || A.offsetY;
};
layerPosition 鼠标相对于当前元素的坐标(当前元素要position:absolute)
BBEvent.layerPosition = function(A) {
    A = A || window.event;
    return {
        x: BBEvent.layerX(A),
        y: BBEvent.layerY(A)
    };
};
preventDefault 阻止浏览器默认动作的发生
BBEvent.preventDefault = function(A) {
    A = A || window.event;
    if (A.preventDefault) {
        A.preventDefault();
    } else {
        A.returnValue = false;
    }
};
stopPropagation 阻止事件冒泡
BBEvent.stopPropagation = function(A) {
    A = A || window.event;
    if (A.stopPropagation) {
        A.stopPropagation();
    } else {
        A.cancelBubble = true;
    }
};
observe 添加事件监听器
stopObserving 删除事件监听器
fireEvent 触发事件
CustEvent是对自定义事件服务的。
observe 
stopObserving 
fireEvent 
目录
相关文章
|
14天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
3月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
39 0
|
3月前
|
Web App开发 监控 前端开发
前端必备浏览器调试工具
【8月更文挑战第19天】前端必备浏览器调试工具
55 0
|
18小时前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
15 9
|
3天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
13 1
|
6天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
6天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
13天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
32 0
|
18天前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
174 0
|
24天前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
230 0