diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavDestination.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavDestination.ts
index 5850b31018e9785458e7c135d53afbc81ccfa813..6d5f5156ef22189155b20a58c694f301f7115c7e 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavDestination.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavDestination.ts
@@ -559,4 +559,37 @@ globalThis.NavDestination.attributeModifier = function (modifier: ArkComponent):
   }, (nativePtr: KNode, classType: ModifierType, modifierJS: ModifierJS) => {
     return new modifierJS.NavDestinationModifier(nativePtr, classType);
   });
+  globalThis.NavDestination.onShown = function (value: () => void): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnShown(nodePtr, value);
+  }
+  globalThis.NavDestination.onHidden = function (value: () => void): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnHidden(nodePtr, value);
+  }
+  globalThis.NavDestination.onBackPressed = function (value: () => boolean): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnBackPressed(nodePtr, value);
+  }
+  globalThis.NavDestination.onReady = function (value: Callback<NavDestinationContext>): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnReady(nodePtr, value);
+  }
+  globalThis.NavDestination.onWillAppear = function (value: Callback<void>): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillAppear(nodePtr, value);
+  }
+  globalThis.NavDestination.onWillDisappear = function (value: Callback<void>): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillDisappear(nodePtr, value);
+  }
+  globalThis.NavDestination.onWillShow = function (value: Callback<void>): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillShow(nodePtr, value);
+  }
+  globalThis.NavDestination.onWillHide = function (value: Callback<void>): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillHide(nodePtr, value);
+  }
+
 };
diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavigation.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavigation.ts
index 6c401803038604948674ec50b974dfdd6dcda76b..9a991570a6bf63cbf10d26154714ca7bd523a5e5 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavigation.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkNavigation.ts
@@ -685,4 +685,30 @@ globalThis.Navigation.attributeModifier = function (modifier: ArkComponent): voi
   }, (nativePtr: KNode, classType: ModifierType, modifierJS: ModifierJS) => {
     return new modifierJS.NavigationModifier(nativePtr, classType);
   });
+  globalThis.Navigation.onTitleModeChange = function (value: (titleMode: NavigationTitleMode) => void): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setOnTitleModeChange(nodePtr, value);
+  }
+  globalThis.Navigation.onNavigationModeChange = function (value: (mode: NavigationMode) => void): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setOnNavigationModeChange(nodePtr, value);
+  }
+  globalThis.Navigation.onNavBarStateChange = function (value: (isVisible: boolean) => void): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setOnNavBarStateChange(nodePtr, value);
+  }
+  globalThis.Navigation.customNavContentTransition = function (value: (from: NavContentInfo, to: NavContentInfo,
+    operation: NavigationOperation) => NavigationAnimatedTransition | undefined): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setCustomNavContentTransition(nodePtr, value);
+  }
+  globalThis.Navigation.toolbarConfiguration = function (value: any): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setToolBarConfiguration(nodePtr, value);
+  }
+  globalThis.Navigation.toolBar = function (value: object | undefined): void {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setToolBar(nodePtr, value);
+  }
+
 };
diff --git a/frameworks/bridge/declarative_frontend/engine/arkComponent.js b/frameworks/bridge/declarative_frontend/engine/arkComponent.js
index a23e331b3e31001fddbae8eedefaa19f749550d0..802b873cd933fc52dafc1d80527c78ca31020b36 100755
--- a/frameworks/bridge/declarative_frontend/engine/arkComponent.js
+++ b/frameworks/bridge/declarative_frontend/engine/arkComponent.js
@@ -25061,6 +25061,38 @@ if (globalThis.NavDestination !== undefined) {
       return new modifierJS.NavDestinationModifier(nativePtr, classType);
     });
   };
+  globalThis.NavDestination.onShown = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnShown(nodePtr, value);
+  };
+  globalThis.NavDestination.onHidden = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnHidden(nodePtr, value);
+  };
+  globalThis.NavDestination.onBackPressed = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnBackPressed(nodePtr, value);
+  };
+  globalThis.NavDestination.onReady = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnReady(nodePtr, value);
+  };
+  globalThis.NavDestination.onWillAppear = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillAppear(nodePtr, value);
+  };
+  globalThis.NavDestination.onWillDisappear = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillDisappear(nodePtr, value);
+  };
+  globalThis.NavDestination.onWillShow = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillShow(nodePtr, value);
+  };
+  globalThis.NavDestination.onWillHide = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navDestination.setOnWillHide(nodePtr, value);
+  };
 }
 
 /// <reference path='./import.ts' />
