We Keep Coding

mouse eventlistener isnt being removed

Im trying to remove an eventlistener that I initialize somewhere in the code and then remove later in a function. I know that you have to remove the same listener that you initialized, but it doesnt seem to be working. I store the eventlistener in a variable that I believe has global scope, so Im not sure what the issue is. The eventlistener itself works fine, and starts as expected.
I have also tried not storing the eventlistener in a variable but that didnt work either.
mainFunction = function (){
mousee = document.addEventListener('mouseout', mouseEvent);
if ($(".message_input").val().replace(/\s/g, "").length > 0){
unbindAll(true); // unbind all functions
message = getMessageText(); // retrieve the users message text
$(".message_input_wrapper").html("");
printMessage(message, "right"); // display there message on the screen
if (message=="stop"){
document.removeEventListener(mousee);
initiateStopSection();
} else {
//async_elipsis();
response = async_bot(message);
};
};
};
Just for clarification, I was initially using
document.removeEventListener("mouseout", mouseEvent)
but it wasnt working

When using removeEventListener, you have to pass the event type and the event handler, so in this case you would use
document.removeEventListener("mouseout", mouseEvent)

removeEventListener takes 2 arguments. The first is the event you are trying to target, in this case mouseout, and the second is the function you wish to remove.
For your example it would be this:
document.removeEventListener("mouseout", mouseEvent)
There is no need to set the initial listener to a variable with this implementation.

pass a parameter in setAttribute "onclick" function argument in javascript

Here in line no 163 I want to set a function to the close item . close is a button here . And I want to pass a parameter through it's "onclick" event. that is it's id. How do I do it?

You better use an event listener in this case instead of try to manipulate the onclick with setAttribute:
close.addEventListener("click", function(){
//do what you need here: call another function, do some math, etc...
checker('id'); //???
});

You can use:
close.onclick = function(){
checker('id'); // <-- are you sure you want to pass static string here?
};

How to open up a tab in Javascript

I've got a page in which I create some tabs.
function addTab(ticketId, name) {
$('#pageTab').append(
$('<li>'+name+'<button class="close" type="button">×</button></li>'));
$('#pageTabContent').append($('\
<div class="tab-pane" id="'+ticketId+'">\
here some more html \
</div>'));
$('#page' + ticketId).tab('show');
}
When the user wants to open the contents of the tab I open the contents with this code:
$("#pageTab").on("click", "a", function (e) {
openTab(e, this);
});
which calls this function:
function openTab(e, tabId) {
e.preventDefault();
$(tabId).tab('show');
}
I now want to call this openTab function from a different place, but I actually no idea what this e variable does or where it comes from.
Does anybody know how I can call this function and supply that e variable? All tips are welcome!

e is the context of the event. Whenever an event occurs (click, scroll, keydown etc.) you get a context object that allows you to get more information about the event. This context object is generated for you.
If you call openTab programmatically then you don't have an event. Seeing as you only preventDefault() you don't need it anyway. Consider restructuring like this:
$("#pageTab").on("click", "a", function (event) {
event.preventDefault(); // we're handling a click, so we have an event, deal with it here
openTab(this);
});
function openTab(tabId) {
$(tabId).tab('show');
}
Now you can call:
openTab($("#some_tab"));

e looks like an event to me. You don't seem to be using it except with e.preventDefault() so you can either modify the functions to not parse it or modify the openTab() function to check if it's null then you can send it a null when calling the openTab() function.
so you could do this:
function openTab(e, tabId) {
if(e!=null){e.preventDefault();}
$(tabId).tab('show');
}
then call the function like this:
openTab(null,tabId);
Or modify openTab() to look like this:
function openTab(tabId) {
$(tabId).tab('show');
}
and modify all references to openTab() as to not send the e variable so they look like this:
openTab(tabId);

Get value from one click event to other event in JavaScript

I have code written by other like this.
<button onclick="javascript:confirm("Are you sure?");" id="confirm_button"/>
Now, to add more functionality to this button I am attaching one click event to the same button
$("#confirm_button").live("click",function(event){
//Need value from the confirm box.
//code goes here.
});
How to get the value from the first event in the event listener? I need if for my code to work.
The one way is that I have to move this confirm box into my click event listener, But requirements don't allow me.
Thanks

You can declare a global variable and the store value ion that,so it can be used in other functions
somewhat like this
<script>
//global variable here
var testvariable;
function1
{
//initalize value here
}
function2
{
//use here
}
</script>

