Results 1 to 4 of 4

Thread: .click() function without jquery :D

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,531
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default .click() function without jquery :D

    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)
    Last edited by keyboard; 09-13-2012 at 04:01 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 09-05-2012 at 03:46 PM. Reason: add String version
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,531
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 09-09-2012 at 06:59 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. js function to click content off?
    By mistermick in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-17-2012, 08:24 PM
  2. click function problem
    By The_Alligator in forum JavaScript
    Replies: 3
    Last Post: 07-01-2010, 03:24 AM
  3. jquery execute $.post on second click in IE
    By genia in forum JavaScript
    Replies: 0
    Last Post: 10-21-2008, 02:52 PM
  4. Buttons with on click function
    By jamespbyrne in forum JavaScript
    Replies: 4
    Last Post: 08-08-2008, 05:17 AM
  5. mouseover and click function
    By rich1234 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-09-2007, 05:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •