We Keep Coding

How come e.preventDefault is not executing on a keydown event?

I have made the form able to submit by pressing return on the keyboard or by pressing the button. However, for some reason the e.preventDefault won't execute and page refreshes on every submit. How can I use e.preventDefault with my current event? Or is there a better way? Full codepen
What I tried:
// e.preventDefault not working
todoForm.addEventListener('keydown', function (e) {
if (e.code === 'Enter') {
e.preventDefault();
addButton.click();
}
addButton.onclick = function () {
addTodo(input.value);
};
});

todoForm.addEventListener('submit', function (e) {
e.preventDefault();
addTodo(input.value);
});
todoForm.addEventListener('keydown', function(e) {
if (e.code === 'Enter') {
e.preventDefault();
addTodo(input.value); // You can simply call function here itself
}
});

It's pretty simple you're calling e.preventDefault() on your keydown event which means, when you press some key again it will not work since you are preventing it,
addButton.addEventListener('click', function(e){
e.preventDefault();
addTodo(input.value);
})
todoForm.addEventListener('keydown', function (e) {
if (e.code === 'Enter') {
e.preventDefault();
addButton.click();
}
});
Or instead you can use this too:
todoForm.addEventListener('submit', function(e){
e.preventDefault();
addTodo(input.value);
})
todoForm.addEventListener('keydown', function (e) {
if (e.code === 'Enter') {
e.preventDefault();
addButton.click();
}
});
Just a Quick Tip: add cursor: pointer; in your delete button styles and add .delete-button:hover { background-color: tomato; } in your css styles too, it looks better now!
Edit:
todoForm.addEventListener('submit', function (e) {
e.preventDefault();
addTodo(input.value);
});
Well i realised simply this will work Too! no need to add onsubmit or something just replace your code with this one, because when you press enter key the submit event is triggered so no need to manually add an event listener for that and no need to add event listener for Button too because that will also trigger submit event because it's set to do so!

The problem is the event is bubbling up and the submit event of your form is being called. Note that preventDefault only in <form> submit or submit button, prevent to refresh page. in other case submit event being called.
So you need to add preventDefault to onsubmit event not keydown event. But there is easy way to do that. Just add onsubmit="return false" in your html form:
<div class="container">
<div class="task-count"></div>
<form class="todo-form" onsubmit="return false">
<textarea id="message-box" class="todo-input todoText" style="resize: none;" rows="1" placeholder="type a todo item"></textarea>
<button type='submit' class="add-button">Add</button>
</form>
<ul id="todoList" class="todo-items"></ul>
</div>

Handle dialog-close event on input type='color'

Here is a default(html5) color selector:
<input id='color-picker' type=color value='#ff0000'>
By click on the element, a default color-picker dialog opens.
I can easily track the color change event:
$('#color-picker').on('change', function() {
console.log($(this).val());
});
How dialog window close event can be handled? For example, when user clicks Cancel button?
Here is jsfiddle additionally.

Unfortunately, the exact functionality is not possible. I even read through the stack link, it seems that file calls the change event regardless of change, whereas color does not... So, I added the code to the blur event instead. When the user click off the value after editing color for any reason, it will check for cancel. I added a phony submit button to force the user to do it.
$('#color-picker').on('blur', function() {
if ($(this).data("prevColor") == $(this).val()) {
console.log('cancelled');
} else {
//value changed
}
updateData.bind(this)();
});
function updateData() {
$(this).data("prevColor", $(this).val());
}
updateData.bind($("#color-picker"))();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='color-picker' type=color value='#ff0000'><button>Submit</button>