Global Scope variables might help you with your problem. If a variable is declared outside a function, then that variable exists on the global object.
Check this link.you will get an pretty lot of information about the various scopes.. :)
<script>
var globalVariable= "someValue";//Use this variable anywhere u may need..
</script>
http://learn.jquery.com/javascript-101/scope/

Use confirm inside jquery Something like this:
$("#confirm_button").live("click",function(event){
var valid = confirm("Are you sure?");
if(valid){
//do something
var myVal = $("YOUR SELECTOR").val(); // to get the value of your selector.
}else{
// do something else
}
});

try this...
$("#confirm_button").live("click",function(event){
var isvalid = confirm("Are you sure?");
if(isvalid){
// to get the value of your selector.
}
else
{
// do something else
}
});

<input type="button" onclick="var tmp=confirm('Are you sure?');if(tmp) foo(); "
id="confirm_button" value="btn"/>
//and in javascript function write ur code
function foo()
{
alert('add functions');
}

How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?

The following doesn't work... (at least not in Firefox: document.getElementById('linkid').click() is not a function)
<script type="text/javascript">
function doOnClick() {
document.getElementById('linkid').click();
//Should alert('/testlocation');
}
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

You need to apply the event handler in the context of that element:
var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
elem.onclick.apply(elem);
}
Otherwise this would reference the context the above code is executed in.

The best way to solve this is to use Vanilla JS, but if you are already using jQuery, there´s a very easy solution:
<script type="text/javascript">
function doOnClick() {
$('#linkid').click();
}
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>
Tested in IE8-10, Chrome, Firefox.

To trigger an event you basically just call the event handler for that
element. Slight change from your code.
var a = document.getElementById("element");
var evnt = a["onclick"];
if (typeof(evnt) == "function") {
evnt.call(a);
}

Granted, OP stated very similarly that this didn't work, but it did for me. Based on the notes in my source, it seems it was implemented around the time, or after, OP's post. Perhaps it's more standard now.
document.getElementsByName('MyElementsName')[0].click();
In my case, my button didn't have an ID. If your element has an id, preferably use the following (untested).
document.getElementById('MyElementsId').click();
I originally tried this method and it didn't work. After Googling I came back and realized my element was by name, and didn't have an ID. Double check you're calling the right attribute.
Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

$("#linkid").trigger("click");

Old thread, but the question is still relevant, so...
(1) The example in your question now DOES work in Firefox. However in addition to calling the event handler (which displays an alert), it ALSO clicks on the link, causing navigation (once the alert is dismissed).
(2) To JUST call the event handler (without triggering navigation) merely replace:
document.getElementById('linkid').click();
with
document.getElementById('linkid').onclick();

Have a look at the handleEvent method
https://developer.mozilla.org/en-US/docs/Web/API/EventListener
"Raw" Javascript:
function MyObj() {
this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
console.log("caught event: "+e.type);
console.log(this.abc);
}
var myObj = new MyObj();
document.querySelector("#myElement").addEventListener('click', myObj);
Now click on your element (with id "myElement") and it should print the following in the console:
caught event: click
ABC
This allows you to have an object method as event handler, and have access to all the object properties in that method.
You can't just pass a method of an object to addEventListener directly (like that: element.addEventListener('click',myObj.myMethod);) and expect myMethod to act as if I was normally called on the object. I am guessing that any function passed to addEventListener is somehow copied instead of being referenced. For example, if you pass an event listener function reference to addEventListener (in the form of a variable) then unset this reference, the event listener is still executed when events are caught.
Another (less elegant) workaround to pass a method as event listener and stil this and still have access to object properties within the event listener would be something like that:
// see above for definition of MyObj
var myObj = new MyObj();
document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));

If you're using this purely to reference the function in the onclick attribute, this seems like a very bad idea. Inline events are a bad idea in general.
I would suggest the following:
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
handler = function(){
showHref(el);
}
showHref = function(el) {
alert(el.href);
}
var el = document.getElementById('linkid');
addEvent(el, 'click', handler);
If you want to call the same function from other javascript code, simulating a click to call the function is not the best way. Consider:
function doOnClick() {
showHref(document.getElementById('linkid'));
}

In general I would recommend against calling the event handlers 'manually'.
It's unclear what gets executed because of multiple registered
listeners
Danger to get into a recursive and infinite event-loop (click A
triggering Click B, triggering click A, etc.)
Redundant updates to the DOM
Hard to distinguish actual changes in the view caused by the user from changes made as initialisation code (which should be run only once).
Better is to figure out what exactly you want to have happen, put that in a function and call that manually AND register it as event listener.