# Frequently Used Events

## Content

The following sections provide code samples for various events available in SpreadJS.

## Click a Cell

You can configure events for when a cell is clicked in a SpreadJS worksheet.

The following code sample shows how to use the [CellClick](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#cellclick) event.

```JavaScript
var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.CellClick, 

    function (sender, args) 
    {
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader)
        {
            console.log("The column header was clicked.");
        }
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader)
        {
            console.log("The row header was clicked.");
        }
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.corner){
            console.log("The corner header was clicked.");
        }
        console.log("Clicked column index: " + args.col);
        console.log("Clicked row index: " + args.row);
});
```

## Double Click a Cell

You can configure events for when a cell is double-clicked in a SpreadJS worksheet.

The following code sample shows how to use the [CellDoubleClick](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#celldoubleclick) event.

```JavaScript
var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (sender, args) 
{
    
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader)
    {
        console.log("The column header was double clicked.");
    }
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader)
    {
        console.log("The row header was double clicked.");
    }
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.corner)
    {
        console.log("The corner header was double clicked.");
    }
    console.log("Double clicked column index: " + args.col);
    console.log("Double clicked row index: " + args.row);
});
```

## Move a Cell

You can use events when moving a cell.

The following code sample shows how to use the [LeaveCell](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#leavecell) event.

```JavaScript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (sender, args) 
{
    console.log("The column index before moving: " + args.col);
    console.log("The row index before moving: " + args.row);    
});
```

## Start or Stop Edit Mode

You can use events when edit mode starts or stops.

The following code sample shows how to use the [EditStarting](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#editstarting) and [EditEnded](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#editended) events.

```JavaScript
var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) 
{  
    console.log("Start cell editing.");
});

activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) 
 {
    console.log("Finish cell editing.");
 });
```

## Change in Data

You can use events when the data in a cell changes.

The following code sample shows how to use the [EditChange](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#editchange) event.

```JavaScript
var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditChange, function (sender, args) 
{
    console.log("Cell (" + args.row + ", " + args.col + ") data has been changed.")
});
```

## Change in Top Row or Left Column

You can use events when the top row or column changes when scrolling.

The following code sample shows how to use the [TopRowChanged](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#toprowchanged) and [LeftColumnChanged](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#leftcolumnchanged) events.

```JavaScript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
spread.addSheet();
var sheet1 = spread.getSheet(0),
    sheet2 = spread.getSheet(1);
sheet1.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) 
{
  /* Set the displayed top row of sheet1 to sheet2 
   (vertical scroll  synchronization). */

  sheet2.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
});

sheet1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) 
{
 /* Set the displayed left column of sheet1 to sheet2 
  (Horizontal scroll synchronization). */
sheet2.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
});
```

## Change in Sheet Tab

You can use events when the sheet tab changes.

The following code sample shows how to cancel the tab change.

```JavaScript
var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
spread.addSheet();
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanging, 
function (sender, args) 
{
    // Cancel sheet switching.
    args.cancel = true;
});

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (sender, args) 
{
    console.log("Active sheet has been switched.");
});
```

## Drag and Drop Block of Cells

You can use events when dragging and dropping a block of cells.

The following code sample shows how to use the [DragDropBlock](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#dragdropblock) event.

```JavaScript
var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var sheet = spread.getActiveSheet();
sheet.bind(GC.Spread.Sheets.Events.DragDropBlock, function (e, args) 
{
  console.log("From Column:" + args.fromCol);
  console.log("From Row:" + args.fromRow);
  console.log("To Column:" + args.toCol);
  console.log("To Row:" + args.toRow);
});     
```

## Change in Sheets

You can configure an event before a sheet is changed or after a sheet is changed.

The [SheetChanging](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#sheetchanging) event is fired before a sheet is changed whereas a [SheetChanged](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#sheetchanged) event is fired after a sheet is changed. The sheet changes here include inserting, deleting, hiding, or unhiding a sheet by using the context menu or clicking the "+" button in the sheet tab.

The following code sample shows how to use the **SheetChanged** and **SheetChanging** events.

```JavaScript
// initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// Bind SheetChanged event
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (sender, args) {
    console.log("Changed type: " + args.propertyName + " & Sheet Index : " + args.sheetIndex);
});

// Bind SheetChanging event
spread.bind(GC.Spread.Sheets.Events.SheetChanging, function (sender, args) {
    console.log("Changing type: " + args.propertyName + " & Sheet Index : " + args.sheetIndex);
});
```

## Change in Cell Range

You can use code when the cell range of a table range changes.

The following code sample shows how to use the [RangeChanged](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#rangechanged) event.

```JavaScript
// Initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// Get the activesheet
var activeSheet = spread.getSheet(0);
// Add data
for (var col = 1; col < 6; col++) {
    for (var row = 2; row < 11; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
for (var col = 7; col < 12; col++) {
    for (var row = 2; row < 5; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
// Add tables
activeSheet.tables.add("Table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);
activeSheet.tables.add("Table2", 1, 7, 4, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);

// Bind RangeChanged event
activeSheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (sender, args) {
    if (args.tableNames) {
        console.log("RangeChanged event fired for Table : " + args.tableNames);
    }
});
```

## Click a Button

You can use the [ButtonClicked](/spreadjs/api/v17/classes/GC.Spread.Sheets.Events#buttonclicked) event with a button, check box, or hyperlink cells.

The **ButtonClicked** event occurs when the user clicks a button, check box, or hyperlink in a cell.

The following code sample shows how to display a message when you click on the button cell.

```JavaScript
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
activeSheet.setCellType(1,1,cellType);

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args)
{
   var sheet = args.sheet, row = args.row, col = args.col;
   var cellType = activeSheet.getCellType(row, col);
   if (cellType instanceof GC.Spread.Sheets.CellTypes.Button)
     {
        alert("Button Clicked");
     }
});
```