React List - Universal Actions

Universal actions are those actions that raise the same event despite being performed differently on desktop platforms and on touch-enabled devices. For example, both a click and a tap on an item raise the itemClick event. To handle it, assign a function to the onItemClick property, or subscribe to this event using the on(eventName, eventHandler) method.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        onItemClick: function(e) {
            // Event handling commands go here
        }
    });
});
JavaScript
const itemClickEventHandler1 = function(e) {
    // First handler of the "itemClick" event
}

const itemClickEventHandler2 = function(e) {
    // Second handler of the "itemClick" event
}

$("#listContainer").dxList("instance")
    .on("itemClick", itemClickEventHandler1)
    .on("itemClick", itemClickEventHandler2)
Angular
HTML
TypeScript
<dx-list ...
    (onItemClick)="onItemClick($event)">
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onItemClick (e) {
        // Event handling commands go here
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
App.vue
    <template>
        <DxList ...
            @item-click="onItemClick"
        />
    </template>

    <script>
    import 'devextreme/dist/css/dx.light.css';
    import DxList from 'devextreme-vue/list';

    export default {
        components: {
            DxList
        },
        // ...
        methods: {
            onItemClick (e) {
                // Event handling commands go here
            }
        }
    }
    </script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List from 'devextreme-react/list';

const onItemClick = (e) => {
    // Event handling commands go here
};

export default function App() {
    return (
        <List ... 
            onItemClick={onItemClick}
        />
    );
}

The List supports other universal actions, which are provided as a part of basic List functionality. They are described in the following topics.

See Also