I've used this for the Cancel and Close Events.
var prevColor;
$('#color-picker').onchange = function(){
if (this.value != prevColor){
prevColor = this.value;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='color-picker' type=color value='#ff0000'><button>Submit</button>

"Click" event not getting triggered due to "blur"

To reproduce the issue, use the fiddle at [1] and follow these steps:
Click on text box
Input some value in it
After value input, click of the "click me" button. Please Note, don't click anywhere else on the browser
You would see the "button click" event not getting triggered.
The HTML code looks like this,
<div class="wrapper">
<input type="text" id="input"/>
<div class="error">There is an error </div>
</div>
<button type="button" id="button">Click Me</button>
<div id="log">Logs</div>
The JavaScript code for the same is:
$(function () {
$("input,button").on("click focus blur mousedown mouseup", function (e) {
$("#log").append($("<div/>").html(e.target.id + " " + e.type))
var self = this
if (self.id === "input" && e.type=="blur") {
$(self).trigger("exit")
}
})
$(".wrapper").on("exit", function () {
$(this).find(".error").hide()
$(this).find(".error").text("")
})
})
The issue is reproducible in "Chrome" and "firefox". Is this a know bug in "Chrome" or anyone who have faced any similar issue ?
Ideally, the click event on button has to be triggered but somehow it doesn't ? I am not able to understand the cause or a possible fix.
I don't want to use the setTimeout() to defer the "blur" event execution
[1] https://jsfiddle.net/cg1j70vb/1/

This is happening since on blur of the input you are removing the error text. That shifts the button up (possibly DOM re-paint) and hence misses the click
I removed the error message and it works fine.
$(function() {
$("input,button").on("click focus blur mousedown mouseup", function(e) {
$("#log").append($("<div/>").html(e.target.id + " " + e.type))
if (this.id === "input" && e.type == "blur") {
$(this).trigger("exit")
}
})
$(".wrapper").on("exit", function() {
$(this).find(".error").hide()
$(this).find(".error").text("")
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" id="input" />
</div>
<button type="button" id="button">Click Me</button>
<div id="log">Logs</div>

I think its because the hide() function of your error message.
I tried to remove it and just replace the error message and it works.
Demo

JavaScript function getting called twice on Enter key press

I have a button in my html page
<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />
I have binded a jquery click event to this button like
$('#btnLogin').click(function () {
ValidateLogin();
});
I'm also checking the enter key press to call the same function ValidateLogin(); like below
$(document).keypress(function (e) {
if (e.which == 13) {
ValidateLogin();
}
});
The issue that i'm facing is when the user presses the tab key to get in focus over the Login button and then press Enter Key the ValidateLogin() is called twice.How to deal with this situation.
Note : i can't use type="submit" to do a form submit ..since i'm using ajax call on button click

You should use the submit event instead. Your browser is probably firing the click event when pressing enter and that is effectively the same as pressing the submit button:
$("form").submit(function(e) {
// Stop the form submitting
e.preventDefault();
ValidateLogin();
});
function ValidateLogin() {
$.ajax({
// ...
}).done(function(e) {
if(!e.valid) {
alert("Invalid Login");
}
});
}
Second reason, even if your keypress was to work correctly, I can press a button by pressing spacebar too.
Here is a full Fiddle to demonstrate.

Since it's a form I would prefer to attach event on form elements instead on document.
Use form element like text, textarea etc. on click of enter should submit the form.
$('input:text, textarea').keypress(function (e) {
if (e.which == 13) {
ValidateLogin();
}
});
In your case event is bubbled from the button to document hence it is called twice.

Its working fine check this fiddler DEMO
<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />
$('#btnLogin').click(function () {
//ValidateLogin();
alert('click');
});
$(document).keypress(function (e) {
if (e.which == 13) {
//ValidateLogin();
alert('enter');
}
e.preventDefault();
});

jquery change sometimes event prevents click event

In the following example, there is a simple input field and a button.
<body>
<input type="text" id="in">
<input type="button" value="click" id="button">
</body>
There is a change-event-function on the input field and a click-event-function on the button.
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
//window.alert('change event');
});
$('#button').click(function() {
console.log('click event');
});
});
On changing the value of the input field and immediately clicking the button (without leaving the cursor), my expectation is, that both events are fired. Unfortunately this behavior depends on the code executed inside the change-function e.g. on uncommenting the window.alert line, the click event is NOT fired - or the click-event-function is not executed. Why? How can I avoid code, which prevents the click-event-function from executing?
Update:
instead of the window.alert, the jquery.hide has the same effect
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
$('#hide').hide();
});
$('#button').click(function() {
console.log('click event');
});
});

If you want to fire both of two events, you can do like this:
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
window.alert('change event');
$('#button').click();
});
$('#button').click(function() {
console.log('click event');
});
});

Try
$(document).mousedown(function(e){
console.log('click event');
});
The mousedown event will occur before textbox change and click events so that you need to set time out and check the changed value of the text box if required.