The jQuery Click method triggers a function when an element is clicked. The function is known as a "handler" because it handles the click event. Functions can
impact the HTML element that is bound to the click using the jQuery Click method, or they can change something else entirely. The most-used form is:
```javascript
$("#clickMe").click(handler)
```
The click method takes the handler function as an argument and executes it every time the element `#clickMe` is clicked. The handler function receives a
parameter known as an [eventObject](http://api.jquery.com/Types/#Event) that can be useful for controlling the action.
#### Examples
This code shows an alert when a user clicks a button:
```html
<buttonid="alert">Click Here</button>
```
```javascript
$("#alert").click(function () {
alert("Hi! I'm an alert");
});
```
[jsFiddle](https://jsfiddle.net/pL63cL6m/)
The [eventObject](http://api.jquery.com/Types/#Event) has some built in methods, including `preventDefault()`, which does exactly what it says - stops
the default event of an element. Here we pevent the anchor tag from acting as a link:
```html
<aid="myLink"href="www.google.com">Link to Google</a>
This applies to both jQuery and plain JavaScript, but if you set up your event trigger to target a class, you can grab the specific element that triggered the element by using the `this` keyword.
jQuery happens to make it very easy (and multi browser friendly) to traverse the DOM to find that element's parents, siblings, and children, as well.
Let's say I have a table full of buttons and I want to target the row that button is in, I can simply wrap `this` in a jQuery selector and then get its `parent` and its parent's `parent` like so:
```javascript
$( document ).on("click", ".myCustomBtnClassInATable", function () {
var myTableCell = $(this).parent();
var myTableRow = myTableCell.parent();
var myTableBody = myTableRow.parent();
var myTable = myTableBody.parent();
//you can also chain these all together to get what you want in one line
var myTableBody = $(this).parent().parent().parent();
});
```
It is also interesting to check out the event data for the click event, which you can grab by passing in any variable name to the function in the click event. You'll most likely see an `e` or `event` in most cases:
```javascript
$( document ).on("click", ".myCustomBtnClassInATable", function (e) {
//find out more information about the event variable in the console