The DOM Level 3 specification has a section (1.2.2.2) that talks briefly about "groups" of event listeners. What does this mean? Is this similar to attaching event listeners with a namespace, as in jQuery: "event.my_namespace"?
View 2 Replies
I feel like I must be missing something simple but I can't put my finger on it...
I'm moderately new to JS (programmed in other languages though) and am working on a Google Maps project.
This piece of code should show an alert of the region's name when a map polygon is clicked. Instead, no matter what polygon is clicked, it only does the name for the LAST iterated placemark. code...
What am I missing? What would be a better way of handling this?
Does anyone know where I can find a complete list of DOM/DHTML event types documented?
I'm trying to learn more about advanced event handling in JavaScript and I'd like to find lists of event types that I can attach/add event listeners to. I've been searching around and I've found a few resources, but nothing that seems complete.code...
Here's the situation: I have a javascript object for controlling a custom DHTML scrollbar. So that I can use more than one on a page, the event listeners need to be passed a reference to the particular instance of the object that each needs to connect to, but as I discovered the hard way, inside an event listener, 'this' returns a reference to the DOM object throwing the event, rather than to the JS object. Short of coming up with a linked list of different objects and having the event handler search through it for the right object when an event is generated, then writing a reference to that object to some global variable, is there any convenient way to tie this together? I hope I've made myself clear enough...
View 5 Replies View RelatedI have a lightbox script, that I want to attach to an event to recall it based on values changed.Could you tell me why this works:
$("a[rel^='prettyPhoto']").prettyPhoto();
Opposed to this:
$("a[rel^='prettyPhoto']").click(function(){$(this).prettyPhoto();});
Or this:
$("a[rel^='prettyPhoto']").click(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});
I'm having problems removing the event listeners, they dont seem to be removed
(I am currently only checking for non-ie browsers) code...
So I know all about the caviats of the 'this' keyword when calling object functions from event listeners:
Code:
var foo = {bar: true, zoo: function() { return this.bar; }};
foo.zoo();
> true
a = foo.zoo;
a();
>
And I know that I can get around this by using an anonymous function so that 'this' is preserved in it's original context:
[Code]...
But then someone pointed out this article on memory leaks when using anonymous functions to call object methods because the anonymous function gets access to ALL variables in the enclosing environment and my not be properly disposed of by the garbage collector [URL] So that lead me to think about using a "3rd-person" approach to referencing object properties from within object methods.
[Code]...
I have PHP file called file1.php with an empty <div></div> in the middle. I've added a 'load' event listener so that on page load, it calls an AJAX function that calls file2.php. file2.php creates a table and loads it into the <div></div> in file1.php.
file2.php has <a> tags in it's <th> columns and I wish to trap when a user clicks on the column heading. The old way was to use the onclick() method but I'd rather use event listeners.
Here's my problem. I am getting "obj has no properties" when trying to add those listeners. I *think* it is because the code in file2.php isn't part of the original DOM tree for file1.php. So how can I use event listeners instead of onlclick()? I know I can add top the DOM by creating elements and appending them but that adds to the HTML code and my code is already in place via the AJAX call. What to do...? DO I just use the old passe onclick() method?
I'm trying to add event listeners to multiple elements of the same class. The DOM is something like this [code]...
View 5 Replies View RelatedWhen catcheck1 is unchecked, I want catcheck9 to uncheck. Why does this not work?
<html><head>
<script type="text/javascript">
// Checkbox event listeners.
function checkboxs() {
document.mapform.catcheck9.checked = false;
}
</script></head><body>
<form action="" name="mapform" id="mapform">
<input type="checkbox" id="catcheck1" name="catcheck9" onclick="checkboxs()" checked />
<input type="checkbox" id="catcheck9" name="catcheck9" checked />
</form></body></html>
I have a piece of javascript which does not work as intended. The code is:
var v = document.getElementById('ReportViewer1');
if (v) { v.ClientController.CustomOnReportLoaded = endPoll;
}
The endPoll event handler should be added to the list of event handlers for CustomOnReportLoaded. In the code about, it removes all other event handlers and just adds itself. Looking through JQuery i found:
$('#foo').bind('click', function() {
alert($(this).text());
});
this will add the new event handler to the collection of event handlers already attached to the click event.how do I select the ClientController through JQuery's selectors?
I've got an ASP.net repeater which has an unknown number of rows, that I'm passing as a variable into the client-side code. Each repeater item has two dropdowns in it, one of which I need to attach to a jQuery event to create a cascading dropdown. I've put the change(function() { into a for..next loop, along with the target control. It's not pretty, but it seems logical. Problem I have is whenever the function is called, the ID of the target control is the max value of the loop + 1. Why is my loop variable behaving like a reference type instead of a value type? Why is it even in scope outside the loop? Alternatively, is there a better way to do this? The code:
var rows = 4; // this is populated from the server code
for (iLoop = 0; iLoop<rows; iLoop++) {
$('#ctl00_repCBSkills_ctl0'+iLoop+'_ddlSkillCategory_ID').change
(function() {
[Code].....
I am creating JS objects that have some properties that contain DOM nodes, and some of these DOM nodes have event listeners attached to them. When I delete such objects, do I first need to remove the event listeners attached to some of the DOM nodes? And do I need to use removeChild on the DOM nodes that are properties of the object? Or does JavaScript take care of all that?
View 1 Replies View RelatedI need to attach a javascript function I wrote to the onChange event of
a <select> tag. However, I'm using a 3rd party tool that creates the
html files - it only lets me add bits of html to it, I can't touch the
elements it produces, so I can't just add an onChange="myfunction"
attribute to that <select> tag. I can't change the onload attribute of
the <body> tag.
How can I run code that attached my function to that event?
I got this problem with live() event.I have used it as follows.
$(".addressDiv span").live("mouseover", function(){
//clickable function here......
------------------------
});
I have used the live() event to trigger the function on mouseover in the dynamically added elements. But the problem i got is that once the live event is called it takes the class of the element and stores. And when the class of that particular element is changed dynamically the live() event does not detect the new classed added dynamically, instead it takes the former class. Live() event does not update the class.
I have an iframe that includes a button:
<input type="button" value="close this window" onclick="window.close();" >
I would like to detect the iframe close event from the parent window, I
was using this code but I did something wrong because the temp function
is fired every time the parent page loads:
function temp(){
alert('the iframe was closed');
}
function setup(){
var myIFrame = document.getElementById("iframe1");
if (myIFrame.addEventListener) {
myIFrame.addEventListener('onclose', temp(), false);
}else if (myIFrame.attachEvent) {
myIFrame.attachEvent ('onclose',temp);
}else{
myIFrame.onclose=temp();
}
}
window.onload=setup;
how can i know the original element that raised the event if that event is propagated up the tree ?
View 6 Replies View RelatedAs far as I understood, stopPropagation() is supposed to stop events bubbling 'up' though the element tree (through parent elements). Eg. If I use stopPropagation() on a click event on an anchor element in a list, the event would not be triggered on the list. In my code I have a popup div, that needs to have stopPropagation(), as a click on the document (everywhere other than the popup) will hide it. When I add an element to the popup that has a live click event, the live click event is never called, even though it is a child element of the popup. Shouldn't the live click get called first? If I remove the stopPropagation all is well.. some code:
$('#a_test_link').live("click", function(e){
e.preventDefault();
alert('done!');
});
[Code].....
I'm currently facing a weird issue with the onchange event. I have a web application where each blur event makes a call the webserver to store the value of the textfield. I only want to trigger that ajax call when something has changed, so i track the onchange event on each textfield to set a flag if something has changed.
The onchange event always fires to first time when i click outside of a textfield even if i didn't change anything in the field.
I narrowed it down to the following: A prefilled textfield always fires the onchange-event the first time you leave the textfield. An initially empty textfield does not fire the onchange event.
Sample code (IE 8 on Windows 7 computer):
script:
HTML:
Is there a generic way to fire an event when the state/value of a checkbox is changed by another event - i.e. not a user action. In this scenario, I have a set of checkboxes with a "select all" checkbox. I have the code written such that checking or unchecking the "select all" checkbox updates the state of all of the checkboxes below.
The extra requirement here is that some of these checkboxes have "children". So, when you check one of these, its children are automatically checked as well. So, what I need to do is check the main "select all" checkbox, which would then check all of the immediate children, which would then check all of their immediate children. I tried both an onchange and onclick event, but neither seem to be firing.
<html>
<head>
<script src="/scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
[code]....
look at this script :
$(function(){
$('input').bind('keypress',null,b).bind('change',null,a);
});
function a(){
[Code].....
this script bind both keypress and change of the text box to functions b and a. at keypress event handler if user type a char on input box the value of input box change to x and the user char discarded. In this case we expected to run the onchange (change) event because the textbox value is changed BUT this doesn't happen.
I have an object that has a click event I'm trying to trigger. However in the click event I have the following if statement:
if(event.button != 0){return true;}
This if statement allows right clicks to go through and activate but it also prevents me from triggering the event. Any ideas on how to prevent this? If I remove the if statement from the first click function everything works as intended.Here's my example code based off of the trigger event examples:
<!DOCTYPE html>
<html>
<head>
[code]....
This is just a page swapping images on the mouseover event, but i want to remove the mouseover events from all links when the the on click function is triggered, this is the html code,
View 3 Replies View RelatedI tried 2 smilar code.
first one :
In this code first 111 message is shown then the other is shown. everything is ok for me in this code.
Then i tried second code.
But in this code 111 message is not shown. What is the problem. my aim for this code, calling same event in one <script> tags. How can i do this?
currently on our site we have and expanding <div> that responds to both the onmouseover and onmouseout events. It works wonderfully.
The UX people now would like the expanding <div> to open with the onclick event and then as soon as the mouse leaves the expanded div, it would close. I have tried using the onmouseout event in conjunction the onclick event but it does not work (the div persists).
Is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event.
For example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked.
