Solved

event delegation

Posted on 2012-04-04
1
178 Views
Last Modified: 2012-04-04
I have a table 'tabelka' and first column is checkboxes. How to delegate event in the most effective way ? I came up with something like this, but it slows down when i have 3000 records on the page
document.getElementById("tabelka").onclick = function(e)
	{
		
		
		e = e || window.event;
		var target = e.target || e.srcElement;
		
		if (target.tagName == 'INPUT') {
		if (target.checked)	
		{    target.setAttribute("checked", "checked");
		   target.checked = true;
		   
  				  			     
		} else {	
			 document.getElementById('mainchk').checked = false;
			 target.removeAttribute("checked"); 
		
			
			 			 
			} 
		}
		
	//	alert(target.id);
		
		
		if (typeof e.preventDefault === 'function') {
	 	 
			e.stopPropagation();
			} else {
 
			e.cancelBubble = true;
			}
		
	}

Open in new window


My table has thead, tbody. I am only interested in the first column of tbody.
the fields in the header have onclick event attached to perform sorting . Maybe I should delegate those events also ?
0
Comment
Question by:Rozamunda
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 37808829
check this : http://jsfiddle.net/3RdcL/
    window.onload = setClickOnCheckboxFirstBodyColumn;

    function setClickOnCheckboxFirstBodyColumn() {
        var rows = document.getElementById("tabelka").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
        for(var i=0;i<rows.length;i++) {
            rows[i].getElementsByTagName("input")[0].onclick = function() {
            //rows[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].onclick = function() {
                if(!this.checked) document.getElementById('mainchk').checked = false;    
            }
        }
    }¿

Open in new window


If needed call the function setClickOnCheckboxFirstBodyColumn each time you update dynamically your table. (Ajax callback?)
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can i get the length? 7 33
Refresh div via ajax without lost ccs <li> styles 8 34
where is team.js? 3 25
How to create a textarea which saves text in HTML 8 37
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question