All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery 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