Populate page items based off an interactive grid

I am using oracle apex version 22.1 and i'm trying to populate a page item (P617_ROW1) with some client side interactive grid data from some javascript code. So far i've been able to successfully do this through the Selection Change [Interactive Grid] event that triggers this code:

var full_record 
model = this.data.model; 
if(this.data != null){

if(this.data.selectedRecords[0] != null){
    full_record = model.getValue(this.data.selectedRecords[0], 'LIMITTYPE')+ "/" + model.getValue(this.data.selectedRecords[0], 'AMTPERTRANS')+ "/"
                + model.getValue(this.data.selectedRecords[0],'AMTPERDAY')  + "/" + model.getValue(this.data.selectedRecords[0],'NUMPERDAY')+ "/"
                + model.getValue(this.data.selectedRecords[0],'AMTPERMONTH') + "/" + model.getValue(this.data.selectedRecords[0],'NUMPERMONTH') +"/" + model.getValue(this.data.selectedRecords[0], 'SECCODE');
    }   
} 
apex.item("P617_ROW1").setValue(full_record);

The code successfully grabs the data in each cell and formats it correctly in my page item so I can then use it for processing. The only issue is that this event forces the user to unclick and re-click the interactive grid's row selector checkbox to populate the page item. It would be a lot more efficient if this code could be triggered by another event that would not require manual user interactions (key down, page change, etc...) and would populate the page item as the user types/right before they submit. I am not proficient in JS by any means so any links that would help build my understanding of using js in oracle apex to achieve goals like this would be appreciated.

I guess I should add that I have a maximum of 4 IG rows that I need to be able to select into their respective page items. So I use the code above 4 different times with the only difference being the selected record row number (this.data.selectedRecords[n]) and the page item (P617_ROWn).