Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/UI_Events/ below:

Vue UI Events API | Vue Documentation

The events used to handle user interaction with UI elements.

DevExtreme provides UI events for processing a user's interaction with a specific UI element. The DevExpress.events namespace exposes an API to work with the UI events.

The following code shows how to attach, trigger and then detach a dxhold event handler from a page element with the target ID. The timeout parameter specifies how long the target should be held to allow the handler to execute:

var dxholdHandler = function(jQueryEvent) {
    alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
};

$("#target").on("dxhold", { timeout: 1000 }, dxholdHandler); 
$("#target").trigger("dxhold");
$("#target").off("dxhold", dxholdHandler);

See jQuery documentation for details.

import { on, trigger, off } from "devextreme/events";
// ...
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`The ${event.target.textContent} element is being held for ${event.data.timeout} ms.`);
            return true; // true - continues event propagation, false - stops
        }
        const target: HTMLElement = document.getElementById("target");

        on(target, "dxhold", { timeout: 1000 }, dxholdHandler);
        trigger(target, "dxhold");
        off(target, "dxhold", dxholdHandler);
    }
}

Raised when the element is clicked.

The native click event waits 300 ms after the element was clicked. This time interval is required to wait for the second click. If a user clicks the element one more time during this time span, the dblclick event is raised instead of the click. The dxclick event is raised immediately after the element is clicked.

• UI Events - Introduction

Raised when the right mouse button is clicked on the element or when the element is held during a specified time period.

Raised when a user has performed a double click on the element.

Raised when the drag gesture has been performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The ratio between the drag distance and the target element's width.

Raised when the drag gesture has been completed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The ratio between the drag distance and the target element's width.

Raised when a user moves the pointer into the element, provided that the drag gesture is being performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Element

The element being dragged.

Raised when a user moves the pointer out of the element, provided that the drag gesture is being performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Element

The element being dragged.

Raised when the drag gesture has been started.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Raised when dragged data has been dropped on the element.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Element

The element being dragged.

Raised when the element is being held during a specified time.

To specify the time span after which the event is raised, pass the object containing the timeout property to the function subscribing to the event.

If you need to subscribe to dxhold for two elements that are in the parent-child relationship, make sure that the timeout of the parent element is equal or longer than that of the child. The following example illustrates the case when the parent's timeout is longer:

<div id="parent">
    Parent element
    <div id="child">
        Child element
    </div>
</div>

$(function() {
    var dxholdHandler = function() {
        alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
        return true; // true - continues event propagation, false - stops
    });

    $("#parent").on("dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
    $("#child").on("dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
});

#parent {
    background-color: aquamarine;
    width: 250px;
    height: 150px;
}

#child {
    background-color: bisque;
    width: 180px;
    height: 100px;
}

<div id="parent">
    Parent element
    <div id="child">
        Child element
    </div>
</div>

import { Component, AfterViewInit } from '@angular/core';
import { on } from 'devextreme/events';
import 'devextreme/events/hold';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
            return true; // true - continues event propagation, false - stops
        }
        const parent: HTMLElement = document.getElementById("parent");
        const child: HTMLElement = document.getElementById("child");

        on(parent, "dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
        on(child, "dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
    }
}

#parent {
    background-color: aquamarine;
    width: 250px;
    height: 150px;
}

#child {
    background-color: bisque;
    width: 180px;
    height: 100px;
}

<template>
<div id="parent">
    Parent element
    <div id="child">
        Child element
    </div>
</div>
</template>

<script>
import { on } from 'devextreme/events';
import 'devextreme/events/hold';

export default {
    mounted() {
        const dxholdHandler = (event) => {
            alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
            return false; // true - continues event propagation, false - stops
        }
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        on(parent, "dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
        on(child, "dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
    }
};
</script>

<style>
#parent {
    background-color: aquamarine;
    width: 250px;
    height: 150px;
}
#child {
    background-color: bisque;
    width: 180px;
    height: 100px;
}
</style>

import React from 'react';
import { on } from 'devextreme/events';
import 'devextreme/events/hold';

import 'devextreme/dist/css/dx.light.css';

let parentStyle = {
    backgroundColor: "aquamarine",
    width: 250,
    height: 150
};

let childStyle = {
    backgroundColor: "bisque",
    width: 180,
    height: 100
};

