Event Listeners

Some ways to use an ONCLICK event

There are a few ways you can respond to user actions...

Create a button to click on - which runs a function (myFunction)
<button class="button2" onclick="myFunction(
   'IDName',
   'My Text Here'
)">Try Me</button>

If you want something to happen when a user, for example, clicks on the <h3> element
<h3 id="myH3" onclick="this.innerHTML='I clicked it!' ">Original text here </h3>

Or you could even say
document.getElementById("myH3").onclick = function() {this.innerHTML="It's clicked"}

This is a test [H3] so click me!

but some say the addEventListener option is the way to go

So you could ...
document.getElementById(    "myH3a").addEventListener(
   "click", function() {myFunc1(this)});

Click me for addEventListener use!

The above uses an anonymous function which calls my actual NAMED function (myFunc1) and then passes to MyFunc1 a parameter that represents this actual element (this).
In myFunc1 I will then know the actual element that I clicked on.
Remember that this. is used in javascript to represent the current item

You cannot normally pass parameters to functions with addEventListener unless you specify a function within an anonymous function....
   function() {...} is an anonymous function

Some other addEventListener options

So you could use an anonymous function ...
document.getElementById(    "myH3a").addEventListener(
   "click", function() {...add some code...});

Or use a Named function ...

document.getElementById(    "myH3a").addEventListener(
   "click", myFunction);
Note there are no () next to myFunction as you cannot pass parameters this way so it does not like them here

If you need to pass parameters to your function see the second box (but some say the addEventListener option is the way to go)

Some other addEventListener events

Click Here for a list of events

Some are listed here, there are more of course...
...eventListener event names are before the / and events to use in the element are after.

mousemove/onmousemove
mouseover/onmouseover
mouseenter/onmouseenter
mouseleave/onmouseleave (also see 'mouseout' comments when clicking on link)
mousedown/onmousedown
mouseup/onmouseup

change/onchange (Activates upon a change to a <select> element)

drag/ondrag --- click here for an overview of drag/drop
dragend/ondragend
dragenter/ondragenter
dragleave/ondragleave
dragover/ondragover
dragstart/ondragstart
drop/onddop
Note...form jqEvents.html (DOM Event Listeners) use Drag/Drop so you could look there as well

keydown/onkeydown
keypress/onkeypress
keyup/onkeyup

copy/oncopy
cut/oncut
click/onclick
dblclick/ondblclick

focus/onfocus
blur/onblur (occurs when element loses focus)

Some examples

Mouseover & Mouseleave
Move the mouse over the image


Above uses
onmouseover="mouseOver('emu1Over')" onmouseleave="mouseLeave('emu1Over')"
which calls my functions mouseOver and mouseLeave to make the picture appear/disappear

Below uses the eventListener to do the same thing
<object.addEventListener("mouseover", function() { mouseOver("emu2Over", "emu2"))>
<object.addEventListener("mouseleave", function() { mouseLeave("emu2Over"))>

onchange/change event example

The onchange/change event happens when the user selects an option from a <select> element.
eg...
<select onchange="myFunction()">

Here's a [select] box (or Drop Down Box as I know it), make a change to see what happens
Note...the onchange only activates if it changes from one value to another, different value.

Select One: Audi BMW Mercedes Volvo Car Volvo Truck



Select One: Please Select Audi BMW Mercedes Volvo Car Volvo Truck

Dragging event example

Drag the p element ("Drag Me!") back and forth between the two rectangles:

Note: drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.

onfocus/focus & onblur/blur event example

The onfocus event happens when the gets focus and onblur happens when it loses focus.
eg...
<select onfocus="myFunctionGet()" onblur="myFunctionLose()">

Click in the box to set focus then click the button to lose focus on the box.

Change Focus

Find which element that triggered a specific event

The .target event property returns the element that triggered the event.

The .target property gets the element on which the event originally occurred, opposed to the .currentTarget property, which always refers to the element whose event listener triggered the event.

For example(s) see...

.target event.
.currentTarget event.