We Keep Coding

Trigger JavaScript event if div innerText change

I want to make an alert when a div's innerText changes:
myDiv.addEventListener("change", function() {
if (myDiv.innerText != "some text")
alert('innerText has changed.');
},false);
Does not work.

myDiv.addEventListener("DOMCharacterDataModified", function (event) { // ... add your code he }, false);
use DOMCharacterDataModified to detect innerText change event

Posted on behalf of the OP.
I found a solution:
// THIRD FUNCTION (changes the text)
var i = 0;
function thirdFUN(){
i++;
var popo = document.getElementById('myDiv');
popo.innerText = i;
}
setInterval(thirdFUN, 500);
//---------------------------------------------------------------
// JQUERY
/*var popo = $('#myDiv');
$('#myDiv').bind("DOMSubtreeModified",function(){
if (popo.html() == "10")
console.log('changed');
});
*/
//---------------------------------------------------------------
// PURE JS
window.onload = function(){
var popo = document.querySelector('#myDiv');
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
console.log(mutation.type); // <- It always detects changes
if (popo.innerHTML == "10"){
alert('hello');
}
});
});
var config = {characterData: true, subtree: true};
observer.observe(popo, config);
//observer.disconnect();
}
This is also a JS Fiddle.

The change event isn't specified to fire at any point the text changes. It fires only when the textarea loses focus (the user clicks away or tabs away). So your event will only fire when this happens.
Aside from continually checking the value of the textarea with an interval, there is no elegant way to do this (to my knowledge).
Note in this fiddle that the change event only fires after the textarea has lost focus.
See this answer for more info...

Can't comment on the top answer since not enough reputation, but according to MDN, Mutation Events (so including DOMCharacterDataModified) were deprecated and shouldn't be used anymore. Luckily, you can get the same thing with Mutation Observers now.

