dom自定义事件
// 事件监听
document.addEventListener('drag:start', function(ev) {
console.log(ev.target)
})
// 触发事件
const dom = document.getElementById("target")
const event = document.createEvent("Event")
event.initEvent("drag:start", true, true)
event.detail = {
x: 100
}
dom.dispatchEvent(event)
事件描述
AbstractEvent
const canceled = Symbol('canceled');
export default class AbstractEvent {
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
static type = 'event';
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
static cancelable = false;
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor({
...this.data,
...data,
});
}
}
SensorEvent
export class SensorEvent extends AbstractEvent {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
DragMoveSensorEvent
export class DragMoveSensorEvent extends SensorEvent {
static type = 'drag:move';
}
const dragStartEvent = new DragMoveSensorEvent({
clientX: startEvent.clientX,
clientY: startEvent.clientY,
target: startEvent.target,
container,
originalSource,
originalEvent: startEvent,
});
感知器
Sensor
感知器:鼠标感知器、触摸板感知器...
export default class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
console.log(options);
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = {...options};
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
*/
this.originalSource = null;
/**
* The event of the initial sensor down
* @property startEvent
* @type {Event}
*/
this.startEvent = null;
/**
* The delay of each sensor
* @property delay
* @type {Object}
*/
this.delay = calcDelay(options.delay);
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter((container) => !containers.includes(container));
}
/**
* 在目标元素上触发感知事件
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
MouseSensor
鼠标感知器
export default class MouseSensor extends Sensor {
}
标签:return,自定义,type,事件,property,data,event,containers
From: https://www.cnblogs.com/zhuxiang1633/p/17025207.html