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;
3 answers
solution1
24 ACCPTED 2012-03-21 07:39:14
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)
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>
solution2
6 2012-03-21 07:47:31
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);
}
}
solution3
1 2012-03-21 08:10:11
Add a tabIndex attribute to your p element, then you can use the onfocus function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
React dynamically add html element with event handler
Add event handler to an element that not yet exists using on()?
resharper 9 added spaces in javascript event handler for html element
Add event handler to element in tinyMCE
Javascript checking event handler in element
Where to add an event handler in javascript?
How to add an event handler in Javascript?
Javascript How to add an html element using javascript
How to add a javascript event handler using asp.net ajax
how to add confirm functionality in a button event handler using javascript?
Related Tags