YouTip` element. When any of these events are triggered, `event.type` is used to display the name of the active event inside a `
`.
```javascript
$("p").on("click dblclick mouseover mouseout", function(event) {
$("div").html("Event triggered: " + event.type + "");
});
```
### Example 2: Conditional Logic Based on Event Type
You can use a `switch` statement or `if/else` blocks with `event.type` to run different code blocks depending on the user's interaction.
```javascript
$("input").on("focus blur", function(event) {
if (event.type === "focus") {
// Highlight the input field when focused
$(this).css("background-color", "#e0f7fa");
} else if (event.type === "blur") {
// Clear the background color when focus is lost
$(this).css("background-color", "#ffffff");
}
});
```
---
## Key Considerations
1. **Standardization:** jQuery normalizes the `event.type` property across all browsers. You do not need to worry about legacy browser inconsistencies when retrieving the event name.
2. **Custom Events:** If you trigger a custom event using jQuery's `.trigger()`, `event.type` will return the name of your custom event:
```javascript
$("p").on("myCustomEvent", function(event) {
console.log(event.type); // Outputs: "myCustomEvent"
});
$("p").trigger("myCustomEvent");
```
3. **Read-Only:** The `event.type` property is read-only. Attempting to manually overwrite this property during runtime will not change the native event behavior and is not recommended.