PDA

View Full Version : Resolved .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 -

<!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>


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:


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:


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):


<!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:


<!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>