try
document.addEventListener("change", function() ......

Avoid element blur handler when window blur invoked (browser loses focus)

To expound upon the question:
I've got an element which when clicked receives a sub-element. That sub-element is given a blur handler.
What I would like is for that handler not to be invoked when the browser loses focus (on window blur).
Towards that goal I've attempted several tacks, this being my current effort:
function clicked() {
// generate a child element
...
field = $(this).children(":first");
$(window).blur(function () {
field.unbind("blur");
});
$(window).focus(function () {
field.focus();
field.blur(function () {
save(this);
});
});
field.blur(function () {
save(this);
});
}
This doesn't work. What appears to be occurring is that when the browser loses focus, the field is losing focus first.

Nice question!
This is possible, and fairly straightforward.
field.blur(function() {
if(document.activeElement !== this) {
// this is a blur that isn't a window blur
}
});
JSFiddle
Or in vanilla JS:
field.addEventListener('blur', function() {
if(document.activeElement !== this) {
// this is a blur that isn't a window blur
}
});
Edit: Though your answer deals with the browser losing focus, know that Firefox has unusal behavior (bug?) when returning to focus. If you have a input focused, and then unfocus the window, the element's blur is triggered (which is what the question was about). If you return to something other than the input, the blur event is fired a second time.

A mildly dirty way to do this could be to use a setTimeout() prior to taking action.
var windowFocus;
$(window).focus(function() {
windowFocus = true;
});
$(window).blur(function() {
windowFocus = false;
});
function clicked() {
// generate a child element
...
field = $(this).children(":first");
field.blur(function () {
setTimeout(function() {
if (windowFocus) {
save(this);
}
}, 50);
});
}

Testing which element has focus when one lost it

What I am trying to do is to test when an element (a SELECT) loses its focus if the focus has been transfered to another specific element (another SELECT). I want to trigger something when the focus is lost and is not on one of the two.
The problem is I test in the first select when it has lost the focus (with the blur event) if the other select has it, but the DOM is not yet updated.
Here's an exemple of what I did:
$select1.on("blur", function() {
if($select2.is(":focus"))
{
// do something
}
else
{
// do something else
}
});
$select1 and $select2 are just two variables that contain the element. I read that JQuery adds an identifier ":focus" when an element gains the focus, but the way I did it, it doesn't work.
In all cases, it goes into the else "do something else".

Matt is right about the order of events but you can be a little more creative.
For example use a setTimeout to delay the check for blur so you know you already fired your focus. Simple.
$select1.on("blur", function() {
window.setTimeout(function() {
if($select2.is(":focus"))
{
// do something
}
else
{
// do something else
}
},100);
});
Try that one.

Because the blur event is distinctly fired before the focus of the new element is, the only thing you can do is set a variable in one event and detect it in the other.
$select1.on('blur', function (e) {
var $that = $(this);
setTimeout(function () {
if (($that.data('focussed') || 0) > e.timeStamp - 5) {
// Do something
} else {
// Something else
}
}, 1);
});
$select2.on('focus', function (e) {
$select1.data('focussed', e.timeStamp);
});
See it working here; http://jsfiddle.net/uZAMm/

Cancel an onBlur event in JavaScript?

I want to set up an onBlur event for an input element that validates the value and, if invalid, "cancels" the blur and refocusses the input. However returning false from onBlur does not cancel the onBlur the way it does with onClick. Is there a solution for this (perhaps using jQuery?)

I don't know of any reliable cross-browser way to do this. Usually setting a small timeout in the onblur event and calling focus() when the timer fires works.
For example:
document.getElementById('your_input_id').onblur = function() {
var self = this;
setTimeout(function() { self.focus(); }, 10);
}

You can call focus() in the handler.
This will sometimes help.

You can accomplish this by using jQuery's focus() function inside a zero-second timeout. Here's an example:
$('#my_input').bind('blur', function(event) {
var $input = $(this);
var is_input_valid = false;
// Code to determine if input is valid
// ...
if (!is_input_valid) {
setTimeout(function() {
$input.focus();
}, 0);
return false;
}
});

How to write onshow event using JavaScript/jQuery?

I have an anchor tag on my page, I want an event attached to it, which will fire when the display of this element change.
How can I write this event, and catch whenever the display of this element changes?

This is my way of doing on onShow, as a jQuery plugin. It may or may not perform exactly what you are doing, however.
(function($){
$.fn.extend({
onShow: function(callback, unbind){
return this.each(function(){
var _this = this;
var bindopt = (unbind==undefined)?true:unbind;
if($.isFunction(callback)){
if($(_this).is(':hidden')){
var checkVis = function(){
if($(_this).is(':visible')){
callback.call(_this);
if(bindopt){
$('body').unbind('click keyup keydown', checkVis);
}
}
}
$('body').bind('click keyup keydown', checkVis);
}
else{
callback.call(_this);
}
}
});
}
});
})(jQuery);
You can call this inside the $(document).ready() function and use a callback to fire when the element is shown, as so.
$(document).ready(function(){
$('#myelement').onShow(function(){
alert('this element is now shown');
});
});
It works by binding a click, keyup, and keydown event to the body to check if the element is shown, because these events are most likely to cause an element to be shown and are very frequently performed by the user. This may not be extremely elegant but gets the job done. Also, once the element is shown, these events are unbinded from the body as to not keep firing and slowing down performance.

You can't get an onshow event directly in JavaScript. Do remember that the following methods are non-standard.
IN IE you can use
onpropertychange event
Fires after the property of an element
changes
and for Mozilla
you can use
watch
Watches for a property to be assigned
a value and runs a function when that
occurs.

You could also override jQuery's default show method:
var orgShow = $.fn.show;
$.fn.show = function()
{
$(this).trigger( 'myOnShowEvent' );
orgShow.apply( this, arguments );
return this;
}
Now just bind your code to the event:
$('#foo').bind( "myOnShowEvent", function()
{
console.log( "SHOWN!" )
});

The code from this link worked for me: http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/
(function ($) {
$.each(['show', 'hide'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.trigger(ev);
return el.apply(this, arguments);
};
});
})(jQuery);
$('#foo').on('show', function() {
console.log('#foo is now visible');
});
$('#foo').on('hide', function() {
console.log('#foo is hidden');
});
However the callback function gets called first and then the element is shown/hidden. So if you have some operation related to the same selector and it needs to be done after being shown or hidden, the temporary fix is to add a timeout for few milliseconds.