Java-Script Event Handlers and Events

Java-Script Event Handlers and Events

Basically the term is used as JavaScript events but they are not actually JavaScript events they are HTML events and JavaScript act on those events and perform some action by using its event handler.

HTML or Java Script events are something that occur when some event happens like page loading, button click, key up etc.

To handle those events all, the three type of JS can be use either its inline, internal or external. Most used HTML event is onclick event and it occur when user click on some particular element usually button.

1

<button onclick='alert(“hey”)'>Click me tosee</button>

Some Common events are:

onclick()

onload()

onchange()

onkeyup()

onkeydown()

oninput()

oncontextmenu()

onmouseover()

onsubmit()

onscroll()

onclick()

1

2

3

4

5

<script>

functionfoo(){

document.write("Hello World");

}

</script>

1

<button onclick="foo()">Click Me</button>

In the above example an event is bound on the button and the event handler foo() will be called when the button is clicked.

2. onload()

1

2

3

4

5

<script>

onload=functionfunc(){

alert("Hello");

}

</script>

This event reacts on page load. In the above example when this page loads an alert box will show displaying a message “Hello”.

3. onchange()

1

2

3

4

5

6

7

8

9

10

<select id="mySelect"onchange="myFunction()">

<option>BSSE

<option>BEE

<option>MSE

</select>

<script>

functionmyFunction(){

alert("You select a new value");

}

</script>

This event occurs with there is a change in drop down menu, whenever a new item is selected then the alert box is shown.

4. onkeyup()

1

2

3

4

5

<script>

functionfunc(){

alert("Hello World");

}

</script>

1

<input type="text"onkeyup="func()">

Using this event we perform some action when a key is up after pressed. Like in example above, an input box and onkeyup event is triggered on that input box. When user tries to enter some value first time, press any key and then release it, this event handler run and show an alert box. onkeydown is almost same as when the key is pressed event handler will be called.

5. oninput()

This is similar as onkeyup and onkeydown events.

1

2

3

4

5

6

<input type="text"id="myInput"oninput="myFunction()">

<script>

functionmyFunction(){

alert("some input was enterd");

}

</script>

6. oncontextmenu()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<style>

div {

background:green;

border:2pxsolidblack;

padding:10px;

}

</style>

<div oncontextmenu="myFunction()">

<p>Right-clickinsidethisboxtoseethecontextmenu</p></div>

<script>

functionmyFunction(){

alert("You right-clicked inside the div!");

}

</script>

This event occurs when user right click on the element in div.

7. onmouseover()

1

2

3

4

5

6

<button onmouseover="func()">DontHoverMe</button>

<script>

functionfunc(){

alert("hello");

}

</script>

This event is similar to CSS hover property this event occurs when the user takes mouse on the element where this event is set to be triggered.

8. onsubmit()

1

2

3

4

5

6

7

8

9

<strong><form action=" "onsubmit="myFunction()">

Enter name:<input type="text"name="fname">

<input type="submit"value="Submit">

</form>

<script>

functionmyFunction(){

alert("The form was submitted");

}

</script></strong>

This is a form event occurs when a form is submitted. Usually it is used to check and validate form inputs.