OnEvent Event

String	Copy Code
BODY[body]/DIV[div.section]/P[p:nth-child(3)]/SPAN[p:nth-of-type(1) > span:nth-child(2)]

JSON	Copy Code
{ "eventName": "DOMFocusIn", "eventType": "[object FocusEvent]", "bubbles": true, "cancelBubble": false, "cancelable": false, "composed": true, "currentTarget": "", "defaultPrevented": false, "detail": 0, "eventPhase": 1, "fromElement": "", "isTrusted": true, "originalTarget": "", "path": "body", "relatedTarget": "", "returnValue": true, "srcElement": "body", "sourceCapabilities": null, "target": "body", "timeStamp": 899.6000000006461, "toElement": "", "type": "DOMFocusIn", "view": "[object Window]", "which": 0, "NONE": 0, "CAPTURING_PHASE": 1, "AT_TARGET": 2, "BUBBLING_PHASE": 3 }

In This Topic

Description

Fired when an HTML5 DOM Event occurs. This is generic event handler that provides fast event handling for various events.

Syntax

Visual Basic
Public Event OnEvent( _ ByVal EventType As String, _ ByVal EventSelector As String, _ ByVal TargetSelector As String, _ ByVal TargetPath As String, _ ByVal EventData As String, _ ByVal Async As Boolean, _ ByRef PreventDefault As Boolean, _ ByRef CancelBubble As Boolean _ )

Visual Basic

Public Event OnEvent( _
   ByVal EventType As String, _
   ByVal EventSelector As String, _
   ByVal TargetSelector As String, _
   ByVal TargetPath As String, _
   ByVal EventData As String, _
   ByVal Async As Boolean, _
   ByRef PreventDefault As Boolean, _
   ByRef CancelBubble As Boolean _
)

Parameters

EventType

The name of the event.

EventSelector

The internal CSS3 selector of the event.

This is window or document for events set by Events property or the actual CSS3 selector for events set with AddEventListener and AddEventListenerEx.

TargetSelector

The CSS3 selector of the target HTML5 Element that dispatched the event.

TargetPath

A back-slash separated path of Tag Name [ CSS3 Selector ] patterns, starting from the <BODY> element up to the target HTML5 Element that dispatched the event.

String	Copy Code
BODY[body]/DIV[div.section]/P[p:nth-child(3)]/SPAN[p:nth-of-type(1) > span:nth-child(2)]

EventData

The event data in JSON Stringified format:

JSON	Copy Code
{ "eventName": "DOMFocusIn", "eventType": "[object FocusEvent]", "bubbles": true, "cancelBubble": false, "cancelable": false, "composed": true, "currentTarget": "", "defaultPrevented": false, "detail": 0, "eventPhase": 1, "fromElement": "", "isTrusted": true, "originalTarget": "", "path": "body", "relatedTarget": "", "returnValue": true, "srcElement": "body", "sourceCapabilities": null, "target": "body", "timeStamp": 899.6000000006461, "toElement": "", "type": "DOMFocusIn", "view": "[object Window]", "which": 0, "NONE": 0, "CAPTURING_PHASE": 1, "AT_TARGET": 2, "BUBBLING_PHASE": 3 }

JSON

Copy Code

{
  "eventName": "DOMFocusIn",
  "eventType": "[object FocusEvent]",
  "bubbles": true,
  "cancelBubble": false,
  "cancelable": false,
  "composed": true,
  "currentTarget": "",
  "defaultPrevented": false,
  "detail": 0,
  "eventPhase": 1,
  "fromElement": "",
  "isTrusted": true,
  "originalTarget": "",
  "path": "body",
  "relatedTarget": "",
  "returnValue": true,
  "srcElement": "body",
  "sourceCapabilities": null,
  "target": "body",
  "timeStamp": 899.6000000006461,
  "toElement": "",
  "type": "DOMFocusIn",
  "view": "[object Window]",
  "which": 0,
  "NONE": 0,
  "CAPTURING_PHASE": 1,
  "AT_TARGET": 2,
  "BUBBLING_PHASE": 3
}

Async

Indicates if this is a synchronous or asynchronous event.

PreventDefault

For synchronous events only, you can set this argument to True to cancel the event and prevent its default behavior.

CancelBubble

For synchronous events only, you can set this argument to True to cancel the event bubbling.

Remarks

Setting OnEvent

There are two ways to enable receiving HTML5 DOM events through OnEvent:

During OnLoadEnd or OnPageCompete, by setting the Events property to DOM_EVENTS enumflags value.
You can subscribe to multiple events by OR-ing the DOM_EVENTS values.
By setting FireOnEventForAllEvents and attach to HTML5 DOM events using AddEventListener and AddEventListenerEx.

Asynchronous DOM to COM Events

Image Title

HTML5 DOM Events are generated by WebKit Blink Engine and are copied into an immutable format before they are transmitted from CEFXClient process to WebKitX ActiveX. Once WebKitX ActiveX receives an event notification through IPC, it fires a COM Event with the copied data of HTML DOM event. Thus, CEFXClient process does not block waiting for your client code to handle the event. WebKitX DOM Events are Immutable, meaning that you can only read event data but you cannot cancel events, stop them from bubbling or prevent default behavior.

