Merge pull request #1524 from lightpanda-io/trigger_inline_handlers

Trigger inline handlers

src/browser/EventManager.zig

@@ -329,6 +329,28 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
     // Phase 2: At target
     event._event_phase = .at_target;
     const target_et = target.asEventTarget();
+
+    blk: {
+        // Get inline handler (e.g., onclick property) for this target
+        if (self.getInlineHandler(target_et, event)) |inline_handler| {
+            was_handled.* = true;
+            event._current_target = target_et;
+
+            var ls: js.Local.Scope = undefined;
+            self.page.js.localScope(&ls);
+            defer ls.deinit();
+
+            try ls.toLocal(inline_handler).callWithThis(void, target_et, .{event});
+
+            if (event._stop_propagation) {
+                return;
+            }
+
+            if (event._stop_immediate_propagation) {
+                break :blk;
+            }
+        }
+
         if (self.lookup.get(.{
             .type_string = event._type_string,
             .event_target = @intFromPtr(target_et),
@@ -338,6 +360,7 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
                 return;
             }
         }
+    }
 
     // Phase 3: Bubbling phase (target → root, excluding target)
     // This only happens if the event bubbles
@@ -460,6 +483,20 @@ fn dispatchAll(self: *EventManager, list: *std.DoublyLinkedList, current_target:
     return self.dispatchPhase(list, current_target, event, was_handled, null);
 }
 
+fn getInlineHandler(self: *EventManager, target: *EventTarget, event: *Event) ?js.Function.Global {
+    const global_event_handlers = @import("webapi/global_event_handlers.zig");
+    const handler_type = global_event_handlers.fromEventType(event._type_string.str()) orelse return null;
+
+    // Look up the inline handler for this target
+    const Element = @import("webapi/Element.zig");
+    const element = switch (target._type) {
+        .node => |n| n.is(Element) orelse return null,
+        else => return null,
+    };
+
+    return self.page.getAttrListener(element, handler_type);
+}
+
 fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *Listener) void {
     // If we're in a dispatch, defer removal to avoid invalidating iteration
     if (self.dispatch_depth > 0) {

src/browser/Page.zig

@@ -710,18 +710,6 @@ fn _documentIsComplete(self: *Page) !void {
     for (self._to_load.items) |element| {
         const event = try Event.initTrusted(comptime .wrap("load"), .{}, self);
         defer if (!event._v8_handoff) event.deinit(false);
-
-        // Dispatch inline event.
-        blk: {
-            const html_element = element.is(HtmlElement) orelse break :blk;
-
-            const listener = (try html_element.getOnLoad(self)) orelse break :blk;
-            ls.toLocal(listener).call(void, .{}) catch |err| {
-                log.warn(.event, "inline load event", .{ .element = element, .err = err });
-            };
-        }
-
-        // Dispatch events registered to event manager.
         try self._event_manager.dispatch(element.asEventTarget(), event);
     }
 

src/browser/tests/events.html

@@ -635,3 +635,130 @@
   // https://github.com/lightpanda-io/browser/pull/1316
   testing.expectError('TypeError', () => MessageEvent(''));
 </script>
+
+<div id=inline_parent><div id=inline_child></div></div>
+<script id=inlineHandlerReceivesEvent>
+  // Test that inline onclick handler receives the event object
+  {
+    const inline_child = $('#inline_child');
+    let receivedType = null;
+    let receivedTarget = null;
+    let receivedCurrentTarget = null;
+
+    inline_child.onclick = function(e) {
+      // Capture values DURING handler execution
+      receivedType = e.type;
+      receivedTarget = e.target;
+      receivedCurrentTarget = e.currentTarget;
+    };
+
+    inline_child.click();
+
+    testing.expectEqual('click', receivedType);
+    testing.expectEqual(inline_child, receivedTarget);
+    testing.expectEqual(inline_child, receivedCurrentTarget);
+  }
+</script>
+
+<div id=inline_order_parent><div id=inline_order_child></div></div>
+<script id=inlineHandlerOrder>
+  // Test that inline handler executes in proper order with addEventListener
+  {
+    const inline_order_child = $('#inline_order_child');
+    const inline_order_parent = $('#inline_order_parent');
+    const order = [];
+
+    // Capture listener on parent
+    inline_order_parent.addEventListener('click', () => order.push('parent-capture'), true);
+
+    // Inline handler on child (should execute at target phase)
+    inline_order_child.onclick = () => order.push('child-onclick');
+
+    // addEventListener on child (should execute at target phase, after onclick)
+    inline_order_child.addEventListener('click', () => order.push('child-listener'));
+
+    // Bubble listener on parent
+    inline_order_parent.addEventListener('click', () => order.push('parent-bubble'));
+
+    inline_order_child.click();
+
+    // Expected order: capture, then onclick, then addEventListener, then bubble
+    testing.expectEqual('parent-capture', order[0]);
+    testing.expectEqual('child-onclick', order[1]);
+    testing.expectEqual('child-listener', order[2]);
+    testing.expectEqual('parent-bubble', order[3]);
+    testing.expectEqual(4, order.length);
+  }
+</script>
+
+<div id=inline_prevent><div id=inline_prevent_child></div></div>
+<script id=inlineHandlerPreventDefault>
+  // Test that inline handler can preventDefault and it affects addEventListener listeners
+  {
+    const inline_prevent_child = $('#inline_prevent_child');
+    let preventDefaultCalled = false;
+    let listenerSawPrevented = false;
+
+    inline_prevent_child.onclick = function(e) {
+      e.preventDefault();
+      preventDefaultCalled = true;
+    };
+
+    inline_prevent_child.addEventListener('click', (e) => {
+      listenerSawPrevented = e.defaultPrevented;
+    });
+
+    const result = inline_prevent_child.dispatchEvent(new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true
+    }));
+
+    testing.expectEqual(true, preventDefaultCalled);
+    testing.expectEqual(true, listenerSawPrevented);
+    testing.expectEqual(false, result); // dispatchEvent returns false when prevented
+  }
+</script>
+
+<div id=inline_stop_parent><div id=inline_stop_child></div></div>
+<script id=inlineHandlerStopPropagation>
+  // Test that inline handler can stopPropagation
+  {
+    const inline_stop_child = $('#inline_stop_child');
+    const inline_stop_parent = $('#inline_stop_parent');
+    let childCalled = false;
+    let parentCalled = false;
+
+    inline_stop_child.onclick = function(e) {
+      childCalled = true;
+      e.stopPropagation();
+    };
+
+    inline_stop_parent.addEventListener('click', () => {
+      parentCalled = true;
+    });
+
+    inline_stop_child.click();
+
+    testing.expectEqual(true, childCalled);
+    testing.expectEqual(false, parentCalled); // Should not bubble to parent
+  }
+</script>
+
+<div id=inline_replace_test></div>
+<script id=inlineHandlerReplacement>
+  // Test that setting onclick property replaces previous handler
+  {
+    const inline_replace_test = $('#inline_replace_test');
+    let calls = [];
+
+    inline_replace_test.onclick = () => calls.push('first');
+    inline_replace_test.click();
+
+    inline_replace_test.onclick = () => calls.push('second');
+    inline_replace_test.click();
+
+    testing.expectEqual('first', calls[0]);
+    testing.expectEqual('second', calls[1]);
+    testing.expectEqual(2, calls.length);
+  }
+</script>

src/browser/webapi/element/Html.zig

@@ -329,14 +329,15 @@ pub fn click(self: *HtmlElement, page: *Page) !void {
         else => {},
     }
 
-    const event = try @import("../event/MouseEvent.zig").init("click", .{
+    const event = (try @import("../event/MouseEvent.zig").init("click", .{
         .bubbles = true,
         .cancelable = true,
         .composed = true,
         .clientX = 0,
         .clientY = 0,
-    }, page);
-    try page._event_manager.dispatch(self.asEventTarget(), event.asEvent());
+    }, page)).asEvent();
+    defer if (!event._v8_handoff) event.deinit(false);
+    try page._event_manager.dispatch(self.asEventTarget(), event);
 }
 
 fn getAttributeFunction(

src/browser/webapi/global_event_handlers.zig

@@ -164,3 +164,24 @@ pub const Handler = enum(u7) {
     onwaiting,
     onwheel,
 };
+
+const typeToHandler = std.StaticStringMap(Handler).initComptime(blk: {
+    const fields = std.meta.fields(Handler);
+    var entries: [fields.len]struct { []const u8, Handler } = undefined;
+    for (fields, 0..) |field, i| {
+        entries[i] = .{ field.name[2..], @enumFromInt(field.value) };
+    }
+    break :blk entries;
+});
+
+pub fn fromEventType(typ: []const u8) ?Handler {
+    return typeToHandler.get(typ);
+}
+
+const testing = @import("../../testing.zig");
+test "GlobalEventHandlers: fromEventType" {
+    try testing.expectEqual(.onabort, fromEventType("abort"));
+    try testing.expectEqual(.onselect, fromEventType("select"));
+    try testing.expectEqual(null, fromEventType(""));
+    try testing.expectEqual(null, fromEventType("unknown"));
+}