# f.Component().element

## 개요

특정 컴포넌트의 HTML 요소를 반환받을 수 있습니다. 커스텀 이벤트를 생성하거나 스타일을 제어할 수 있습니다.

{% hint style="warning" %}
이벤트 스크립트에서만 사용가능합니다.
{% endhint %}

## 예시

```javascript
// 섹터 미지정
const  layout1 = f.Component("f_1").element;
console.log(layout1)
//섹터 지정 
const sectors = f.Component("f_1").getSectors(); // 해당 컴포넌트와 관련된 섹터 배열
const  layout2 = f.Component("f_1", sectors[2]).element; // 타켓 섹터 지정
```

<figure><img src="https://3692858826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEaccHKpzIIeXyj1yXLr%2Fuploads%2F6ocJSRvuEgrEhmue1dlR%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-03-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.53.15.png?alt=media&#x26;token=2fbacb3e-5702-4091-93e2-de38564d99ab" alt=""><figcaption><p>브라우저 콘솔창 결과</p></figcaption></figure>

## 활용

* [스크립트 도우미 ](https://docs.flextudio.com/flextudio/scenario/dev-mode/event/script-editor#undefined-2)기능을 활용하여 메서드들을 사용할 수 있는 컴포넌트 리스트를 한눈에 확인하고, fid값에 쉽게 접근 할 수 있습니다.

* click이벤트로 활용하기

<figure><img src="https://3692858826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEaccHKpzIIeXyj1yXLr%2Fuploads%2FQ9Uu7PPvrlFrBgpwpZd6%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-03-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.00.00.png?alt=media&#x26;token=e4e4051c-b011-49f2-ae90-0fca61b9559f" alt="" width="375"><figcaption><p>스텝 버튼 컴포넌트를 찾아 클릭하는 이벤트 스크립트</p></figcaption></figure>

스크립트로 요소에 클릭 이벤트를 발생시켜 이벤트 처리를 핸들링할 수 있습니다.

* 커스텀 이벤트 사용하기

```javascript
const draggable = f.Component("f_12").element
_v.isDragging = false;
_v.offsetX = null;
_v.offsetY = null;

function startDrag(event) {
    _v.isDragging = true;
    const rect = draggable.getBoundingClientRect();
    _v.offsetX = event.clientX - (rect.left + rect.width / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
    _v.offsetY = event.clientY - (rect.top + rect.height / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
}

function endDrag() {
    _v.isDragging = false;
    _v.offsetX = null;
		_v.offsetY = null;
}

function drag(event) {
    if (_v.isDragging) {
        const x = event.clientX - _v.offsetX;
        const y = event.clientY - _v.offsetY;
        draggable.style.transform = `translate(${x}px, ${y}px)`;
    }
}

draggable.addEventListener('mousedown', startDrag);
draggable.addEventListener('mouseup', endDrag);
document.addEventListener('mousemove', drag);
//앱 이벤트를  위한 처리
...
```

f.Component(fid).element이 Dom element임을 활용한 커스텀 이벤트 예제입니다.

addEventListener로 이벤트에 따른 요소의 움직임을 구현할 수 있습니다.

<figure><img src="https://3692858826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEaccHKpzIIeXyj1yXLr%2Fuploads%2FD2YANebm9XJvaLPHCmeT%2F%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8%202024-03-22%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.03.45.gif?alt=media&#x26;token=9eee2a57-3c5f-47fd-872d-0798d5a0b7eb" alt=""><figcaption></figcaption></figure>