Combining 2 jQuery functions - javascript

My jQuery is starting to get unnecessarily long. Is there a way to easily combine these 2 functions. My first thought is to create a custom event out of the key down function. Any solutions or suggestions on what to read up on would be appreciated.
$('th:nth-child(3):first').click(function () {
$('#dtSelect').val(2).change();
});
$('th:nth-child(3):first').keydown(function(event){
if(event.keyCode==13){
$('#dtSelect').val(2).change();
}
});

Simply:
$('th:nth-child(3):first').on('change keydown', function(event) {
if(!event.keyCode || event.keyCode==13){
$('#dtSelect').val(2).change();
}
});
This will fire on both change and keydown events, and will only call change() if event.keyCode does not exist (change) or is equal to 13 (keydown).

function combined(event) {
if (typeof event === 'undefined' || event.keyCode==13)
$('#dtSelect').val(2).change();
}
$('th:nth-child(3):first').click(combined).keydown(combined);
although in this case I don't think it's worth combining them.

Related

"keyup" event and "keydown" being called by the same event handler

Hope your having a wonderful week :D
I have just started up with JavaScript and was wondering is it possible to handle the two events from one event-handler.
So for example
document.addEventListener("keydown",handleKeys);
document.addEventListener("keyup",handleKeys);
function handleKeys(e , a){
switch(e.keyCode) {
case '0': return isSomething = a; // a = false | true for keydown and keyup
}
}
Would something like this be possible
Yes, that's possible, though you'll need to set the 2nd param of handleKeys, or it will be undefined.
document.addEventListener("keydown", e => handleKeys(e, true));
document.addEventListener("keyup", e => handleKeys(e, false));
function handleKeys(e, down) {
console.log(down);
}
Yes you can do it, however - dont do it in this way - is better to use two separate handlers. If they have shared code, then move that code to separate third method which will be call with that handlers.

key down listner event not working in firefox

I have a 'keydown' event on javascript for navigating table using arrow keys:
my code as follows:
document.onkeydown= function() { keyDown();};
The implementation code as follows:
function keyDown(e){
var evt=(e)?e:(window.event)?window.event:null;
var key = evt.keyCode || evt.which;
if(key==38 || key==40){
alert("working");
}
}
How can I make it works on all browsers? What I am doing wrong here?
You need to pass the event variable that the system passes in to your function or use the standardised addEventListener method:
// Passing the event
document.onkeydown = function(e) { keyDown(e); };
// Using event listeners
document.addEventListener('keydown', keyDown, false);
Then you should rely on the event passed - do not use window.event - if the event is not passed to your function you have bigger issues to worry about than finding the event.
function keyDown(e){
if(e.which == 38 || e.which == 40){
alert("working");
}
}
I would learn more about the addEventListener method as assigning functions to the documents own onEvent attributes is not advised. What if you want to change this later? What if you want to add some code some of the time? Event Listeners are great for that and they don't modify the default behaviour here. You can add and remove these on the fly, making it much more versatile. Have a read here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

jQuery calling a method on 2 different events

I have 2 events; one for when i click a button and the other for when i press my down arrow.
They are both reffering to the same method. My code for that looks like this:
$('.button').on('click', function() {
someMethod();
});
$(document).keydown(function(e) {
if (e.keyCode === 40) {
someMethod();
return false;
}
});
Is there a better or shorter way to do this? Also when i want to add another event to it?
Make your method as you required
pass "e" for KeyDown and not pass "e" for click and then check e in your function
if(typeof e != "undefined" && e.keyCode === 40)
I hope you get it
You can shorten the first one by passing the handler reference instead of calling it through anonymous function.
$('.button').on('click', someMethod);

jQuery function in two events

I have this code:
$('#email').keyup(function() {
if(true || false)) {
} else {
}
});
I need include this function also in blur event.
I've tried to create a jquery function but I could not. Somebody give me a light.
You can do this -
$('#email').on('keyup blur',function() {
http://api.jquery.com/on/
Use the on method to attach multiple events, which are specified in the first argument passed to the function.
$('#email').on('keyup blur', function() {
if(true || false) { //there was an extra ) here
} else {
}
});
Working Example http://jsfiddle.net/nv39M/
One thing to be aware of, the keyup event is going to fire prior to the blur event firing.
Make a separate function as follows
function funcName(){
//Your code
}
Now,use jQuery on
$("#email").on("keyup",funcName);
$("#email").on("blur",funcName);
For reference,check
http://api.jquery.com/on/
There are (at least) two ways you could achieve this.
Specify multiple, space separated events as the first argument:
$('#email').on('keyup blur',function() {
// your logic
});
Use a named function:
function yourFunction() {
// your logic
}
$('#email').on('keyup', yourFunction);
$('#email').on('blur', yourFunction);
Option 1 is probably the best choice assuming you don't want to use the function anywhere else, and that you want to bind the event handlers at the same time. If, however, you wanted to bind the blur event at a later point (perhaps in response to another event), or to a different element, then the named function method would be the best choice.

Keypress events in Dojo's on module

I have started using Dojo's new on module to add my events. It works fine, but now I've run into a problem. When using keypress event I can't seem to get the character value (for example "2" or "b") from the pressed key. Previously I've used the behaviormodule, and the connect module, and then I have been able to get it by using e.keyChar or e.charOrCode, but now they´re undefined.
I have an event set up like this:
on(element, 'keypress', function(e)
{
console.log(e.keyCode); //works, but not what I need
console.log(e.charOrCode); //undefined
console.log(e.keyChar); //undefined
});
How do I get the character of a pressed key when using this module?
In this case, I think what you want is to use e.keyCode in conjunction with the JS-native String.fromCharCode() in order to get the desired character value.
on(element, 'keypress', function(e) {
var character = String.fromCharCode(e.keyCode);
if (character === 'a') { // do a stuff } else { // do something else }
}

Categories

Resources