當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
如何使用原生的 JavaScript 代码，触发 SAP UI5 按钮控件的点击事件处理函数
生活随笔
收集整理的這篇文章主要介紹了
如何使用原生的 JavaScript 代码，触发 SAP UI5 按钮控件的点击事件处理函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我的技術交流群里，有朋友提問：
我有個 UI5 按鈕，想用原生 js 去觸發 click 事件。在 dom 上檢測到 click 已經觸發了，但是按按鈕的動作響應沒有發生。請問如何解決，謝謝。
解決這個問題的理論依據：深入學習SAP UI5框架代碼系列之三：HTML原生事件 VS UI5 Semantic事件
我寫了一個簡單的 SAP UI5 應用，index.html 的完整代碼貼在本文末尾。
第一個按鈕的點擊事件處理函數，邏輯為在其顯示文本的末尾添加1，比如觸發一次后，button text 顯示為 Button 11，依次類推。
方法1：使用 SAP UI5 API 觸發第一個 button 的點擊事件處理函數
見第 33 行代碼。拿到 第一個 button 實例后，直接調用 SAP UI5 API firePress，觸發第一個按鈕的事件點擊處理函數。
方法2：使用 JavaScript 原生 API 觸發第一個 button 的點擊事件處理函數
見第 33 行代碼。拿到 第一個 button 實例后，直接調用 SAP UI5 API firePress，觸發第一個按鈕的事件點擊處理函數。
見下圖第 45～46 行：
兩種方式均能按照期望觸發第一個按鈕的點擊事件處理函數，效果如下視頻所示：
https://www.zhihu.com/zvideo/1370102151998468096
本應用的完整代碼如下：可以使用 Jerry 文章 一個用于SAP UI5學習的腳手架應用，沒有任何后臺API的依賴 提到的 腳手架應用運行。
<!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8"><title>SAPUI5 Sandbox</title><scriptid="sap-ui-bootstrap"src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"data-sap-ui-theme="sap_belize"data-sap-ui-libs="sap.ui.commons"data-sap-ui-compatVersion="edge"data-sap-ui-preload="async"></script><script>sap.ui.getCore().attachInit(function () {var oButton1 = new sap.ui.commons.Button({text : "Button 1",tooltip : "This is a test tooltip",press : function() {var origin = oButton1.getText();oButton1.setText(origin + '1');}});var oButton2 = new sap.ui.commons.Button({text : "用 SAP UI5 API 觸發第一個按鈕的點擊處理函數",tooltip : "This is a test tooltip",press : function() {var origin = oButton2.getText();oButton2.setText(origin + '2');oButton1.firePress();debugger;}});var oButton3 = new sap.ui.commons.Button({text : "用 js 原生 API 觸發第一個按鈕的點擊處理函數",tooltip : "This is a test tooltip",press : function() {var origin = oButton2.getText();oButton3.setText(origin + '3');var a = document.getElementById("__button0");a.click();}});var oVerticalLayout = new sap.ui.layout.VerticalLayout();oVerticalLayout.addContent(oButton1);oVerticalLayout.addContent(oButton2);oVerticalLayout.addContent(oButton3);/*var oModel = new sap.ui.model.json.JSONModel();var myData = {"field_for_text": "Jerry"};oModel.setData(myData);oButton1.setModel(oModel);oButton1.bindProperty("text", "/field_for_text", undefined, "OneTime");myData["field_for_text"] = "Tom";oModel.checkUpdate();oButton1.attachEvent("_change", function(oEvent) {var oChangeDetail = oEvent.getParameters();debugger;});*/oVerticalLayout.placeAt("content");});</script> </head> <body class="sapUiBody" role="application"><div id="content"></div> </body> </html>更多Jerry的原創文章，盡在：“汪子熙”:
總結
以上是生活随笔為你收集整理的如何使用原生的 JavaScript 代码，触发 SAP UI5 按钮控件的点击事件处理函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 抖音火山版浏览记录怎么删除
- 下一篇： 66元的的钟薛高在东北只要3.8元一根！