윅스 (Wix) 코딩 - 이벤트를 이용하여 사이트 사용자에 반응하기 (Wix Code: Reacting to User Actions Using Events)

윅스 (Wix) 코딩 - 이벤트를 이용하여 사이트 사용자에 반응하기 (Wix Code: Reacting to User Actions Using Events)

 

 

 

설명)

 

이벤트, 이벤트 핸들러 및 연결 (About Events, Event Handlers, and Wiring)

이벤트는 일반적으로 사용자 작업의 결과로 요소에 발생할 수 있는 것입니다. 예를 들어, onClick은 사용자가 요소를 클릭할 때 발생하는 이벤트이고 onMouseIn은 마우스 포인터로 요소를 사용자가 가리키면 발생하는 이벤트입니다.

이벤트는 페이지 자체, 머리글과 바닥글 및 페이지에 있을 수 있는 모든 데이터세트를 포함하여 페이지의 모든 요소에서 발생할 수 있습니다.

 

사이트에서 무언가를 하거나 반응하도록 하려면 요소에 이벤트가 발생하면 이벤트 핸들러를 추가합니다. 이벤트 핸들러는 이벤트가 발생할 때 실행하려는 코드를 보유하는 함수입니다. 요소에 이벤트 핸들러를 추가하면 함수가 요소에 연결됩니다.

 

사이트에서 이벤트가 발생했는지 확인하기 위해 요소를 감시합니다. 이벤트 핸들러가 있는 이벤트가 발생하면 이벤트 핸들러 함수의 코드가 실행됩니다.

 

요소에 이벤트 핸들러 추가하기 (Adding an Event Handler to an Element)

1. 요소를 선택합니다.

2. 속성 패널에서 추가할 이벤트 핸들러 위로 마우스를 이동하고 + 아이콘을 클릭합니다.

3. 원하는 경우 기본 이름을 편집한 다음 앤터(Enter) 키를 누를 수 있습니다.

 

 

 

 

요소에 이벤트 핸들러를 추가하면 코드 패널이 열리고 해당 이벤트 핸들러의 함수가 페이지의 코드에 추가됩니다.

 

 

 

윅스 코드(Wix Code)는 함수가 요소에 연결되거나 연결되므로 이벤트가 발생할 때 함수에서 작성한 코드가 실행됩니다. 위의 예제에서 볼 수 있듯이 중괄호 {{} 사이에서 실행할 코드를 추가해야 합니다. 윅스 코드(Wix Code) 코딩에 대한 정보는 

윅스 (Wix) 코딩 - 코드 패널 (Wix Code: Working in the Code Panel)를 참조합니다.

 

 

정적 및 동적 이벤트 핸들러에 대한 고급 정보 (Advanced information about static and dynamic event handlers)

속성 패널을 사용하여 요소에 이벤트 핸들러를 추가하면 윅스 코드(Wix Code)는 정적으로 바인딩된 이벤트 핸들러를 등록하고 요소에 연결합니다. 요소에 동적 이벤트 핸들러를 수동으로 추가할 수도 있습니다. 이러한 핸들러는 요소가 있는 자동 완성 값에서 볼 수 있습니다. 동적 이벤트 핸들러를 요소에 추가하면 속성 패널의 해당 요소에 대한 이벤트 목록에 표시되지 않습니다.

 

 

 

 

 

요소에서 이벤트 핸들러 삭제 (Deleting an Event Handler from an Element)

이벤트 핸들러를 삭제하려면 속성 패널에서 해당 핸들러를 가리키고 

 삭제 아이콘을 클릭합니다.

 

 

 

 

요소에서 이벤트 핸들러를 삭제하면 요소와 이벤트 핸들러 함수 사이의 연결이 제거되거나 끊어집니다. 코드 자체는 페이지에서 제거되지 않지만 요소에 이벤트가 발생하면 더 이상 이벤트 코드가 실행되지 않습니다.

 

요소와 해당 이벤트 핸들러 간의 연결은 이벤트 핸들러 함수의 이름과 속성 패널에서 이벤트 핸들러에 지정한 이름에 따라 달라집니다. 코드의 함수 이름이 [속성] 패널에서 이벤트 핸들러에 제공하는 함수의 이름과 일치하는한 요소는 해당 함수의 코드를 사용하여 이벤트에 응답합니다.

 

예를 들어, 사이트에 takeTourButton이라는 버튼이 있고 takeTourButton_onMouseIn이라는 onMouseIn 이벤트 핸들러를 추가했다고 가정해봅니다. 그런 다음 버튼 라벨이 기본 "Take the Tour"에서 "Let 's Go"로 변경되도록 함수에 코드를 추가합니다. 사용자가 그것을 가리킬 때. 코드는 다음과 같습니다.

 

export function takeTourButton_onMouseIn(event) {  $w("#takeTourButton").label = "Let's Go!"; }

 

takeTourButton에서 이벤트 핸들러를 삭제하면 코드가 사이트에 남아 있지만 "Take the Tour"버튼이 더 이상 onMouseIn 이벤트에 반응하지 않습니다.

 

이제 takeTourButton에 대한 onMouseIn 이벤트 핸들러가 실제로 필요하다고 결정한 경우를 생각해봅니다. 또한 해당 이벤트에 대해 원래 작성한 코드를 사용하려고 합니다. 속성 패널을 사용하여 요소에 이미 코드에 있는 이벤트 핸들러 함수를 다시 연결하기만하면 됩니다.

 

이렇게 하려면 속성 패널로 돌아가서 onMouseIn 이벤트 핸들러를 takeTourButton에 다시 추가합니다. 윅스 코드(Wix Code)는 코드에 takeTourButton_onMouseIn이라는 함수가 있음을 확인하여 새 이벤트의 이름을 자동으로 지정합니다. takeTourButton_onMouseIn_1.

 

이는 코드에 동일한 이름을 가진 두 개의 함수가 있을 수 없기 때문에 코드에 새 함수를 추가해야 한다고 가정합니다. 원래 onMouseIn 이벤트에 대해 작성한 함수를 다시 사용하려는 경우 이름에서 _1을 제거하여 이미있는 기능과 일치하도록 속성 패널의 함수 이름을 변경합니다. 엔터(Enter) 키를 누르면 함수에 사용한 이름이 이미 있으므로 윅스 코드(Wix Code)는 코드에 새 함수를 추가하지 않습니다. 기존의 함수에 새로운 onMouseIn 이벤트 핸들러를 연결하기 만하면됩니다.

 

새 코드로 새 onMouseIn 이벤트 핸들러를 만들려면 이벤트 핸들러에 새 이름을 사용합니다. 윅스 코드(Wix Code)는 평소와 같이 코드에 새로운 기능을 추가합니다.

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 코드 패널 (Wix Code: Working in the Code Panel)

윅스 (Wix) 코딩 - 속성 패널 (Wix Code: Working with the Properties Panel)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-reacting-to-user-actions-using-events