@@ -26419,6 +26451,30 @@ if (globalThis.Navigation !== undefined) {
       return new modifierJS.NavigationModifier(nativePtr, classType);
     });
   };
+  globalThis.Navigation.onTitleModeChange = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setOnTitleModeChange(nodePtr, value);
+  };
+  globalThis.Navigation.onNavigationModeChange = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setOnNavigationModeChange(nodePtr, value);
+  };
+  globalThis.Navigation.onNavBarStateChange = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setOnNavBarStateChange(nodePtr, value);
+  };
+  globalThis.Navigation.customNavContentTransition = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setCustomNavContentTransition(nodePtr,value);
+  };
+  globalThis.Navigation.toolbarConfiguration = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setToolBarConfiguration(nodePtr, value);
+  };
+  globalThis.Navigation.toolBar = function (value) {
+    let nodePtr = getUINativeModule().frameNode.getStackTopNode();
+    getUINativeModule().navigation.setToolBar(nodePtr, value);
+  };
 }
 
 /// <reference path='./import.ts' />
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_nav_destination_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_nav_destination_bridge.cpp
index c89ad8f6a7f69112fb81e35a247fe157e2391044..4f1e2ec6dabd47c4ec31b1b56ce178c5af49cd3b 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_nav_destination_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_nav_destination_bridge.cpp
@@ -146,8 +146,8 @@ ArkUINativeModuleValue NavDestinationBridge::SetToolBarConfiguration(ArkUIRuntim
             auto builderFuncParam = builderObj->GetProperty("builder");
             if (builderFuncParam->IsFunction()) {
                 ViewStackModel::GetInstance()->NewScope();
-                JsFunction jsBuilderFunc(builderFuncParam);
-                jsBuilderFunc.Execute();
+                auto jsFunc = JSRef<JSFunc>::Cast(builderFuncParam);
+                jsFunc->Call(info.This());
                 auto customNode = ViewStackModel::GetInstance()->Finish();
                 NavDestinationModel::GetInstance()->SetCustomToolBar(customNode);
             }
@@ -938,18 +938,18 @@ ArkUINativeModuleValue NavDestinationBridge::SetOnReady(ArkUIRuntimeCallInfo* ru
         nodeModifiers->getNavDestinationModifier()->resetNavDestinationOnReady(nativeNode);
         return panda::JSValueRef::Undefined(vm);
     }
-    auto onReadyCallback = AceType::MakeRefPtr<JsFunction>(JSRef<JSObject>(), JSRef<JSFunc>::Cast(callbackArg[NUM_1]));
-    auto onReady = [execCtx = callbackArg.GetExecutionContext(), func = std::move(onReadyCallback)](
-                       RefPtr<NG::NavDestinationContext> context) {
-        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+    auto jsFunc = JSRef<JSFunc>::Cast(callbackArg[NUM_1]);
+    auto func = jsFunc->GetLocalHandle();
+    auto onReady = [vm, func = panda::CopyableGlobal(vm, func)](RefPtr<NG::NavDestinationContext> context) {
+        panda::LocalScope pandaScope(vm);
+        panda::TryCatch trycatch(vm);
         auto jsContext = JSClass<JSNavDestinationContext>::NewInstance();
         auto jsNavDestinationContext = Referenced::Claim(jsContext->Unwrap<JSNavDestinationContext>());
         CHECK_NULL_VOID(jsNavDestinationContext);
         jsNavDestinationContext->SetNavDestinationContext(context);
         ACE_SCORING_EVENT("NavDestination.onReady");
-        JSRef<JSVal> params[NUM_1];
-        params[NUM_0] = jsContext;
-        func->ExecuteJS(NUM_1, params);
+        panda::Local<panda::JSValueRef> params[NUM_1] = { jsContext->GetLocalHandle() };
+        func->Call(vm, func.ToLocal(), params, NUM_1);
     };
     auto* frameNode = reinterpret_cast<FrameNode*>(nativeNode);
     NavDestinationModelNG::SetOnReady(frameNode, std::move(onReady));
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_navigation_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_navigation_bridge.cpp
index daeb68fe80e27a3215cd85f9cc74d1d90512cb3a..668e58ae38fd02dbaeece4c839b9feceb3ce0726 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_navigation_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_navigation_bridge.cpp
@@ -307,23 +307,24 @@ void ParseToolBarItems(const JsiCallbackInfo& info, std::list<RefPtr<AceType>>&
         toolBarItem->icon = icon;
         auto itemActionValue = itemObject->GetProperty("action");
         if (itemActionValue->IsFunction()) {
-            auto onClickFunc = AceType::MakeRefPtr<JsClickFunction>(JSRef<JSFunc>::Cast(itemActionValue));
+            auto vm = info.GetVm();
+            auto jsFunc = JSRef<JSFunc>::Cast(itemActionValue);
+            auto func = jsFunc->GetLocalHandle();
             auto targetNode = AceType::WeakClaim(NG::ViewStackProcessor::GetInstance()->GetMainFrameNode());
-            toolBarItem->action =
-                EventMarker([func = std::move(onClickFunc), node = targetNode, execCtx = info.GetExecutionContext()]() {
-                    JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+            toolBarItem->action = EventMarker([vm, func = panda::CopyableGlobal(vm, func), node = targetNode]() {
+                    panda::LocalScope pandaScope(vm);
+                    panda::TryCatch trycatch(vm);
                     ACE_SCORING_EVENT("Navigation.toolBarItemClick");
                     PipelineContext::SetCallBackNode(node);
-                    func->Execute();
+                    func->Call(vm, func.ToLocal(), nullptr, 0);
                 });
-            auto onClickWithParamFunc = AceType::MakeRefPtr<JsClickFunction>(JSRef<JSFunc>::Cast(itemActionValue));
             toolBarItem->actionWithParam =
-                EventMarker([func = std::move(onClickWithParamFunc), node = targetNode,
-                                execCtx = info.GetExecutionContext()](const BaseEventInfo* info) {
-                    JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+                EventMarker([vm, func = panda::CopyableGlobal(vm, func), node = targetNode]() {
+                    panda::LocalScope pandaScope(vm);
+                    panda::TryCatch trycatch(vm);
                     ACE_SCORING_EVENT("Navigation.menuItemButtonClick");
                     PipelineContext::SetCallBackNode(node);
-                    func->Execute();
+                    func->Call(vm, func.ToLocal(), nullptr, 0);
                 });
         }
         items.push_back(toolBarItem);
@@ -373,8 +374,8 @@ ArkUINativeModuleValue NavigationBridge::SetToolBarConfiguration(ArkUIRuntimeCal
         auto builderFuncParam = JSRef<JSObject>::Cast(info[1])->GetProperty("builder");
         if (builderFuncParam->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(builderFuncParam);
-            jsBuilderFunc.Execute();
+            auto jsFunc = JSRef<JSFunc>::Cast(builderFuncParam);
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavigationModel::GetInstance()->SetCustomToolBar(customNode);
         }
diff --git a/frameworks/bridge/declarative_frontend/jsview/js_navdestination.cpp b/frameworks/bridge/declarative_frontend/jsview/js_navdestination.cpp
index eecc2b5750171df83c2f81b766c638d6da99dd40..5c6a51c0f8a43492a178e407fd125e713a1737e0 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_navdestination.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_navdestination.cpp
@@ -349,9 +349,9 @@ void JSNavDestination::SetTitle(const JSCallbackInfo& info)
         JSRef<JSVal> builderObject = jsObj->GetProperty("builder");
         if (builderObject->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(info.This(), JSRef<JSFunc>::Cast(builderObject));
+            auto jsFunc = JSRef<JSFunc>::Cast(builderObject);
             ACE_SCORING_EVENT("Navdestination.title.builder");
-            jsBuilderFunc.Execute();
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavDestinationModel::GetInstance()->SetCustomTitle(customNode);
         }
@@ -527,9 +527,9 @@ void JSNavDestination::SetMenus(const JSCallbackInfo& info)
         auto builderObject = JSRef<JSObject>::Cast(info[0])->GetProperty("builder");
         if (builderObject->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(info.This(), JSRef<JSObject>::Cast(builderObject));
+            auto jsFunc = JSRef<JSFunc>::Cast(builderObject);
             ACE_SCORING_EVENT("NavDestiNation.menu.builder");
-            jsBuilderFunc.Execute();
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavDestinationModel::GetInstance()->SetCustomMenu(customNode);
             NavDestinationModel::GetInstance()->SetMenuOptions(std::move(options));
@@ -687,8 +687,8 @@ void JSNavDestination::SetToolBarConfiguration(const JSCallbackInfo& info)
         auto builderFuncParam = JSRef<JSObject>::Cast(info[0])->GetProperty("builder");
         if (builderFuncParam->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(builderFuncParam);
-            jsBuilderFunc.Execute();
+            auto jsFunc = JSRef<JSFunc>::Cast(builderFuncParam);
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavDestinationModel::GetInstance()->SetCustomToolBar(customNode);
         }
@@ -778,10 +778,6 @@ void JSNavDestination::JSBind(BindingTarget globalObj)
     JSClass<JSNavDestination>::StaticMethod("hideBackButton", &JSNavDestination::SetHideBackButton);
     JSClass<JSNavDestination>::StaticMethod("backButtonIcon", &JSNavDestination::SetBackButtonIcon);
     JSClass<JSNavDestination>::StaticMethod("backgroundColor", &JSNavDestination::SetBackgroundColor);
-    JSClass<JSNavDestination>::StaticMethod("onShown", &JSNavDestination::SetOnShown);
-    JSClass<JSNavDestination>::StaticMethod("onHidden", &JSNavDestination::SetOnHidden);
-    JSClass<JSNavDestination>::StaticMethod("onBackPressed", &JSNavDestination::SetOnBackPressed);
-    JSClass<JSNavDestination>::StaticMethod("onReady", &JSNavDestination::SetOnReady);
     JSClass<JSNavDestination>::StaticMethod("onAttach", &JSInteractableView::JsOnAttach);
     JSClass<JSNavDestination>::StaticMethod("onAppear", &JSInteractableView::JsOnAppear);
     JSClass<JSNavDestination>::StaticMethod("onDetach", &JSInteractableView::JsOnDetach);
@@ -790,10 +786,6 @@ void JSNavDestination::JSBind(BindingTarget globalObj)
     JSClass<JSNavDestination>::StaticMethod("id", &JSViewAbstract::JsId);
     JSClass<JSNavDestination>::StaticMethod("mode", &JSNavDestination::SetMode);
     JSClass<JSNavDestination>::StaticMethod("menus", &JSNavDestination::SetMenus);
-    JSClass<JSNavDestination>::StaticMethod("onWillAppear", &JSNavDestination::SetWillAppear);
-    JSClass<JSNavDestination>::StaticMethod("onWillShow", &JSNavDestination::SetWillShow);
-    JSClass<JSNavDestination>::StaticMethod("onWillHide", &JSNavDestination::SetWillHide);
-    JSClass<JSNavDestination>::StaticMethod("onWillDisappear", &JSNavDestination::SetWillDisAppear);
     JSClass<JSNavDestination>::StaticMethod("onActive", &JSNavDestination::SetOnActive);
     JSClass<JSNavDestination>::StaticMethod("onInactive", &JSNavDestination::SetOnInactive);
     JSClass<JSNavDestination>::StaticMethod("onResult", &JSNavDestination::SetResultCallback);
@@ -865,13 +857,15 @@ void JSNavDestination::SetOnActive(const JSCallbackInfo& info)
     if (!info[0]->IsFunction()) {
         return;
     }
-    auto onActive = AceType::MakeRefPtr<JsFunction>(JSRef<JSObject>(), JSRef<JSFunc>::Cast(info[0]));
-    auto onActiveCallback = [exeCtx = info.GetExecutionContext(), func = std::move(onActive)](int32_t reason) {
-        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(exeCtx);
+    auto vm = info.GetVm();
+    auto jsFunc = JSRef<JSFunc>::Cast(info[0]);
+    auto func = jsFunc->GetLocalHandle();
+    auto onActiveCallback = [vm, func = panda::CopyableGlobal(vm, func)](int32_t reason) {
         ACE_SCORING_EVENT("NavDestination.OnActive");
-        JSRef<JSVal> params[1];
-        params[0] = JSRef<JSVal>::Make(ToJSValue(reason));
-        func->ExecuteJS(1, params);
+        panda::LocalScope pandaScope(vm);
+        panda::TryCatch trycatch(vm);
+        panda::Local<panda::JSValueRef> params[1] = { panda::NumberRef::New(vm, reason) };
+        func->Call(vm, func.ToLocal(), params, 1);
     };
     NavDestinationModel::GetInstance()->SetOnActive(std::move(onActiveCallback));
     info.ReturnSelf();
@@ -885,13 +879,15 @@ void JSNavDestination::SetOnInactive(const JSCallbackInfo& info)
     if (!info[0]->IsFunction()) {
         return;
     }
-    auto onInactive = AceType::MakeRefPtr<JsFunction>(JSRef<JSObject>(), JSRef<JSFunc>::Cast(info[0]));
-    auto onInactiveCallback = [execCtx = info.GetExecutionContext(), func = std::move(onInactive)](int32_t reason) {
-        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+    auto vm = info.GetVm();
+    auto jsFunc = JSRef<JSFunc>::Cast(info[0]);
+    auto func = jsFunc->GetLocalHandle();
+    auto onInactiveCallback = [vm, func = panda::CopyableGlobal(vm, func)](int32_t reason) {
         ACE_SCORING_EVENT("NavDestination.OnInactive");
-        JSRef<JSVal> params[1];
-        params[0] = JSRef<JSVal>::Make(ToJSValue(reason));
-        func->ExecuteJS(1, params);
+        panda::LocalScope pandaScope(vm);
+        panda::TryCatch trycatch(vm);
+        panda::Local<panda::JSValueRef> params[1] = { panda::NumberRef::New(vm, reason) };
+        func->Call(vm, func.ToLocal(), params, 1);
     };
     NavDestinationModel::GetInstance()->SetOnInactive(std::move(onInactiveCallback));
     info.ReturnSelf();
diff --git a/frameworks/bridge/declarative_frontend/jsview/js_navigation.cpp b/frameworks/bridge/declarative_frontend/jsview/js_navigation.cpp
index 6ac2029105eb1c67848b55e4fecbc818765f2c78..00dfcc3a7acc579468982123d274a451505b0133 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_navigation.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_navigation.cpp
@@ -118,23 +118,24 @@ void JSNavigation::ParseToolBarItems(const JSCallbackInfo& info, std::list<RefPt
 
         auto itemActionValue = itemObject->GetProperty("action");
         if (itemActionValue->IsFunction()) {
-            auto onClickFunc = AceType::MakeRefPtr<JsClickFunction>(JSRef<JSFunc>::Cast(itemActionValue));
             auto targetNode = AceType::WeakClaim(NG::ViewStackProcessor::GetInstance()->GetMainFrameNode());
-            toolBarItem->action =
-                EventMarker([func = std::move(onClickFunc), node = targetNode, execCtx = info.GetExecutionContext()]() {
-                    JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
-                    ACE_SCORING_EVENT("Navigation.toolBarItemClick");
-                    PipelineContext::SetCallBackNode(node);
-                    func->Execute();
-                });
-            auto onClickWithParamFunc = AceType::MakeRefPtr<JsClickFunction>(JSRef<JSFunc>::Cast(itemActionValue));
+            auto vm = info.GetVm();
+            auto jsFunc = JSRef<JSFunc>::Cast(itemActionValue);
+            auto func = jsFunc->GetLocalHandle();
+            toolBarItem->action = EventMarker([vm, func = panda::CopyableGlobal(vm, func), node = targetNode]() {
+                panda::LocalScope pandaScope(vm);
+                panda::TryCatch trycatch(vm);
+                ACE_SCORING_EVENT("Navigation.toolBarItemClick");
+                PipelineContext::SetCallBackNode(node);
+                func->Call(vm, func.ToLocal(), nullptr, 0);
+            });
             toolBarItem->actionWithParam =
-                EventMarker([func = std::move(onClickWithParamFunc), node = targetNode,
-                                execCtx = info.GetExecutionContext()](const BaseEventInfo* info) {
-                    JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+                EventMarker([vm, func = panda::CopyableGlobal(vm, func), node = targetNode]() {
+                    panda::LocalScope pandaScope(vm);
+                    panda::TryCatch trycatch(vm);
                     ACE_SCORING_EVENT("Navigation.menuItemButtonClick");
                     PipelineContext::SetCallBackNode(node);
-                    func->Execute();
+                    func->Call(vm, func.ToLocal(), nullptr, 0);
                 });
         }
         items.push_back(toolBarItem);
@@ -153,11 +154,9 @@ bool JSNavigation::ParseCommonTitle(const JSRef<JSObject>& jsObj)
     bool hasMain = ParseJsString(title, mainTitle, mainResObj);
     if (hasSub || hasMain) {
         if (SystemProperties::ConfigChangePerform() && (mainResObj || subResObj)) {
-            return NavigationModel::GetInstance()->ParseCommonTitle(
-                hasSub, hasMain, subResObj, mainResObj);
+            return NavigationModel::GetInstance()->ParseCommonTitle(hasSub, hasMain, subResObj, mainResObj);
         } else {
-            return NavigationModel::GetInstance()->ParseCommonTitle(
-                hasSub, hasMain, subTitle, mainTitle);
+            return NavigationModel::GetInstance()->ParseCommonTitle(hasSub, hasMain, subTitle, mainTitle);
         }
     }
     return false;
@@ -330,13 +329,9 @@ void JSNavigation::JSBind(BindingTarget globalObj)
     JSClass<JSNavigation>::StaticMethod("hideTitleBar", &JSNavigation::SetHideTitleBar, opt);
     JSClass<JSNavigation>::StaticMethod("hideBackButton", &JSNavigation::SetHideBackButton, opt);
     JSClass<JSNavigation>::StaticMethod("hideToolBar", &JSNavigation::SetHideToolBar, opt);
-    JSClass<JSNavigation>::StaticMethod("toolBar", &JSNavigation::SetToolBar);
     JSClass<JSNavigation>::StaticMethod("enableToolBarAdaptation", &JSNavigation::SetEnableToolBarAdaptation);
-    JSClass<JSNavigation>::StaticMethod("toolbarConfiguration", &JSNavigation::SetToolbarConfiguration);
     JSClass<JSNavigation>::StaticMethod("menus", &JSNavigation::SetMenus);
     JSClass<JSNavigation>::StaticMethod("menuCount", &JSNavigation::SetMenuCount);
-    JSClass<JSNavigation>::StaticMethod("onTitleModeChange", &JSNavigation::SetOnTitleModeChanged);
-    JSClass<JSNavigation>::StaticMethod("onNavigationModeChange", &JSNavigation::SetOnNavigationModeChange);
     JSClass<JSNavigation>::StaticMethod("mode", &JSNavigation::SetUsrNavigationMode);
     JSClass<JSNavigation>::StaticMethod("navBarWidth", &JSNavigation::SetNavBarWidth);
     JSClass<JSNavigation>::StaticMethod("minContentWidth", &JSNavigation::SetMinContentWidth);
@@ -344,14 +339,12 @@ void JSNavigation::JSBind(BindingTarget globalObj)
     JSClass<JSNavigation>::StaticMethod("navBarPosition", &JSNavigation::SetNavBarPosition);
     JSClass<JSNavigation>::StaticMethod("hideNavBar", &JSNavigation::SetHideNavBar);
     JSClass<JSNavigation>::StaticMethod("backButtonIcon", &JSNavigation::SetBackButtonIcon);
-    JSClass<JSNavigation>::StaticMethod("onNavBarStateChange", &JSNavigation::SetOnNavBarStateChange);
     JSClass<JSNavigation>::StaticMethod("navDestination", &JSNavigation::SetNavDestination);
     JSClass<JSNavigation>::StaticMethod("onAttach", &JSInteractableView::JsOnAttach);
     JSClass<JSNavigation>::StaticMethod("onAppear", &JSInteractableView::JsOnAppear);
     JSClass<JSNavigation>::StaticMethod("onDetach", &JSInteractableView::JsOnDetach);
     JSClass<JSNavigation>::StaticMethod("onDisAppear", &JSInteractableView::JsOnDisAppear);
     JSClass<JSNavigation>::StaticMethod("onTouch", &JSInteractableView::JsOnTouch);
-    JSClass<JSNavigation>::StaticMethod("customNavContentTransition", &JSNavigation::SetCustomNavContentTransition);
     JSClass<JSNavigation>::StaticMethod("ignoreLayoutSafeArea", &JSNavigation::SetIgnoreLayoutSafeArea);
     JSClass<JSNavigation>::StaticMethod("systemBarStyle", &JSNavigation::SetSystemBarStyle);
     JSClass<JSNavigation>::StaticMethod("recoverable", &JSNavigation::SetRecoverable);
@@ -381,9 +374,9 @@ void JSNavigation::SetTitle(const JSCallbackInfo& info)
         JSRef<JSVal> builderObject = jsObj->GetProperty("builder");
         if (builderObject->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(info.This(), JSRef<JSFunc>::Cast(builderObject));
+            auto jsFunc = JSRef<JSFunc>::Cast(builderObject);
             ACE_SCORING_EVENT("Navigation.title.builder");
-            jsBuilderFunc.Execute();
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavigationModel::GetInstance()->SetCustomTitle(customNode);
         }
@@ -560,8 +553,8 @@ void JSNavigation::SetToolBar(const JSCallbackInfo& info)
     auto builderFuncParam = JSRef<JSObject>::Cast(info[0])->GetProperty("builder");
     if (builderFuncParam->IsFunction()) {
         ViewStackModel::GetInstance()->NewScope();
-        JsFunction jsBuilderFunc(builderFuncParam);
-        jsBuilderFunc.Execute();
+        auto jsFunc = JSRef<JSFunc>::Cast(builderFuncParam);
+        jsFunc->Call(info.This());
         auto customNode = ViewStackModel::GetInstance()->Finish();
         NavigationModel::GetInstance()->SetCustomToolBar(customNode);
     }
@@ -619,8 +612,8 @@ void JSNavigation::SetToolbarConfiguration(const JSCallbackInfo& info)
         auto builderFuncParam = JSRef<JSObject>::Cast(info[0])->GetProperty("builder");
         if (builderFuncParam->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(builderFuncParam);
-            jsBuilderFunc.Execute();
+            auto jsFunc = JSRef<JSFunc>::Cast(builderFuncParam);
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavigationModel::GetInstance()->SetCustomToolBar(customNode);
         }
@@ -663,9 +656,9 @@ void JSNavigation::SetMenus(const JSCallbackInfo& info)
         auto builderObject = JSRef<JSObject>::Cast(info[0])->GetProperty("builder");
         if (builderObject->IsFunction()) {
             ViewStackModel::GetInstance()->NewScope();
-            JsFunction jsBuilderFunc(info.This(), JSRef<JSFunc>::Cast(builderObject));
+            auto jsFunc = JSRef<JSFunc>::Cast(builderObject);
             ACE_SCORING_EVENT("Navigation.menu.builder");
-            jsBuilderFunc.Execute();
+            jsFunc->Call(info.This());
             auto customNode = ViewStackModel::GetInstance()->Finish();
             NavigationModel::GetInstance()->SetCustomMenu(customNode);
             NavigationModel::GetInstance()->SetMenuOptions(std::move(options));
@@ -734,16 +727,23 @@ void JSNavigation::SetNavBarPosition(int32_t value)
 
 void ParseNavBarWidthObject(const JSCallbackInfo& info, JSRef<JSVal> arrowFunc, bool isNumber)
 {
-    auto jsFunc = AceType::MakeRefPtr<JsFunction>(JSRef<JSObject>(), JSRef<JSFunc>::Cast(arrowFunc));
+    auto vm = info.GetVm();
+    auto jsFunc = JSRef<JSFunc>::Cast(arrowFunc);
+    auto func = jsFunc->GetLocalHandle();
     WeakPtr<NG::FrameNode> targetNode = AceType::WeakClaim(NG::ViewStackProcessor::GetInstance()->GetMainFrameNode());
-    auto onChangeEvent = [execCtx = info.GetExecutionContext(), func = std::move(jsFunc),
-                        node = targetNode, useNumber = isNumber](const Dimension& navBarWidth) {
-        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+    auto onChangeEvent = [vm, func = panda::CopyableGlobal(vm, func), node = targetNode, useNumber = isNumber](
+                             const Dimension& navBarWidth) {
+        panda::LocalScope pandaScope(vm);
+        panda::TryCatch trycatch(vm);
         ACE_SCORING_EVENT("Navigation.onNavBarWidthChangeEvent");
         PipelineContext::SetCallBackNode(node);
-        auto newJSVal = useNumber ? JSRef<JSVal>::Make(ToJSValue(navBarWidth.ConvertToVp())) :
-            JSRef<JSVal>::Make(ToJSValue(navBarWidth.ToString()));
-        func->ExecuteJS(1, &newJSVal);
+        panda::Local<panda::JSValueRef> params[1];
+        if (useNumber) {
+            params[0] = { panda::NumberRef::New(vm, navBarWidth.ConvertToVp()) };
+        } else {
+            params[0] = { panda::StringRef::NewFromUtf8(vm, navBarWidth.ToString().c_str()) };
+        }
+        func->Call(vm, func.ToLocal(), params, 1);
     };
     NavigationModel::GetInstance()->SetOnNavBarWidthChangeEvent(std::move(onChangeEvent));
 }
@@ -867,16 +867,17 @@ void JSNavigation::SetOnNavBarStateChange(const JSCallbackInfo& info)
     }
 
     if (info[0]->IsFunction()) {
-        auto onNavBarStateChangeCallback =
-            AceType::MakeRefPtr<JsFunction>(JSRef<JSObject>(), JSRef<JSFunc>::Cast(info[0]));
+        auto vm = info.GetVm();
+        auto jsFunc = JSRef<JSFunc>::Cast(info[0]);
+        auto func = jsFunc->GetLocalHandle();
         auto targetNode = AceType::WeakClaim(NG::ViewStackProcessor::GetInstance()->GetMainFrameNode());
-        auto onNavBarStateChange = [execCtx = info.GetExecutionContext(), func = std::move(onNavBarStateChangeCallback),
-                                       node = targetNode](bool isVisible) {
-            JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
+        auto onNavBarStateChange = [vm, func = panda::CopyableGlobal(vm, func), node = targetNode](bool isVisible) {
+            panda::LocalScope pandaScope(vm);
+            panda::TryCatch trycatch(vm);
             ACE_SCORING_EVENT("OnNavBarStateChange");
             PipelineContext::SetCallBackNode(node);
-            JSRef<JSVal> param = JSRef<JSVal>::Make(ToJSValue(isVisible));
-            func->ExecuteJS(1, &param);
+            panda::Local<panda::JSValueRef> params[1] = { panda::BooleanRef::New(vm, isVisible) };
+            func->Call(vm, func.ToLocal(), params, 1);
         };
         NavigationModel::GetInstance()->SetOnNavBarStateChange(std::move(onNavBarStateChange));
     }
@@ -1026,8 +1027,8 @@ void JSNavigation::SetIgnoreLayoutSafeArea(const JSCallbackInfo& info)
             }
             if (value->ToNumber<uint32_t>() == SAFE_AREA_EDGE_TOP ||
                 value->ToNumber<uint32_t>() == SAFE_AREA_EDGE_BOTTOM) {
-                    safeAreaEdge |= (1 << value->ToNumber<uint32_t>());
-                }
+                safeAreaEdge |= (1 << value->ToNumber<uint32_t>());
+            }
         }
         opts.edges = safeAreaEdge;
     }