We Keep Coding

Javascript: Trigger 'change' eventlistener when updating <select> value

Note: Not using jQuery, before you mark this as a duplicate make sure other Q/A is pure JS.
I set my event listener like this, which works perfectly when triggered via html:
document.getElementById('activitySelector').addEventListener('change', function() {
console.log("I work triggered by html but not js")
}
I'm adding additional functionality where I change the select value via javascript, which works in that the html updates, but the eventListener is never triggered:
document.getElementById("activitySelector").value = interactiveType

To achieve what you want you should create the event manually and dispatch it. It's not difficult, as you could see here: http://www.2ality.com/2013/06/triggering-events.html?m=1

This is my initial solution. Just have the event handler trigger your code wrapped as a function. That way you can just call that same function when updating via javascript.
As #dfsq has pointed out this is just how it works. Manually triggering the event would probably take more code than this method:
// All code originally in eventListener now in function
function onActivityChange() {
console.log("I work triggered by html and js")
}
// Call above function from eventlistener
document.getElementById('activitySelector').addEventListener('change', onActivityChange)
// Trigger same function after updating value
document.getElementById("activitySelector").value = interactiveType
onActivityChange()

YUI3: How would I trigger an event?

Suppose I have a click event on a link/button/etc.
var myButton = Y.one('.button');
myButton.on('click', function() {
// code
});
There is something else happening on the page that I want to trigger a click event on this button. How would I do this?
I saw YUI3's fire() method, but it looked like that was designed for custom events. If I am supposed to use fire(), then will myButton.fire('click') work?
(I'm looking for the equivalent of jQuery's .trigger() method, which works on DOM events or custom events.)

If you are looking for equivalent of trigger in yui3 you can try using the 'simulate'
Y.one('button selector').simulate('click');
For the above statement to work you will need to add "node-event-simulate" roll up in the use method.

Do you really need to trigger the click event on the button? Take the HTML below
<button id="myButton">Click Me</button>
<br>
Click Me
You can make use of the custom events to put the real logic somewhere central.
YUI().use("node","event",function(Y){
Y.one("#myButton").on("click",function(){Y.fire("custom:doThing")});
Y.all("a").on("click",function(){Y.fire("custom:doThing")});
Y.on("custom:doThing",function(){console.log("Do my thing, regardless of event source")})
});
Fiddle: http://jsfiddle.net/WZZmR/

simulate onChange event to fire on HTML input box

I have jQuery that uses the change event from a selection box to update a input box on the form. I need the input box to fire it's change event when I update it's value.
This link on MSDN shows a way to simulate the click event. Is there a technique I can use to simulate a change event?

You can use trigger():
$('#input-id').trigger('change');

You can trigger change event handler. You can simply call it like that:
jQuery('#my_field').change();
which is a shortcut to:
jQuery('#my_field').trigger('change');
See more on the documentation of .change() (its third, attribute-less variation).

This should theoretically do it:
<input id="textinput" value="somevalue" name="somename" />
<script type="text/javascript">
function doSomethingOnInputChange(e) {
console.log('input on change');
}
$('#textinput').bind('change', doSomethingOnInputChange);
$('#textinput').trigger('change');
</script>
It binds an event handler to a custom 'change' event and then fires the event.

There are several good jQuery based answers already (though you didn't use a jQuery tag) but there's another approach that can work for you if you're binding the change event to call a function.
Say you've already bound the change event to the doSomethingOnInputChange function as in Vlad's answer...
Rather than simulating an event by triggering 'change' you can directly call doSomethingOnInputChange - that is, instead of doing:
$('#textinput').trigger('change')
your javascript just makes a call to the same function that gets called anyway when you trigger the event:
doSomethingOnInputChange( ... );
You may or may not want to pass the #textinput DOM element as a parameter in a direct call, or an event parameter (but providing your own event parameter makes this approach hardly worthwhile) -- those depend on what you need to do in the function.

Change onmouseover command with onclick event

I have the following line in my page:
<div id="fmeFriendStatus" style="width:589px;height:700px;overflow:auto" onmouseover="DelayedStatusRefresh()">
I want to be able to change:
onmouseover="DelayedStatusRefesh()"
command to:
onmouseover="DelayedStatusRefeshFriends()"
by clicking on a button elsewhere on the page...
Is this possible and how would you do it?
Many thanks in advance

The quick answer is as follows:
var button = document.getElementById('someButtonId');
button.addEventListener('click', function() {
document.getElementById('fmeFriendStatus').onmouseover = DelayedStatusRefeshFriends;
});
However, directly accessing onclick or other on* properties to listen for events is frowned upon for numerous reasons. Ideally, you would add DelayedStatusRefesh as an event listener using addEventListener() (or maybe using a JavaScript library, like jQuery), and when the button is clicked, remove that listener (removeEventListener()) and add the other.

You need to add the onclick handler to the second button, and its handler needs to reassign the mouseover handler for the fmeFriendStatus element.
So it should be something like this:
document.getElementById("buttonFromSomewhereElse").onclick = function() {
document.getElementById("fmeFriendStatus").onmouseover = DelayedStatusRefeshFriends;
}

Event handling jQuery unclick() and unbind() events?

I want to attach a click event to a button element and then later remove it, but I can't get unclick() or unbind() event(s) to work as expected. In the code below, the button is tan colour and the click event works.
window.onload = init;
function init() {
$("#startButton").css('background-color', 'beige').click(process_click);
$("#startButton").css('background-color', 'tan').unclick();
}
How can I remove events from my elements?

There's no such thing as unclick(). Where did you get that from?
You can remove individual event handlers from an element by calling unbind:
$("#startButton").unbind("click", process_click);
If you want to remove all handlers, or you used an anonymous function as a handler, you can omit the second argument to unbind():
$("#startButton").unbind("click");

Or you could have a situation where you want to unbind the click function just after you use it, like I had to:
$('#selector').click(function(event){
alert(1);
$(this).unbind(event);
});

unbind is your friend.
$("#startButton").unbind('click')

Are you sure you want to unbind it? What if later on you want to bind it again, and again, and again? I don't like dynamic event-handling bind/unbind, since they tend to get out of hand, when called from different points of your code.
You may want to consider alternate options:
change the button "disabled" property
implement your logic inside "process_click" function
Just my 2 cents, not an universal solution.