.click() function without jquery :D

**keyboard** · 09-05-2012, 09:44 AM

I'm trying to mimick the jquery function click().
This is my code -

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="global.js"></script>
<script type="text/javscript">
document.getElementById('test').click(function() {alert('hello')});
</script>
</head>
<body>
<div id="test">Fading JavaScript Example</div>
</div>
</body>
</html>

Code:

function click(func) {
	this.onclick = function() {
		if(typeof func != "undefined") {
			func();
		}
	}
}

But it doesn't work... (nothing happens;no errors)

**jscheuer1** · 09-05-2012, 10:18 AM

You would want a prototype. But the Object/Element prototypes aren't supported in all browsers. That's why jQuery creates its own object 'class' for all selectors and makes click() among other things a prototype of that 'class'. Remember, $('#someid') is not the same as document.getElementByID('someid').

Anyways, in at least some browsers you can do like:

Code:

Object.prototype.click = function(func) {
	this.onclick = function() {
		if(typeof func === "function") {
			func();
		}
	}
};

I'm not sure if that would work exactly. If not, it's closer. Probably more like:

Code:

Object.prototype.click = function(func) {
	if(typeof func === "function") {
		this.onclick = func;
	}
};

And as I say, not supported in all browsers.

However, the String prototype is supported in all browsers, so one could do this (tested and works):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
	String.prototype.click = function(func){
		var el = document.getElementById(this);
		if(el){addEvent(el, 'click', func);}
	};
	var addEvent = (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, function(){var e = event; f.apply(el, [e]);});
		}:function(){return;};
	})();
})();
</script>
</head>
<body>
<a href="#" id="test">Test</a>
<script type="text/javascript">
('test').click(function(e){
	alert("I'm " + this.innerHTML + ', You Clicked Me!');
	e.preventDefault && e.preventDefault();
	e.returnValue = false;
});
</script>
</body>
</html>

**keyboard** · 09-05-2012, 10:31 PM

$('#someid') is not the same as document.getElementByID('someid').

How so?

**jscheuer1** · 09-06-2012, 03:51 AM

It's a jQuery style object/array containing one member - the element with that id and available to all of the jQuery methods that apply to such an object/array, whereas the getElementById version is a single element/object and available only to the methods that ordinary javascript has for such an element/object. It's true that as such it can be plugged into many jQuery methods, but it has to be $ signed before it will be able to use the full range of jQuery methods.

For example:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	alert(document.getElementById('test') == $('#test')); //js el doesn't equal a jq object containing it
	alert(document.getElementById('test').innerHTML == $('#test').html()); // the innerHTML of both is in this case is equal
	alert(document.getElementById('test') == $('#test').get(0));  // if we get(0) out of the jq object now they're equivalent
});
</script>
</head>
<body>
<div id="test">Hello World!</div>
</body>
</html>

Thread: .click() function without jquery :D

Thread Tools

Search Thread

.click() function without jquery :D

Similar Threads

js function to click content off?

click function problem

jquery execute $.post on second click in IE

Buttons with on click function

mouseover and click function

Bookmarks

Bookmarks

Posting Permissions