event.type?event.type is a String that describes the nature of the event — "click", "keydown", or a custom name like "saveDraft". Since jQuery 1.0. It is the base name only (no namespace). Works with native events and .trigger().
event.type // "click", "keydown", "saveDraft", …
event.namespace // "myPlugin" for click.myPlugin (or "")
// Official pattern
$("a").on("click", function (event) {
alert(event.type); // "click"
});| Need | Use |
|---|---|
| What kind of event? | event.type |
| Namespace suffix? | event.namespace |
| Fire a custom name | .trigger("name") |
| Bind handlers | .on() |
| Remove by namespace | .off(".ns") |
event.typeRead it inside any handler to learn which event fired.
.on("click", fn) or multi: .on("click keydown", fn).event.type.if / switch when one function handles several events..trigger("saveDraft") — type is "saveDraft".type.| Piece | Required? | Role |
|---|---|---|
event argument | Yes | jQuery event object |
event.type | Yes (to inspect) | Base event name string |
| Multi-event bind | Optional | One handler, branch on type |
.trigger(name) | Optional | Custom types |
element.on("click keydown saveDraft", handler)
when an event fires:
type = event.type // "click" | "keydown" | "saveDraft"
switch type:
case "click": handle click
case "keydown": handle key
case "saveDraft": handle custom
// click.myPlugin → type is still "click"Keep these facts handy while reading event names.
| Topic | Detail |
|---|---|
| Type | Property → String |
| Since | jQuery 1.0 |
| Meaning | Nature / base name of the event |
| Examples | click, keydown, saveDraft |
| Namespace | Not included — see event.namespace |
| Custom events | Same property via .trigger() |
Click a link — the log shows event.type, like the official demo.
Short labs — each has View Output, Try It Yourself, and How It Works.
Show event.type on every link click.
$("a").on("click", function (event) {
event.preventDefault();
$("#out").text("event.type: " + event.type);
});"click".One function for click, mouseenter, and mouseleave.
$("#box").on("click mouseenter mouseleave", function (event) {
$("#out").text("Fired: " + event.type);
});type matches that event.saveDraftTrigger a custom event; read its type in the handler.
$("#editor").on("saveDraft", function (event) {
$("#out").text("Draft saved (type: " + event.type + ")");
});
$("#save").on("click", function () {
$("#editor").trigger("saveDraft");
});saveDraft."saveDraft".One container handler branches by event.type.
$("#app").on("click submit keydown", function (event) {
switch (event.type) {
case "click":
$("#out").text("Click inside #app");
break;
case "submit":
event.preventDefault();
$("#out").text("Form submitted");
break;
case "keydown":
$("#out").text("Key: " + event.type);
break;
}
});#app hears several events.event.type.preventDefault() in that case.Namespaced clicks share type; namespace differs.
$("#btn").on("click.pluginA", function (event) {
$("#out").append("A → type: " + event.type +
", ns: " + event.namespace + "\n");
});
$("#btn").on("click.pluginB", function (event) {
$("#out").append("B → type: " + event.type +
", ns: " + event.namespace + "\n");
});click.pluginA and click.pluginB."click".event.namespace tells them apart.Watch for these when reading event names.
click.foo still has type === "click". Use event.namespace for foo.
jQuery event names are lowercase ("click", not "Click"). Match that in switch/if.
Synthetic triggers may lack originalEvent. Rely on event.type in jQuery handlers.
Always branch on event.type — otherwise click and mouseenter share the wrong logic.
event.type is a standard DOM Event property. jQuery exposes it on the normalized event object since 1.0. Works wherever your loaded jQuery version runs.
Supported in all modern browsers via the DOM Event API. Prefer jQuery 3.x for a consistent event object across native and custom events.
Bottom line: Safe for production. Use type for the base name; use namespace for the dotted suffix; use .trigger() for custom names.
| Approach | Cost | Best for |
|---|---|---|
Read event.type | Free | Identifying the event |
| Multi-event one handler | Cheap | Shared UI feedback |
| Separate binds per type | Fine | Very different logic per event |
Custom .trigger() | Tiny | App-level messaging |
Reading type has no meaningful cost. Prefer one multi-event handler when the logic is similar; split binds when branches grow large.
type.event.type over originalEvent.type.One line: event.type answers “what kind of event is this?”
Read the horizontal mouse position relative to the document.
10 people found this page helpful