Add event handler to HTML element using javascript

Question

I want to add an event handler to a paragraph for when any user clicks on it. For example, I have a paragraph which would show an alert when a user clicks it, but without using "onclick" on HTML.

 <p id="p1">This is paragraph Click here..</p>
 <a href="http://www.google.com" id="link1" >test</a>
 document.getElementById('p1').onmouseover  = paragraphHTML;

This is paragraph Click here..
test – adilahmed Mar 21 '12 at 07:33 — adilahmed, Mar 21 '12 at 07:33

lvil · Accepted Answer · 2012-03-21T09:58:14.160

25

You can add event listener.
Smth. like this:

 var el = document.getElementById("p1");
if (el.addEventListener) {
        el.addEventListener("click", yourFunction, false);
    } else {
        el.attachEvent('onclick', yourFunction);
    }

(thanks @Reorx)

Explanation Here

Complete code (tested in Chrome&IE7):

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
        <script type="text/javascript">
            window.onload =function (){
            var el = document.getElementById("p1");
            if (el.addEventListener) {
                el.addEventListener("click", yourFunction, false);
            } else {
                el.attachEvent('onclick', yourFunction);
            }
            };
            function yourFunction(){
                alert("test");
            }
        </script>
    </head>
    <body>
        <p id="p1">test</p>

    </body>
</html>

edited Mar 21 '12 at 09:58

answered Mar 21 '12 at 07:39

lvil

4,326
9
48
76

Hi its working in firefox but Ie there is a problem its says Object doesn't support this property or method – adilahmed Mar 21 '12 at 08:03
you said you don't want "onclick" event to p1. Did u? el.addEventListener("click", yourFunction, false) is adding event to "onclick" – fengd Mar 21 '12 at 08:12
@Jun1st: mmm. you are right. as far as I understood adilahmed just didn't want it to be inline – lvil Mar 21 '12 at 08:32
Hi all i did like this for work in both firefox and Ie but its only woking in Firefox – adilahmed Mar 21 '12 at 09:01
@adilahmed: works perfect in Chrome. What error do you get? Where do you add the script? Inside window.onload function? – lvil Mar 21 '12 at 09:09
Hi check above its not wokring in IE – adilahmed Mar 21 '12 at 09:25
What is the `false` for? – Ali Nov 21 '14 at 12:49

score 6 · Answer 2 · answered Mar 21 '12 at 07:47

6

To suit most situations, you can write a function to handle this:

var bindEvent = function(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        element.attachEvent('on'+type, handler);
    }
}

answered Mar 21 '12 at 07:47

Reorx

2,801
2
24
29

In IE this function will find the element for binding has no attribute 'addEventListener', then the handler will be assigned to its 'onTYPE' attribute, eg, 'onclick'. – Reorx Mar 21 '12 at 08:28

score 1 · Answer 3 · edited Mar 21 '12 at 09:33

1

Add a tabIndex attribute to your p element, then you can use the onfocus function.

demo: http://jsfiddle.net/9y7CL/

edited Mar 21 '12 at 09:33

Waynn Lue

11,344
8
51
76

answered Mar 21 '12 at 08:10

fengd

7,551
3
41
44

Add event handler to HTML element using javascript

3 Answers3

Linked

Related