Introduction and use of the EventTrigger (event listener) component of Unity UGUI

1. What is the EventTrigger component?

EventTrigger is a component in Unity UGUI, which is used to monitor and respond to various events of UI elements, such as click, drag, enter, leave, etc. Through the EventTrigger component, we can easily add various interactive behaviors to UI elements.

2. How the EventTrigger component works

The EventTrigger component listens to events on UI elements and executes corresponding callback functions when the events are triggered. Each UI element can add multiple EventTrigger components, and each component can listen to one or more events.

3. Common properties of the EventTrigger component

Triggers: A list for adding and managing event listeners. You can add a new listener by clicking the "+" button, and set the monitored event type and callback function in the Inspector panel.

4. Commonly used functions of the EventTrigger component

AddEventListener: Used to dynamically add event listeners. Listeners can be dynamically added through code, and the event types and callback functions to be monitored can be set.

5. Complete sample code

Example 1: Click event listener

step:

Create a Button object and add the EventTrigger component.
Click the "+" button in the Triggers list of the EventTrigger component to add a PointerClick event listener.
Write the code to handle the click event in the callback function.

using UnityEngine;
using UnityEngine.EventSystems;

public class Example1 : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        // 处理点击事件的代码
    }
}

Example 2: Drag and drop event monitoring

step:

Create an Image object and add the EventTrigger component.
Click the "+" button in the Triggers list of the EventTrigger component to add a BeginDrag, Drag and EndDrag event listener.
Write the code to handle the drag event in the callback function.

using UnityEngine;
using UnityEngine.EventSystems;

public class Example2 : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    public void OnBeginDrag(PointerEventData eventData)
    {
        // 处理开始拖拽事件的代码
    }

    public void OnDrag(PointerEventData eventData)
    {
        // 处理拖拽事件的代码
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        // 处理结束拖拽事件的代码
    }
}

Example 3: Enter and leave event listeners

step:

Create an Image object and add the EventTrigger component.
Click the "+" button in the Triggers list of the EventTrigger component to add a PointerEnter and PointerExit event listener.
Write the code that handles the entry and exit events in the callback function.

using UnityEngine;
using UnityEngine.EventSystems;

public class Example3 : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    public void OnPointerEnter(PointerEventData eventData)
    {
        // 处理进入事件的代码
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        // 处理离开事件的代码
    }
}

Example 4: Long press event monitoring

step:

Create a Button object and add the EventTrigger component.
Click the "+" button in the Triggers list of the EventTrigger component to add a PointerDown and PointerUp event listener.
Write the code to handle the long press event in the callback function.

using UnityEngine;
using UnityEngine.EventSystems;

public class Example4 : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    private bool isPressed = false;

    public void OnPointerDown(PointerEventData eventData)
    {
        isPressed = true;
        // 开始计时或执行其他操作
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        isPressed = false;
        // 停止计时或执行其他操作
    }
}

Example 5: Custom event listener

step:

Create a Button object and add the EventTrigger component.
Click the "+" button in the Triggers list of the EventTrigger component to add a listener of a custom event type.
Write code to handle custom events in the callback function.

using UnityEngine;
using UnityEngine.EventSystems;

public class Example5 : MonoBehaviour, ICustomEventSystemHandler
{
    public void OnCustomEvent(BaseEventData eventData)
    {
        // 处理自定义事件的代码
    }
}

Precautions

The EventTrigger component can only be added to UI elements that support events, such as Button, Image, etc.
When using the EventTrigger component, you need to ensure that the Raycast Target property of the UI element is true, otherwise the event will not be triggered.

References

Unity official documentation: EventTrigger
Unity official tutorial: UI Event System