What is the difference between them? Devdocs says that mousedown is part of the dom level 3 events (not entirely sure what this means either) but windows.mousedown is a separate page on devdocs. Are the two different somehow?
window is an object. An object contains information (values). The values in an object are formatted into name:value pairs, or often referred to as key:value, or property:value. If you see curly braces in JavaScript code {}, that's an object. If you log something to the web browsers window, console.log("some text" + myVariable); and see [object Object], then myVariable is an object. You can add a property:value pair to an object with: objName.property = value. window is an object. It's an object with values in it from your browsers window. When a function is assigned to window.somename:
window.mousedown = function() {statements here;}
That is putting the function into the window object. Objects can contain all sorts of stuff: other objects, arrays, values, and even functions. I'm explaining some background info for the sake of a more complete understanding.
Here is some documentation from Mozilla on functions and function scope:
Functions and Scope Mozilla
There is also ON mousedown
window.onmousedown
Is an event handler for the onmousedown event.
Window.onmousedown event handler
A function can be assigned to an event.
window.onmousedown will detect a mouse down event anywhere in the document. If you want to detect a mouse down event specific to a certain element, you'd probably put it into a button, or a image, or a input tag.
<label onmousedown='fncSendMail()'>
Example:
<script>
window.onmousedown = mousedown;
function mousedown() {
alert("mousedown event detected!");
};
</script>
<p>click anywhere to fire the mousedown event</p>
In the above example, onmousedown and mousedown are two different things. onmousedown is an event. mousedown is the name of the function.
So, what's the difference between mousedown and window.mousedown? window.mousedown is being added as a property:value pair to your browsers window object, mousedown isn't.
The DOM is the Document Object Model. It allows manipulation of the Document (Your web page.) The DOM is an API. It's an interface, which means that it's in between your code and your HTML allowing a connection between the two. Document Object Model Level 3
DOM mouseup W3.org
DOM mouse events
Related
When we say, DOM is loaded , I mean the DOM but not the page.
What happens in the browser! When DOM is loaded? Please can you be more precise.
thank you
"When the DOM is loaded but not the page" doesn't really mean much. As the HTML is loaded, the browser renders it as the static page you see on your screen. The DOM is the representation that allows interaction with those elements.
For example, I can create objects in JavaScript and then manipulate them, but I've only manipulated a simple object. A DOM object, looks like the same object, but it's tied to a correlating [X|XH|H]TML object; so that when I call a method on this object, it didn't just interact with a container of information but its constituent node on the page. Consequently, you can't use a DOM method on an element that hasn't been rendered yet.
Tangible example:
/* Manipulating a standard JavaScript object */
var obj = { firstProp: "InitialValue",
secondProp: "somethingelse",
aMethod: function(){ this.firstProp = "Changed" }
}
console.log(obj.firstProp); // Ouput is "InitialValue"
obj.aMethod();
console.log(obj.firstProp); // Output is "Changed", but nothing is effected other than that value
/* Here is a method called on a DOM element; pretend it's an input/text */
var obj2 = document.getElementById("testId");
obj2.value = "This is your new text box value";
In the second example, you see that I didn't just change an arbitrary object's value. I've change the HTML's rendered representation of that object.
That's the best way I can think to explain it at the moment.
GTM up and running, main UA tag in place along with a ClickListener tag.
To reduce the number of macros, i use dataLayer variable Macros for event category, action, label, value & interaction, so they can be used for many rules and tags.
So i want to collect data from one link/button (Add to Fav), i add a rule to listen for the click using {{event}} equals gtm.click and {{Event Label}} equals Add_to_Fav (the label i push to the DL via onclick.
All good so far, but i need to create another UA tag (Track Type - event) that fires on the rule made previously. And this is my question, using this method seems to create many tags. If i have another 20 links that i want to collect data from, do i need to keep creating tags like this. Surely, this will affect page load speed with many tags firing on all pages.
Hope thats all clear.
If you need to retrieve the link text to use it as an event label you do not need many many event tracking tags, that would be horribly verbose. Instead you can use a custom javascript macro - the cool thing about them being that you can use existing macros inside your custom function.
If you create a click listener or link click listener this will create a few macros - one of them is {{element}}, which is the DOM element that received a click.
Now you create a macro of the type "custom java script", which must contain an anonymous function with a return value.
The barebones version of a function that retrieves the text of a clicked link would be
function() {
var el = {{element}};
return el.innerText;
}
(actually you do not need the variable assigment, you could use {{element}}.innerText directly).
You name the macro e.g. Linktext and use the macro {{Linktext}} in your single event tracking tag where it will dynamically be set to the value of the text of the clicked link (although you might want to check cross browser support for innerText, or maybe use innerHTML instead which serves in you use case probably the same purpose).
I'm trying to define a click handler in a Mootools class. My handler presumes opening a block of links, each of which should be 'equipped' with its own click handler, which should trigger a link specific action. What I mean is let's suppose I have the following HTML code:
<div id="wrapper">
open options
<div class="optionsBlock" style="display:none">
1
2
3
</div>
</div>
Then I'm trying to define a class like this in Mootools:
var myHandler = new Class({
Implements : [Events],
initialize : function(element){
this.element = document.id(element);
this.elements = this.element.getChildren('a');
this.elements.addEvents('click', function(ev){
ev.preventDefault();
//'this' as a reference to the current element in the array, which is being clicked, correct?
this.getSibling('div.optionsBlock').setStyle('display', 'block');
var parentLink = this;
this.getSibling('div.optionsBlock').getChildren('a').addEvent('click', function(e){
e.preventDefault();
//should append the text of currently clicked link into the parent link
parentLink.appendText(this.get('text'))
});
});
}
});
new myHandler('wrapper');
This is just an illustration of how I can imagine the code should be like (and I'm sure this code is not good at all), but I really need some help regarding the following:
Since adding new events constatly changes the scope of 'this', how should I keep a reference both to the class instance and the element being clicked?
How should I modify the class in order not to have the entire code inside the initialize method? I tried to create separate methods for every event handler, but as a result I got confused with the scope of 'this', with binding and trying to get all of this together really annoys me, but I want to get a grip of this knowledge.
How to keep track of the scope of 'this' when adding nested event handlers inside a class? I honestly googled and searched for an answer but for no avail.
Thanks!
scope, take your pick - asked many many times - search here for [mootools]scope this:
Mootools class variable scope
mootools variable scope
Mootools - Bind to class instance and access event object
to recap:
use a saved reference var self = this; then reference self.prop or use the fn.bind pattern
add more methods. follow single responsibility principle. eg, in your class, create attachEvents: function() {} and have initialize call that.
by using the saved reference pattern. you can fix it upriver by delegating events as opposed to creating new event callbacks on parent clicks.
I'm looking for a way to create an event listener to a DOM object style.display property and fire a function if the property value changes.
E.g
<p id="example_p" style="display:none;">Some text</style>
I'd like that if some JS code in the page will manipulate the display value, a function will be executed.
Is this possible?
Thanks,
Roy
I want to attach a event to dynamically created element class.So i used live function but it was not triggered. So checked live function reference ,there i red below notes
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
so decide to use on function,But it still not working.The text field is already attached with jquery ui datpicker.On another element select i disabled that field.
jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');
after disabled if i click i want to show alert or tooltip.so i tried this,but not working
jQuery(".date_picker_disabled").on("click", function(event){
alert('hi');
});
What may be the problem
I am using jquery 1.7.1 ( jquery-1.7.1.min.js)
The problem is that jQuery(".date_picker_disabled") finds elements with that class and binds to them. If elements don't have the class at the time the binding is made, the events will not be handled.
The on function allows you to get round this by handling them on another element when the event "bubbles up to" a parent element. In this instance, we could say the body element – there may be a more specific common parent you could choose.
jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
alert('hi');
});
The event handler is now bound to the document.body element. All clicks that happen anywhere in the body are tested to see if they originated from an element matching the selector. If so, the handler is fired.
This is explained on the documentation for the on function. It is the same behaviour as was present in previous versions of jQuery with live and delegate functions.
Having taken another look at your code, you have disabled="disabled" set on your input element. click events are not fired on disabled elements.
This is tricky.
When your code runs, your element does not have .date_picker_disabled class so your jQuery(".date_picker_disabled") returns nothing and .on() is not called.
Apply .on() on the outer element and use the selector parameter:
// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
// do something
});
This will delegate the event to the <outer element>. The handler will only be executed if an element with class .date_picker_disabled has been clicked (second param).
From the documentation of .live():
Rewriting the .live() method in terms of its successors is
straightforward; these are templates for equivalent calls for all
three event attachment methods:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
So in your case, you would do:
$(document).on('click', '.date_picker_disabled', function(event){
alert('hi');
});
I was using jQuery 1.7.2 and tried all proposed methods:
Didn't work:
$(document.body).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
Didn't work:
$(document).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
None of them worked until I tried the following:
----- Worked! ----
$('body .collapsible-toggle').on('click', function() {
console.log('clicked');
});
Maybe you should do:
jQuery("body").on("click",".date_picker_disabled", function(event){
alert('hi');
});
in this way you attach the event handler to the bosy and specify to fire that event only when that selector ".date_picker_disabled" is matched.
BTW this is exactly how live() worked
try :
$(document.body).on( "click", ".date_picker_disabled", function() {
alert('hi');
});
document.body helps for dynamic html too.
Just chekc it out: .on not working on dynamic html