如何使用原生的 JavaScript 代碼，觸發 SAP UI5 按鈕控件的點擊事件處理函數

時間 2021-05-03

標籤 html json bootstrap app 框架 dom async ide 函數學習欄目 JavaScript 简体版

原文原文鏈接

個人技術交流羣裏，有朋友提問：html

我有個 UI5 按鈕，想用原生 js 去觸發 click 事件。在 dom 上檢測到 click 已經觸發了，可是按按鈕的動做響應沒有發生。請問如何解決，謝謝。

解決這個問題的理論依據：深刻學習SAP UI5框架代碼系列之三：HTML原生事件 VS UI5 Semantic事件json

我寫了一個簡單的 SAP UI5 應用，index.html 的完整代碼貼在本文末尾。bootstrap

第一個按鈕的點擊事件處理函數，邏輯爲在其顯示文本的末尾添加1，好比觸發一次後，button text 顯示爲 Button 11，依次類推。app

方法1：使用 SAP UI5 API 觸發第一個 button 的點擊事件處理函數

見第 33 行代碼。拿到第一個 button 實例後，直接調用 SAP UI5 API firePress，觸發第一個按鈕的事件點擊處理函數。框架

方法2：使用 JavaScript 原生 API 觸發第一個 button 的點擊事件處理函數

見第 33 行代碼。拿到第一個 button 實例後，直接調用 SAP UI5 API firePress，觸發第一個按鈕的事件點擊處理函數。dom

見下圖第 45～46 行：async

兩種方式均能按照指望觸發第一個按鈕的點擊事件處理函數，效果以下視頻所示：ide

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的原創文章，盡在："汪子熙":

相關標籤/搜索