Solved

event delegation

Posted on 2012-04-04
1
176 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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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 …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now