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

简介:

  

事件是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 
目录
相关文章
|
19天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
129 9
|
17天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
24 1
|
18天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
16 1
|
25天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
96 0
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
235 0
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
107 1
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
70 0
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
|
3月前
|
Web App开发 编解码 监控
【Azure 媒体服务】Azure Media Player 在Edge浏览器中不能播放视频问题的分析与解决
【Azure 媒体服务】Azure Media Player 在Edge浏览器中不能播放视频问题的分析与解决