I have one input which have event listener onblur and button which have event listener onclick.
This is how I organized it
document.addEventListener("DOMContentLoaded", function() {
window.searchButton = document.getElementById("searchButton");
window.searchInput = document.getElementById("searchInput");
searchInput.onfocus = searchFocus;
searchInput.onblur = searchBlur;
searchButton.onclick = search;
});
var resize = function(self, newSize) {
self.setAttribute("size", newSize);
};
var searchFocus = function() {
event.stopPropagation();
resize(searchInput, 30);
};
var searchBlur = function() {
if (searchInput.value === "") {
resize(searchInput, 10);
}
};
var search = function() {
event.stopPropagation();
};
But when the input is focused and I am clicking on the button, working onblur function, but onclick function isn't working. Why and how can I fix that?
Your search callback should have event in its param list. Same is true for searchFocus
var search = function(event){
event.stopPropagation();
};
Also, you might want to check that your DOMContentLoaded handler is firing. Depending upon how your scripts are organized/loaded, it is possible that the DOM has already loaded and that event fired before you register the handler. That's a common oversight.
How to detect if DOMContentLoaded was fired
Related
Here is an event listener added, if I want to test if this event listener is working or not, how do I test? window.postMessage doesn't seem to be triggering this event. Basically, how do I trigger "some_event" so that my EventListener runs?
window.addEventListener('some_event', function() {
console.log("some_event triggered");
});
Please note, I was able to reproduce with "click" event, but what I want to know is, how do I know if any string is passed as an event. Example:
window.addEventListener('add_to_cart', function() {
console.log("some_event triggered");
});
So I would like to simulate this event listener to check if it's working or not. How do I test this?
You need to use some concrete event name like for example click - and click on browser page window - eg:
window.addEventListener('click', function() {
console.log("some_event triggered");
});
Here is some info about events and situations when they are trigger.
After question update
Yes you can define and fire arbitrary events - read here. And here is some example code:
var event = new Event('some_event');
// Listen for the event.
window.addEventListener('some_event', function (e) {
console.log('some_event triggered')
}, false);
// Dispatch the event.
window.dispatchEvent(event);
So you fire event using window.dispatchEvent(event) and this is the way you can test it.
You can trigger an event using dispatchEvent and fireEvent in IE.
var ev, element = window;
if (document.createEvent) {
ev = document.createEvent("HTMLEvents");
ev.initEvent("eventname", true, true);
ev.eventName = "eventname";
element.dispatchEvent(ev);
} else {
ev = document.createEventObject();
ev.eventType = "eventname";
ev.eventName = "eventname";
element.fireEvent("on" + ev.eventType, event);
}
function triggerEvent(elem, name){
var ev;
if (document.createEvent) {
ev = document.createEvent("HTMLEvents");
ev.initEvent(name, true, true);
ev.eventName = name;
elem.dispatchEvent(ev);
} else {
ev = document.createEventObject();
ev.eventType = name;
ev.eventName = name;
elem.fireEvent("on" + ev.eventType, event);
}
}
window.addEventListener("click", function(e){
console.log("Clicked");
});
window.addEventListener("custom_event", function(e){
console.log("custom_event triggered");
});
triggerEvent(window, "click");
triggerEvent(window, "custom_event");
var event = new CustomEvent("custom-event", {bubbles:true, detail:"something"});
var eleA = document.getElementById("A");
var eleB = document.getElementById("B");
eleB.addEventListener("custom-event", function(e) {
console.log("custom-event caught in element B", e.detail);
});
document.addEventListener("custom-event", function(e) {
console.log("custom-event caught in document", e.detail);
});
eleA.dispatchEvent(event);
<html>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
I have searched past questions but could not find an answer. I have an element A that triggers a custom event and would like another element B to receive the event and act on it. for example:
var event = new CustomEvent("new-event");
var eleA = document.querySelector("#A");
eleA.dispatchEvent(event);
//...
// somewhere else
...
var eleB = document.querySelector("#B");
eleB.addEventListener("new-event", function(e) {
console.log('heard');
});
I find that the event is not triggered. I tried adding:
var event = new CustomEvent("new-event", {bubbles:true});
but no difference, but however, if I change the listener to as below it works:
document.addEventListener("new-event", function(e) {
console.log('heard in document');
});
Is it because of some propagation issue? Isn't there a way I can only listen for it in one or more specific elements?
You're confusing the use of dispatchEvent function.
.dispatchEvent()
Dispatches an Event at the specified EventTarget, invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
A custom event is dispatched to the listeners of a specific target object. It is not dispatched to all listeners of that event no matter which object the event is dispatched to or which object is being listened to? It basically works exactly like a 'click' event works. The event is dispatched only to a specific object and only the listeners for that event attached to that specific object. Reference
The events will be dispatched using the context of an element and every element listening to that specific event will receive the notification. So, you're not attaching
The notification will be received through the used callbacks in addEventListener() function.
This code snippet shows how elementA, elementB, and document are listening to the same new-event event:
var event = new CustomEvent("new-event");
var eleA = document.querySelector("#A");
eleA.addEventListener("new-event", function(e) {
console.log('new-event from Element A');
});
eleA.dispatchEvent(event);
var eleB = document.querySelector("#B");
eleB.addEventListener("new-event", function(e) {
console.log('new-event from Element B');
});
eleB.dispatchEvent(event);
document.addEventListener("new-event", function(e) {
console.log('heard in document');
});
document.dispatchEvent(event);
<span id='A'></span>
<span id='B'></span>
This code snippet shows how the elements listen to their own Events:
var event = new CustomEvent("new-event");
var eleA = document.querySelector("#A");
eleA.addEventListener("new-event", function(e) {
console.log('new-event from Element A');
});
var eventB = new CustomEvent("new-eventB");
var eleB = document.querySelector("#B");
eleB.addEventListener("new-eventB", function(e) {
console.log('new-event from Element B');
});
var eventDoc = new CustomEvent("new-eventDoc");
document.addEventListener("new-eventDoc", function(e) {
console.log('heard in document');
});
eleA.dispatchEvent(event);
eleB.dispatchEvent(eventB);
document.dispatchEvent(eventDoc);
<span id='A'></span>
<span id='B'></span>
You can create a SharedResource object to notify an event to specific receivers.
This code snippet shows you how:
eleA notify to eleB and document.
eleC notify to eleB.
//This Object represents a shared result among receivers.
var SharedResource = function(event) {
this.event = event;
this.receivers = [];
this.addReceiver = function(receiver) {
this.receivers.push(receiver);
}
this.addReceivers = function(receivers) {
this.receivers.push.apply(this.receivers, receivers);
}
//This function will loop over receivers array to call the current event.
this.notify = function() {
var $self = this;
this.receivers.forEach(function(receiver) {
receiver.dispatchEvent(new CustomEvent($self.event));
});
}
};
//Element A will send a "broadcast" message to eleB and Document.
var eleA = document.querySelector("#A");
eleA.addEventListener("click", function(e) {
ABDocSharedResource.notify();
});
var eleB = document.querySelector("#B");
eleB.addEventListener("new-event", function(e) {
console.log('new-event from Element B');
});
document.addEventListener("new-event", function(e) {
console.log('new-event from Document');
});
var ABDocSharedResource = new SharedResource('new-event');
ABDocSharedResource.addReceivers([eleB, document]);
//Element C will send a "broadcast" message to eleB.
var CBSharedResource = new SharedResource('new-event');
CBSharedResource.addReceiver(eleB);
var eleC = document.querySelector("#C");
eleC.addEventListener("click", function(e) {
CBSharedResource.notify();
});
<a href="#" id='A'>Click me! (A) - Broadcast to B and Document</a>
<br>
<a href="#" id='C'>Click me! (C) - Broadcast to B</a>
<span id='B'></span>
I'm trying to remove an event listener after a function has been called. But the event listener for "keyup" stays attached to the body, no matter what I try. What is wrong with the code?
function displayImage() {
//this is a simplified version of the code
var outerFrame = document.createElement('div');
outerFrame.className = 'popup-outer';
document.body.appendChild(outerFrame);
document.body.addEventListener('keyup', hideImage.bind(outerFrame), false);
}
function hideImage(e) {
if (e.keyCode === 27) {
// this doesn't work, it stays attached to the body element
document.body.removeEventListener('keyup', hideImage, false);
document.body.removeChild(this);
}
e.preventDefault();
}
It's because technically
hideImage.bind(outerFrame)
is different from
hideImage
because the first one returns a copy of the function hideImage.
So when you try to unbind hideImage, the event manager does not find it because it registred a copy of it and thus nothing is removed :-/.
EDIT :
In your case, I guess you have no other choice but keeping track of your listeners. I went ahead and made this quickly, it should fix your problem.
var listeners = {};
function createDiv() {
var outerFrame = document.createElement('div');
outerFrame.className = 'popup-outer';
return outerFrame;
}
function displayImage() {
var div = createDiv();
bindEvent(div);
document.body.appendChild(div);
}
function bindEvent(el) {
var handler = function(e) {
hideImg.call(el, e);
}
listeners[el] = handler;
document.body.addEventListener('keyup', handler, false);
}
function hideImg(e) {
if (e.keyCode === 27) {
// listeners[this] refers to the "private" handler variable we created in the bindEvent function
document.body.removeEventListener('keyup', listeners[this], false);
delete listeners[this];
document.body.removeChild(this);
}
}
I am struggling to understand how a custom event type is linked to a specific user action/trigger. All documentation seems to dispatch the event without any user interaction.
In the following example I want the event to be dispatched once a user has been hovering on the element for 3 seconds.
var img = document.createElement('img');img.src = 'http://placehold.it/100x100';
document.body.appendChild(img)
var event = new CustomEvent("hoveredforthreeseconds");
img.addEventListener('hoveredforthreeseconds', function(e) { console.log(e.type)}, true);
var thetrigger = function (element, event) {
var timeout = null;
element.addEventListener('mouseover',function() {
timeout = setTimeout(element.dispatchEvent(event), 3000);
},true);
element.addEventListener('mouseout', function() {
clearTimeout(timeout);
},true);
};
I have a trigger but no logical way of connecting it to the event.
I was thinking about creating an object called CustomEventTrigger which is essentially CustomEvent but has a third parameter for the trigger and also creating a method called addCustomEventListener, which works the same as addEventListener but when initialised it then passes the target Element to the custom event trigger which then dispatches the event when it's instructed to.
Custom events have to be triggered programatically through dispatchEvent, they are not fired by the DOM. You will always need to explictly call them in your code, such as in response to a user-generated event such as onmouseover, or a change of state such as onload.
You're very close to a working implementation, however you're immediately invoking dispatchEvent in your setTimeout. If you save it into a closure (as below) you can invoke dispatchEvent while passing your element after setTimeout has finished the timeout.
It's also good practice to declare your variables at the top of a file, to avoid possible scope issues.
var img = document.createElement('img'), timeout, event, thetrigger;
img.src = 'http://placehold.it/100x100';
document.body.appendChild(img);
img.addEventListener("hoveredForThreeSeconds", afterHover, false);
thetrigger = function (element, event) {
timeout = null;
element.addEventListener('mouseover',function() {
timeout = setTimeout(function(){ element.dispatchEvent(event) }, 3000);
},true);
element.addEventListener('mouseout', function() {
clearTimeout(timeout);
},true);
};
function afterHover(e) {
console.log("Event is called: " + e.type);
}
event = new CustomEvent("hoveredForThreeSeconds");
thetrigger(img, event);
I have created a method called addCustomEventListener, which works the same as addEventListener but when initialised passes the target Element to the custom event trigger which dispatches the event when it says, so in this case it only dispatches if the timeout reaches 3 seconds.
var img = document.getElementById('img');
window.mouseover3000 = new CustomEvent('mouseover3000', {
detail: {
trigger: function(element, type) {
timeout = null;
element.addEventListener('mouseover', function() {
timeout = setTimeout(function() {
element.dispatchEvent(window[type])
}, 3000);
}, false);
element.addEventListener('mouseout', function() {
clearTimeout(timeout);
}, false)
}
}
});
window.tripleclick = new CustomEvent('tripleclick', {
detail: {
trigger: function(element, type) {
element.addEventListener('click', function(e) {
if(e.detail ===3){
element.dispatchEvent(window[type])
}
}, false);
}
}
});
EventTarget.prototype.addCustomEventListener = function(type, listener, useCapture, wantsUntrusted) {
this.addEventListener(type, listener, useCapture, wantsUntrusted);
window[type].detail.trigger(this, type);
}
var eventTypeImage = function(e) {
this.src = "http://placehold.it/200x200?text=" + e.type;
}
img.addEventListener('mouseout', eventTypeImage, false);
img.addEventListener('mouseover', eventTypeImage, false);
img.addCustomEventListener('mouseover3000', eventTypeImage, false);
img.addCustomEventListener('tripleclick', eventTypeImage, false);
<img id="img" src="http://placehold.it/200x200?text=No+hover" ;/>
I think this could be useful to others so please feel free to improve on this.
I have an element on my page that I need to attach onclick and ondblclick event handlers to. When a single click happens, it should do something different than a double-click. When I first started trying to make this work, my head started spinning. Obviously, onclick will always fire when you double-click. So I tried using a timeout-based structure like this...
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
el.onclick = function() {
timer = setTimeout(function() { alert('Single'); }, 150);
}
el.ondblclick = function() {
clearTimeout(timer);
alert('Double');
}
}
But I got inconsistent results (using IE8). It would work properly alot of times, but sometimes I would get the "Single" alert two times.
Has anybody done this before? Is there a more effective way?
Like Matt, I had a much better experience when I increased the timeout value slightly. Also, to mitigate the problem of single click firing twice (which I was unable to reproduce with the higher timer anyway), I added a line to the single click handler:
el.onclick = function() {
if (timer) clearTimeout(timer);
timer = setTimeout(function() { alert('Single'); }, 250);
}
This way, if click is already set to fire, it will clear itself to avoid duplicate 'Single' alerts.
If you're getting 2 alerts, it would seem your threshold for detecing a double click is too small. Try increasing 150 to 300ms.
Also - I'm not sure that you are guaranteed the order in which click and dblclick are fired. So, when your dblclick gets fired, it clears out the first click event, but if it fires before the second 'click' event, this second event will still fire on its own, and you'll end up with both a double click event firing and a single click event firing.
I see two possible solutions to this potential problem:
1) Set another timeout for actually firing the double-click event. Mark in your code that the double click event is about to fire. Then, when the 2nd 'single click' event fires, it can check on this state, and say "oops, dbl click pending, so I'll do nothing"
2) The second option is to swap your target functions out based on click events. It might look something like this:
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can stop it
if(firing)
return;
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
el.ondblclick = function() {
firingFunc = doubleClick;
// Now, when the original timeout of your single click finishes,
// firingFunc will be pointing to your doubleClick handler
}
}
Basically what is happening here is you let the original timeout you set continue. It will always call firingFunc(); The only thing that changes is what firingFunc() is actually pointing to. Once the double click is detected, it sets it to doubleClick. And then we always revert back to singleClick once the timeout expires.
We also have a "firing" variable in there so we know to intercept the 2nd single click event.
Another alternative is to ignore dblclick events entirely, and just detect it with the single clicks and the timer:
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can set it to doubleClick
if(firing){
firingFunc = doubleClick;
return;
}
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
}
This is untested :)
Simple:
obj.onclick=function(e){
if(obj.timerID){
clearTimeout(obj.timerID);
obj.timerID=null;
console.log("double")
}
else{
obj.timerID=setTimeout(function(){
obj.timerID=null;
console.log("single")
},250)}
}//onclick
Small fix
if(typeof dbtimer != "undefined"){
dbclearTimeout(timer);
timer = undefined;
//double click
}else{
dbtimer = setTimeout(function() {
dbtimer = undefined;
//single click
}, 250);
}
, cellclick :
function(){
setTimeout(function(){
if (this.dblclickchk) return;
setTimeout(function(){
click event......
},100);
},500);
}
, celldblclick :
function(){
setTimeout(function(){
this.dblclickchk = true;
setTimeout(function(){
dblclick event.....
},100);
setTimeout(function(){
this.dblclickchk = false;
},3000);
},1);
}
I found by accident that this works (it's a case with Bing Maps):
pushpin.clickTimer = -1;
Microsoft.Maps.Events.addHandler(pushpin, 'click', (pushpin) {
return function () {
if (pushpin.clickTimer == -1) {
pushpin.clickTimer = setTimeout((function (pushpin) {
return function () {
alert('Single Clic!');
pushpin.clickTimer = -1;
// single click handle code here
}
}(pushpin)), 300);
}
}
}(pushpin)));
Microsoft.Maps.Events.addHandler(pushpin, 'dblclick', (function (pushpin) {
return function () {
alert('Double Click!');
clearTimeout(pushpin.clickTimer);
pushpin.clickTimer = -1;
// double click handle here
}
}(pushpin)));
It looks like the click event masks the dblclick event, and this usage is clearing it when we add a timeout. So, hopefully, this will work also with non Bing Maps cases, after a slight adaptation, but I didn't try it.