[前端] 代码中执行绑定元素的指定事件trigger方法
2023-02-18 15:41:48 时间
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完全实现一遍功能的情况下 , 就需要模拟进行多个点击事件来执行点击后的效果
执行先点击1 ,再给inout赋值 ,再点击2
基本思路是类似jquery的trigger方法 , 原生js也是可以实现 , 代码如下
<button id="btn-1">按钮1</button> <button id="btn-2">按钮2</button> <script> // 假如想通过点击 Button-1 触发 Button-2 的某个事件 let btn_1 = document.getElementById('btn-1'); let btn_2 = document.getElementById('btn-2'); btn_1.onclick = function () { alert("按钮1"); var myEvent = new Event('click'); btn_2.dispatchEvent(myEvent); } btn_2.onclick = function () { alert('OK按钮2'); // do something } </script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <button id="btn-3">按钮3</button> <button id="btn-4">按钮4</button> <script> //jquery的trigger方法 $( "#btn-3" ).click(function() { alert("按钮3"); $( "#btn-4" ).trigger( "click" ); }); $( "#btn-4" ).click(function() { alert("按钮4"); }); </script>
相关文章
- 使用IndexedDB缓存给WebGL三维程序加速
- 三维引擎导入obj模型不可见总结
- 三维引擎导入obj模型全黑总结
- 使用SVG做模型贴图的思路
- 光伏逆变器建筑设计工具
- 智能制造芯片车间生产线可视化
- EasyBPM进销存之物料管理
- 水厂流程三维场景可视化解决方案
- EasyBPM打印模板的缓存问题
- canvas绘制折线路径动画
- canvas绘制虚线图表
- canvas绘制图像轮廓效果
- 三维场景中常用的路径动画
- 三维组态部件动画解决方案
- canvas多重阴影发光效果
- 智慧园区可视化设计思路
- webgl智慧楼宇发光系列之线性采样下高斯模糊
- canvas可视化效果之内阴影效果
- 事件代理功能点分享
- 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果