1# JS API Changes of the ArkUI Development Framework 2 3The table below lists the APIs changes of the ArkUI development framework in OpenHarmony 3.1 Release over OpenHarmony 3.0 LTS. 4 5## API Changes 6 7| Component Type | Component Name | Change Type| Change Description | 8| ---------- | ----------------------------- | -------- | ------------------------------------------------------------ | 9| Universal event | onFocus/onBlur | Added | Added the focus events. | 10| Universal event | onHover/onMouse | Added | Added the mouse events. | 11| Universal event | onAreaChange| Added | Added the event indicating component area (including the size and position) changes. | 12| Universal attribute | stateStyles | Added | Added the attribute for polymorphic style settings. | 13| Universal attribute | responseRegion | Added | Added the attribute for touch hotspot settings. | 14| Universal attribute | touchable | Added | Added the attribute that specifies whether a component is touchable. | 15| Universal attribute | focusable | Added | Added the attribute that specifies whether a component can gain focus. | 16| Universal attribute | bindPopup | Added | Added the layout customization capability for pop-up windows. | 17| Universal attribute | bindMenu | Added | Added the layout customization capability for menus. | 18| Universal attribute | hoverEffect | Added | Added the attribute that specifies the hover effect of a component. | 19| General gesture | SwipeGesture | Added | Added the swipe gesture. | 20| Basic component | Image | Added | Added the **syncLoad** attribute to specify whether data is loaded synchronously. | 21| Basic component | Swiper | Added | Added the **cachedCount** attribute to set the number of preloaded child components. | 22| Basic component | Swiper | Added | Added the **disableSwipe** attribute to disable component swipe. | 23| Basic component | Slider | Added | Added the vertical slider. | 24| Basic component | TabContent | Added | Added the **tabbar** attribute to provide the layout customization capability. | 25| Basic component | Marquee | Added | Added the **\<Marquee>** component. | 26| Basic component | Gauge | Added | Added the **\<Gauge>** component. | 27| Basic component | PluginComponent | Added | Added the **\<PluginComponent>** component. | 28| Basic component | TextArea | Added | Added the **\<TextArea>** component. | 29| Basic component | TextInput | Added | Added the **\<TextInput>** component. | 30| Basic component | Toggle | Added | Added the **\<Toggle>** component. | 31| Container component | List | Added | Added the **\<List>** component. | 32| Container component | ScrollBar | Added | Added the **\<ScrollBar>** component. | 33| Container component | Navigation | Added | Added the **\<Navigation>** component. | 34| Container component | Stepper | Added | Added the **\<Stepper>** component. | 35| Container component | StepperItem | Added | Added the **\<StepperItem>** component. | 36| Canvas component | Canvas | Added | Added the **\<Canvas>** component. | 37| Canvas component | Lottie | Added | Added the support for the Lottie library. | 38| Global UI method| ActionSheet | Added | Added the support for the list selection dialog box. | 39| Basic component | Web | Added | Added the **\<Web>** component. | 40| Basic component | Checkbox | Added | Added the **\<Checkbox>** component to enable or disable an option. | 41| Basic component | CheckboxGroup | Added | Added the **\<CheckboxGroup>** component to select or deselect all check boxes in a group. | 42| Basic component | DatePicker | Added | Added the **\<DatePicker>** component to allow users to select a date from the given range. | 43| Basic component | TextPicker | Added | Added the **\<TextPicker>** component. | 44| Basic component | PatternLock | Added | Added the **\<PatternLock>** component to allow users to use a pattern password for authentication.| 45| Basic component | RichText | Added | Added the **\<RichText>** component to parse and display HTML text. | 46| Basic component | Search | Added | Added the **\<Search>** component to provide an input area for users to search. | 47| Basic component | Select | Added | Added the **\<Select>** component to provide a drop-down list box that allows users to select among multiple options. | 48| Basic component | TextClock | Added | Added the **\<TextClock>** component. | 49| Container component | Refresh | Added | Added the **\<Refresh>** component. | 50| Container component | SideBarContainer | Added | Added the **\<SideBarContainer>** component. | 51| Global UI method| TextPickerDialog | Added | Added the **\<TextPickerDialog>** component. | 52| Global UI method| TimePickerDialog | Added | Added the **\<TimePickerDialog>** component. | 53| Global UI method| DatePickerDialog | Added | Added the **\<DatePickerDialog>** component. | 54