Develop Reference

How to add window.addEventListener and remove window.removeEventListener in Vue JS

I want to add window.addEventListener in vue js file.
window.addEventListener('message', (event) => {
console.log(event, ' i am here');
});
I have added this in mounted() function.
Now, I need to remove this in destroyed method but somehow I am not able to do it.
window.removeEventListener('message', (event) => {
console.log(event, ' i am here');
});

Ok So I have created a fiddle that will show you how to remove and add the message handler and how to post message it's here:
new Vue({
el: "#app",
methods: {
addHandler: function() {
window.addEventListener('message', this.eventListenerExample);
},
removeHandler: function(){
window.removeEventListener('message', this.eventListenerExample);
},
postMessage: function() {
window.postMessage("This is a message ");
},
eventListenerExample: function(event){
console.log(event, ' i am here');
}
},
mounted: function () {
this.addHandler();
},
destroyed: function() {
this.remveHanlder();
}
})
https://jsfiddle.net/ob1pLd7z/8/
Note here that the function is part of this vue instance and the function itself is added and removed rather than using an inline function like you originally showed.

I am happy to read that you want to clear/remove listener after component destroy
mounted() {
const listener = () => {}
const event = 'message'
window.addEventListener(event, listener)
this.$once('hook:destroyed', () => {
window.removeEventListener(event, listener)
})
}

You can use destroyed() or beforeDestroy() to remove the event listener.
To add event use mounted() like this,
mounted() {
window.addEventListener('event', listener);
}
ex:
mounted() {
window.addEventListener('keyup', this.navigateMovements);
}
and in templates main div,
<div #event='listener($event)'>
......
......
......
</div>
ex:
<div #keyup='navigateMovements($event)'>
......
......
......
</div>
To destroy the event
beforeDestroy() {
window.removeEventListener('event', listener);
}
ex:
beforeDestroy() {
window.removeEventListener('keyup', this.navigateMovements);
}
or use destroyed()
destroyed() {
window.removeEventListener('event', listener);
}

How to handle ctrl+tab key in extjs 3.4?

I am working on Extjs3.4. I want to keymap ctrl+tab in my application. but when I try to use it, it opens my next browser tab. How can I solve it?
This is my code :-
var keyMap = new Ext.KeyMap(Ext.getDoc(), {
key: Ext.EventObject.TAB,//9
ctrl: true,
stopEvent : true,
fn: function () { console.log('it works'); },
scope: this
});
Please give some suggestion.

Try to put a listener in the respective field (text or whatever)
listeners: {
keydown: { //tab could be listened in keydown
element: 'el',
fn: function(e){
if(e.urKey && e.urAnotherKey)
alert('keydown, execute my action');
}
},
keypress: {
element: 'el',
fn: function(){
alert('keypress');
}
}
}

Trigger event from an approuter

I created an application and it worked fine, most of the functionality is just the application reacting to different events. I would like to implement a router so that users would be able to show their search results with other users etc. The problem is the router appears to be set up correctly, as when i use it to append things directly to the body everything works as expected. When I try to use the router to trigger events though nothing happens, any help would be greatly appreciated. It is worth mentioning I suppose that this is not the complete code but just the parts that seemed relevant to the issue I am experiencing.
IEG = new Backbone.Marionette.Application();
IEG.addRegions({
searchBox: '#searchBox',
resultBox: '#resultBox',
modalBox: '#modalBox',
recipientBox: '#recipientBox',
confirmBox: '#confirmToggleActive'
});
IEG.vent = _.extend({}, Backbone.Events);
IEG.Router = Backbone.Marionette.AppRouter.extend({
routes: {
'': 'index'
},
index: function () {
IEG.vent.trigger("default"); ////TRIGGER EVENT DOES NOT WORK
//$(document.body).append("Index route has been called..");
}
});
SearchBoxView = Backbone.Marionette.ItemView.extend({
template: Handlebars.templates['search'],
events: {
'click #addGroup': 'addGroup',
'keyup #searchStr': 'evaluateSearch'
},
addGroup: function () {
IEG.vent.trigger("addGroup");
},
clearValidationMsg: function () {
$('#searchErrors').html("");
},
evaluateSearch: function (e) {
console.log("keyup DO SOMETHING> ", e.keyCode);
if (e.keyCode === 13) {///press enter execute search
var searchStr = $('#searchStr').val().trim();
if (searchStr) {
IEG.vent.trigger("searchGroups", searchStr);
}
}
else if (e.keyCode === 8 || e.keyCode === 46) {//backspace and delete keys
var searchStr = $('#searchStr').val().trim();
if (!searchStr) {//when searchbar is cleared show all groups
IEG.vent.trigger("searchGroups", null)
}
}
},
validateEmail: function (searchStr) {
return /^.+#.+\..+$/.test(address);
}
});
$(document).ready(function () {
IEG.start();
new IEG.Router;
Backbone.history.start();
IEG.vent.on("default", function () {
var SBV = new SearchBoxView();
IEG.searchBox.show(SBV);
IEG.searchColl = new GroupEntries();
IEG.searchColl.fetch({
data: {
cmd: 0, //search groups
searchStr: null //if null show all groups
},
success: function (data) {
searchResults = new SearchResultsView({ collection: IEG.searchColl });
IEG.resultBox.show(searchResults);
}
});
});
});

Make sure your event listeners are defined before the event is triggered. Most likely, the event trigger is working fine, but your event listener is registered after the router has triggered the event and nothing happens...

Access event object from Backbone Marionette ItemView trigger

I have the code below. I want to on <Enter> of the input#editTodo, I want to save the model (Todo). I figured I need to listen to the keypress event then check that the keycode is 13, if so I save the model ...
TodoView = Backbone.Marionette.ItemView.extend({
triggers: {
"keypress #editTodo": "detectEnterAndSave"
},
initialize: function() {
this.on("detectEnterAndSave", function(e) {
console.log(e);
});
But I cant seem to get the event object? If so how do I know what key is pressed?

events: {
'keypress #editTodo' : 'detectEnterAndSave'
},
detectEnterAndSave : function(e) {
if (e.which === 13) {
// do something
}
}

Event handler on multiple events [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Bind multiple events to jQuery 'live' method
I have the following function:
$("td.delivered").click(function() {
$(this).html($("<input/>", {
id: 'inp',
style: 'width:80px;',
placeholder: "YYYY-MM-DD",
change: function() {
selectdone(this, title_id, status_type);
},
blur: function() {
selectdone(this, title_id, status_type);
},
onkeypress=="Return": function() { // pseudo-code
selectdone(this, title_id, status_type);
}
})
);
}
The following works, what would be a better way to write it?
change: function() {
selectdone(this, title_id, status_type);
},
blur: function() {
selectdone(this, title_id, status_type);
},
onkeypress: function(e) {
if (e.keyCode == 13) {
selectdone(this, title_id, status_type);
}
}
How would I write this more concisely, making the selectdone function fire on change, blur, and return?

You can use bind:
$(this).html($("<input/>", {
id: 'inp',
style: 'width:80px;',
placeholder: "YYYY-MM-DD",
change: function() {
selectdone(this, title_id, status_type);
}
});
$(this).bind('blur keypress change', function(e){
selectdone(this, title_id, status_type);
});
You may need to modify your code for different events. Notice that to know which event is currently triggered, you would use e.type

$(this).html($("<input/>", {
id: 'inp',
style: 'width:80px;',
placeholder: "YYYY-MM-DD"
});
$('input', this).bind('change blur keypress', function(e) {
if(e.type != 'keypress' || e.keyCode == 13){
selectdone(this, title_id, status_type);
}
});