Synchronous DOM to COM Events

Image Title

WebKitX as of version 1.5.11.2591 supports synchronous DOM to COM events by implementing CefMessageRouter circuit. Events generated from WebKit Blink Engine are serialized and passed from Rendering to Browser process, which transmits them to the ActiveX. The browser process waits for the ActiveX to handle the event, where you can also cancel event bubble or prevent event's default behavior.

Please note that blocking Inter-process Communication (IPC) between 3 processes is not advisable for casual event handling and you should do so only if you need to cancel specific events. Synchronous DOM to COM Events are thread-safe and care has been placed in order to support this feature seamlessly in single-threaded Applications without deadlocks. For that purpose, synchronous events are serialized using mutex synchronization on entry, meaning that synchronous events occupy the IPC channel one at a time. Please contact us for more implementation details or if you need a different handling of DOM to COM events.

Example

Example (Visual Basic)
Example (C#)

Private Sub WebKitX1_OnEvent(ByVal EventType As String, ByVal EventSelector As String, ByVal TargetSelector As String, ByVal TargetPath As String, ByVal EventData As String, ByVal Async As Boolean, PreventDefault As Boolean, CancelBubble As Boolean)

    On Error Resume Next
    
    If NoEvents Then Exit Sub
    
    Select Case EventType
    
    Case "input"
    
        WebKitX1.Modified = True
    
    Case "click"
        
        If EditMode <> EDIT_DESIGNER Then
            EditMode = EDIT_DESIGNER
            Timer1.Enabled = True
        End If
    
    Case "selectstart", "DOMFocusIn" 'DOMFocusIn for IMG
    
        picStatus.Cls
        picStatus.CurrentX = 4
        picStatus.CurrentY = 2
        picStatus.Print TargetSelector
    
        Dim v As Variant
        Dim i As Long
        Dim b As Button
        Dim s As String
        Dim k As String
        Dim p As Long
        Dim m As ButtonMenu
        Dim tag As String
        
        Toolbar2.Buttons.Clear
        
        Debug.Print TargetPath
        
        v = Split(TargetPath, "/")
        For i = 0 To UBound(v)
            p = InStr(v(i), "[")
            tag = Left(v(i), p - 1)
            s = "<" + tag + ">"
            k = Mid(v(i), p + 1)
            k = Left(k, Len(k) - 1)
            Set b = Toolbar2.Buttons.Add(, k, s)
            b.ToolTipText = k
            b.Style = tbrDropdown
            b.ButtonMenus.Add , , "Select Node"
            b.ButtonMenus.Add , , "Select Contents"
            b.ButtonMenus.Add , , "-"
            b.ButtonMenus.Add , , "Cut"
            b.ButtonMenus.Add , , "Copy"
            b.ButtonMenus.Add , , "Delete"
            b.ButtonMenus.Add , , "-"
            b.ButtonMenus.Add , , "Edit InnerHTML ..."
            b.ButtonMenus.Add , , "Edit OuterHTML ..."
            b.ButtonMenus.Add , , "-"
            b.ButtonMenus.Add , , "Set Class ..."
            b.ButtonMenus.Add , , "Edit Style ..."
            b.ButtonMenus.Add , , "Get Computed Style"
            b.ButtonMenus.Add , , "-"
            b.ButtonMenus.Add , , "Edit Attributes ..."
            b.ButtonMenus.Add , , "-"
            b.ButtonMenus.Add , , "Copy Selector"
            
            Select Case tag
            
            Case "A"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Hyperlink ..."
            
            Case "TABLE"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Table ..."
            
            Case "TD"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Select Column"
            
            Case "HR"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Horizontal Line ..."
                
            Case "IMG"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Image ..."
                
            Case "VIDEO"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Image ..."
                
            Case "FORM"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Form ..."
                
            Case "INPUT", "SELECT"
                b.ButtonMenus.Add , , "-"
                b.ButtonMenus.Add , , "Edit Control ..."
                
            End Select
            
            If i = UBound(v) Then
                CurrentSelector = k
            End If
        Next
        
    Case "DOMSubtreeModified"
        
        If InStr(TargetPath, "html.windows.chrome") > 0 Then Exit Sub
        If NoDomModifications Then Exit Sub
        If EditMode = EDIT_SOURCE Then Exit Sub
        Timer1.Enabled = False
        Timer1.Enabled = True
        
    Case Else
    
        AddLog "OnEvent: EventType=" & EventType & ", EventSelector=" & EventSelector & ", TargetSelector=" & TargetSelector & " TargetPath=" & TargetPath & ", EventData=" & EventData
    
    End Select
        
End Sub

private void WebKitXCEF31_OnEvent(object sender, AxWebKitXCEF3Lib._DWebKitXCEF3Events_OnEventEvent e)
{
    if (!NoEvents)
    {
        switch (e.eventType)
        {
            case ("input"):
                WebKitXCEF31.Modified = true;
                break;
            case ("click"):
                if (EditMode != EDIT_MODE.EDIT_DESIGNER)
                {
                    EditMode = EDIT_MODE.EDIT_DESIGNER;
                    timer1.Enabled = true;
                }
                break;
            case ("selectstart"):
            case ("DOMFocusIn"):


                pictureBoxStatus.Clear();
                pictureBoxStatus.Text = e.targetSelector;

                int i, p;
                string s, k, tag;

                toolBar1.Items.Clear();

                string[] v = e.targetPath.Split('/');

                for (i = 0; i < v.Length; i++)
                {
                    p = v[i].IndexOf('[');                            
                    tag = v[i].Substring(0, p);
                    s = '<' + tag + '>';
                    k = v[i].Substring(p + 1, v[i].Length - 1 - p);
                    k = k.Substring(0, k.Length - 1);


                    ToolStripItem itm = new ToolStripDropDownButton(s);
                    itm.DisplayStyle = ToolStripItemDisplayStyle.Text;
                    itm.ToolTipText = k;
                    itm.Name = k;
                    itm.Tag = tag;
                    toolBar1.Items.Add(itm);

                    itm.Click += (object _sender, EventArgs _event) =>
                    {
                        ToolStripDropDownButton dropDown = _sender as ToolStripDropDownButton;

                        ContextMenu cm = new ContextMenu();

                        MenuItem selectNode = new MenuItem("Select Node");
                        MenuItem selectContents = new MenuItem("Select Contents");
                        MenuItem seperator = new MenuItem("-");
                        MenuItem cut = new MenuItem("Cut");
                        MenuItem copy = new MenuItem("Copy");
                        MenuItem delete = new MenuItem("Delete");
                        MenuItem editInnerHTML = new MenuItem("Edit InnerHTML...");
                        MenuItem editOuterHTML = new MenuItem("Edit OuterHTML...");
                        MenuItem setClass = new MenuItem("Set Class...");
                        MenuItem editStyle = new MenuItem("Edit Style...");
                        MenuItem getComputedStyle = new MenuItem("Get Computed Style");
                        MenuItem editAddtributes = new MenuItem("Edit Attributes...");
                        MenuItem copySelector = new MenuItem("Copy Selector");

                        cm.MenuItems.Add(selectNode);
                        cm.MenuItems.Add(selectContents);
                        cm.MenuItems.Add("-");
                        cm.MenuItems.Add(cut);
                        cm.MenuItems.Add(copy);
                        cm.MenuItems.Add(delete);
                        cm.MenuItems.Add("-");
                        cm.MenuItems.Add(editInnerHTML);
                        cm.MenuItems.Add(editOuterHTML);
                        cm.MenuItems.Add("-");
                        cm.MenuItems.Add(setClass);
                        cm.MenuItems.Add(editStyle);
                        cm.MenuItems.Add(getComputedStyle);
                        cm.MenuItems.Add("-");
                        cm.MenuItems.Add(editAddtributes);
                        cm.MenuItems.Add("-");
                        cm.MenuItems.Add(copySelector);

                        switch (tag)
                        {
                            case ("A"):
                                MenuItem editHyperLink = new MenuItem("Edit Hyperlink...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editHyperLink);
                                break;
                            case ("TABLE"):
                                MenuItem editTable = new MenuItem("Edit Table...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editTable);
                                break;
                            case ("TD"):
                                MenuItem selectColumn = new MenuItem("Select Column");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(selectColumn);
                                break;
                            case ("HR"):
                                MenuItem editHorizontalLine = new MenuItem("Edit Horizontal Line ...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editHorizontalLine);
                                break;
                            case ("IMG"):
                                MenuItem editImage = new MenuItem("Edit Image ...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editImage);
                                break;
                            case ("VIDEO"):
                                MenuItem editVideo = new MenuItem("Edit Image ...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editVideo);
                                break;
                            case ("FORM"):
                                MenuItem editForm = new MenuItem("Edit Form...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editForm);
                                break;
                            case ("INPUT"):
                            case ("SELECT"):
                                MenuItem editControl = new MenuItem("Edit Control...");
                                cm.MenuItems.Add("-");
                                cm.MenuItems.Add(editControl);
                                break;
                        }

                        cm.Show(dropDown.GetCurrentParent(), new Point(dropDown.Bounds.Left, dropDown.Bounds.Bottom + 2));

                    };

                    if (i == v.Length - 1)
                    {
                        CurrentSelector = k;
                    }
                }
                break;

            case ("DOMSubtreeModified"):
                if (e.targetPath.IndexOf("html.windows.chrome") == -1)
                {
                    if (!NoDomModifications)
                    {
                        if (EditMode != EDIT_MODE.EDIT_SOURCE)
                        {
                            timer1.Enabled = false;
                            timer1.Enabled = true;
                        }
                    }
                }
                break;

            default:
                AddLog("OnEvent: EventType=" + e.eventType + ", EventSelector=" + e.eventSelector + ", TargetSelector=" + e.targetSelector + " TargetPath=" + e.targetPath + ", EventData=" + e.eventData);
                break;
        }
    }
}