Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

event delegation

Posted on 2012-04-04

JavaScript

1 solution

Medium Priority

186 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 2000 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

Simplifying jQuery Ajax calls in JavaScript

Article by: Luis

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 …

JavaScript

Email any iFrame or Div as an email in your applications using javascript and forms

Article by: Shaun

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…

JavaScript

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…