그리드 설정

이벤트 events 속성 방식

그리드 설정 시 events 옵션을 사용하여 초기 그리드 생성 시점에 이벤트를 설정 할 수 있습니다.

events 속성은 그리드가 생성될 때 특정 이벤트가 발생하면 실행할 핸들러를 미리 설정하는 방식입니다.
이 방식은 동적으로 이벤트를 추가하는 bind()와 다르게, 초기 설정 단계에서 이벤트 핸들러를 미리 지정하여 관리할 수 있습니다.

✅ events 속성 설정 예제

JS 
	var qcellProperty1 = {
	id : 'qcell',
	parentid: 'sheetarea',
	rowheight: {'header': 30,'data' : 25},
	data: {'input': sampleData1},
	events: { 
		 dblclick  : dbclickevnet,
		 selected : selectedevnet,
		 valuechanged : valuechangeevent
		},
	columns:  [
	{key: 'index', width: '6%', title: ['등록번호'],   type: "input", sort: true, styleclassname: {"data": "align-center"}},
	...
	]	
};

📌 events 속성의 특징

① 이벤트명을 키로 사용

dblclick, selected, valuechanged 등의 이벤트 이름을 키값으로 정의하고,
해당 이벤트가 발생하면 실행할 핸들러 함수를 값으로 지정합니다.

② 핸들러 함수 실행

이벤트가 발생하면 미리 지정한 함수가 자동으로 실행됩니다.
예를 들어, 사용자가 셀을 더블 클릭하면 dbClickEvent()가 실행됩니다.

✅ 핸들러 함수 예제

JS 

function dbClickEvent(event) {
    alert("더블 클릭 이벤트 발생:", event);
}

function selectEvent(event) {
    alert("셀 선택 이벤트 발생:", event);
}

function valueChangeEvent(event) {
    alert("값 변경 이벤트 발생:", event);
}

✔️ bind()에서 사용한 handler와 동일한 개념으로 동작하지만, 초기 설정에서 미리 지정한다는 점이 다릅니다.

아래 예제의 더블 클릭 시, 셀렉트 메뉴 콤보 선택 시, 값이 변경된 후 포커스를 빠져 나갈 때의 세 가지 이벤트 동작을 살펴보시길 바랍니다.

---