Events and Input

<cat>UI.Intro</cat>
<title>Events and Input</title>

## Panel Events & Input

# Events

Panels can listen for events, here's the current list:

|       Event        |  Description  |
|-------------------|-----|
| onclick | Called when left clicking on a panel | 
| onmiddleclick | Called when middle clicking on a panel | 
| onrightclick | Called when right clicking on a panel | 
| onmousedown | Called when any mouse button is pressed this frame | 
| onmouseup | Called when any mouse button is released this frame | 
| ondoubleclick | Called when a panel is double clicked on | 
| onmousemove | Called every frame where your mouse is moving inside of a panel | 
| onmouseover | Called when your mouse enters the bounds of a panel | 
| onmouseout | Called when your mouse exits the bounds of a panel | 
| onfocus | Called when the panel comes into focus | 
| onblur | Called when the panel loses focus | 
| onback | Called when you click the Back button on your mouse | 
| onforward | Called when you click the Forward button on your mouse | 
| onescape | Called when the escape key is pressed, also Blur() if focused |

**Warning**: You may have to disable pointer events on overlapping transparent GUI elements for events to trigger!

**Bug**: There's no guarantee that onmouseover and onmouseout events will be triggered in the correct order; if that matters to you then you're better off not relying on it.

## Usage

```csharp
	panel.AddEventListener( "onclick", e => Log.Info( "I clicked my panel!" ) ); 
```

Or you can use these events in .razor files

```csharp
<text @onclick=@OnClick>Click me!</text>
```

Assume in the above example that there is a function `OnClick` in the razor class. You can learn more about this usage here https://wiki.facepunch.com/sbox/ui-razor#events

# Class Overrides

All panels have these available virtual methods for you to override, if you choose not to use events.

```csharp
protected virtual void OnClick( MousePanelEvent e )
protected virtual void OnMiddleClick( MousePanelEvent e )
protected virtual void OnRightClick( MousePanelEvent e )
protected virtual void OnMouseDown( MousePanelEvent e )
protected virtual void OnMouseUp( MousePanelEvent e )
protected virtual void OnMouseMove( MousePanelEvent e )
protected virtual void OnDoubleClick( MousePanelEvent e )
protected virtual void OnMouseOver( MousePanelEvent e )
protected virtual void OnMouseOut( MousePanelEvent e )
protected virtual void OnBack( PanelEvent e )
protected virtual void OnForward( PanelEvent e )
protected virtual void OnFocus( PanelEvent e )
protected virtual void OnBlur( PanelEvent e )
protected virtual void OnEscape( PanelEvent e )
```


## Adding a text entry

This is an example of the usage of the `Add.TextEntry(string name)`.

Source: base gamemode - /code/UI/Chat.cs


```cs
using Sandbox.UI.Construct;
using System;

namespace Sandbox.UI
{
	public partial class ChatBox : Panel
	{
		static ChatBox Current;

		public Panel Canvas { get; protected set; }
		public TextEntry Input { get; protected set; }

		public ChatBox()
		{
			Current = this;

			StyleSheet.Load( "/ui/chat/ChatBox.scss" );

			Canvas = Add.Panel( "chat_canvas" );

			Input = Add.TextEntry( "" );
			Input.AddEventListener( "onsubmit", () => Submit() );
			Input.AddEventListener( "onblur", () => Close() );
			Input.AcceptsFocus = true;
			Input.AllowEmojiReplace = true;
		}

		void Open()
		{
			AddClass( "open" );
			Input.Focus();
		}

		void Close()
		{
			RemoveClass( "open" );
			Input.Blur();
		}
	}
}
```

Events and Input

Account Management

Special Pages

Wiki List

S&box Wiki