class App extends React.Component {
    componentDidMount() {
        const dxholdHandler = (event) => {
        alert(`${event.data.elemName} was held for ${event.data.timeout} ms.`);
        return true; // true - continues event propagation, false - stops
        }
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        on(parent, "dxhold", { timeout: 1000, elemName: 'Parent' }, dxholdHandler);
        on(child, "dxhold", { timeout: 750, elemName: 'Child' }, dxholdHandler);
    }

    render() {
        return (
            <div id="parent" style={parentStyle}>
                Parent element
                <div id="child" style={childStyle}>
                    Child element
                </div>
            </div>
        )
    }
}

export default App;

• UI Events - Introduction

Raised when the mouse pointer leaves the element.

This event requires the mouse pointer, and is hence supported only by desktop browsers.

• UI Events - Introduction

Raised when the mouse pointer appears over the element.

This event requires the mouse pointer, and is hence supported only by desktop browsers.

• UI Events - Introduction

Raised when the pinch gesture has been performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The ratio between the current and previous scales.

Number

The ratio between the current and initial scales.

Raised when the pinch gesture has been completed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The ratio between the current and previous scales.

Number

The ratio between the current and initial scales.

Raised when the pinch gesture has been started.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Raised when the browser decides that the pointer is unlikely to produce any more events.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

The event can be raised because of a hardware event; such as, if a device changes the screen orientation while the pointer is active or the number of simultaneous pointers exceeds the supported number, etc.

• UI Events - Introduction

Raised when the pointer takes on the active buttons state.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

For a mouse pointer, this event is raised when the mouse state changes from no buttons pressed to at least one button pressed. For touch and pen pointers, the event is raised when physical contact is made with the digitizer.

• UI Events - Introduction

Raised when a pointer is moved to either the hit test area of an element or one of its descendants.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

Raised when a pointer is moved from either the hit test area of an element or one of its descendants.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

Raised when any pointer parameter has been changed. (Position, tilt, pressure, button state, or contact geometry).

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

Raised when a pointer is moved from either the hit test area of an element or one of its descendants.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

Raised when a pointer is moved to the hit test area of an element or one of its descendants.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

Raised when the pointer loses the active buttons state.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

String

The type of the device that raised the event: mouse, pen or touch.

For a mouse pointer, this event is raised when the mouse state changes from at least one button pressed to no buttons pressed. For touch and pen pointers, the event is raised when physical contact is removed from the digitizer.

• UI Events - Introduction

Raised when a UI component associated with an element is being removed from the DOM.

Raised when the rotate gesture has been performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The rotation angle between the previous and current position.

Number

The rotation angle between the initial and current position.

Raised when the rotate gesture has been completed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The rotation angle between the previous and current position.

Number

The rotation angle between the initial and current position.

Raised when the rotate gesture has been started.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Raised when the swipe gesture has been performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The ratio between the swipe distance and the target element's width or height.

The event supports the direction property that specifies whether the event is raised for horizontal or vertical scrolling. The property can take on the "vertical" and "horizontal" values. The default property value is "horizontal".

• UI Events - Introduction

Raised when the swipe gesture is finished.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Number

The ratio between the swipe distance and the target element's width or height.

Number

The ratio between the distance that should be passed to finish the motion and the target element's width or height.

The event supports the direction property, which specifies whether the event is raised for horizontal or vertical scrolling. The property can take on the "vertical" and "horizontal" values. The default property value is "horizontal".

• UI Events - Introduction

Raised when the swipe gesture is started.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

The event supports the direction property, which specifies whether the event is raised for horizontal or vertical scrolling. The property can take on the "vertical" and "horizontal" values. The default property value is "horizontal".

• UI Events - Introduction

Raised when the transform gesture has been performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The rotation angle between the previous and current position.

Number

The ratio between the current and previous scales.

Object

The distance between the previous and current position.

Number

The rotation angle between the initial and current position.

Number

The ratio between the current and initial scales.

Object

The distance between the initial and current position.

Raised when the transform gesture has been completed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Number

The rotation angle between the initial and previous position.

Number

The ratio between the current and previous scales.

Object

The distance between the previous and current position.

Number

The rotation angle between the initial and current position.

Number

The ratio between the current and initial scales.

Object

The distance between the initial and current position.

Raised when the transform gesture has been started.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Raised when the translate gesture has been performed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Object

The distance between the previous and current position.

Object

The distance between the initial and current position.

Raised when the translate gesture has been completed.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following fields are added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

Object

The distance between the previous and current position.

Object

The distance between the initial and current position.

Raised when the translate gesture has been started.

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. The following field is added to existing fields of this argument object.

Object structure:

Boolean

Allows you to cancel the gesture processing.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4