Solved

event delegation

Posted on 2012-04-04

JavaScript

1 solution

183 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 ?

Comment

Question by:Rozamunda

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

1 Comment

LVL 82

Accepted Solution

by:leakim971

leakim971 earned 500 total points

ID: 378088292012-04-04

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

Featured Post

Question has a verified solution.

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

2D Arrays in JavaScript

Article by: DanRollins

This article shows how to create and access 2-dimensional arrays in JavaScript. It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …

JavaScript

Common Sense Examples Using Checkboxes with HTML, JavaScript and PHP

Article by: Ray

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many. But the PHP code for processing the checkboxes can be confusing at first. What if a checkbox is…

Introduction to jQuery (Part 1)

Video by: Jason

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)

Introduction to jQuery (Part 2)

Video by: Jason

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…