如何使用原生的 JavaScript 程式碼，觸發 SAP UI5 按鈕控制元件的點選事件處理函式

注销發表於2021-05-03
JavaScriptUI控制元件事件函式

我的技術交流群裡，有朋友提問：

我有個 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/...

本應用的完整程式碼如下：可以使用 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>
    <script
        id="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的原創文章，盡在："汪子熙":

相關文章