Как правильно выполнить пользовательские события JavaScript

Question

Я пытаюсь понять, как настраиваемый тип события связан с конкретным действием/триггером пользователя. Кажется, что вся документация отправляет событие без какого-либо взаимодействия с пользователем.

В следующем примере я хочу, чтобы событие отправлялось после того, как пользователь навешивает элемент на 3 секунды.

var img = document.createElement('img');img.src = 'http://placehold.it/100x100'; 
document.body.appendChild(img) 
var event = new CustomEvent("hoveredforthreeseconds"); 

img.addEventListener('hoveredforthreeseconds', function(e) { console.log(e.type)}, true); 


var thetrigger = function (element, event) { 
    var timeout = null; 
    element.addEventListener('mouseover',function() { 
     timeout = setTimeout(element.dispatchEvent(event), 3000); 
    },true); 
    element.addEventListener('mouseout', function() { 
     clearTimeout(timeout); 
    },true); 
}; 

У меня есть спусковой крючок, но нет логического способа подключения его к событию.

Я думал о создании объекта под названием CustomEventTrigger, который по существу CustomEvent, но имеет третий параметр для триггера, а также создание метода, называемого addCustomEventListener, который работает так же, как addEventListener но когда инициализируется она передает целевой элемент в триггер настраиваемого события, который затем отправляет событие, когда ему дается указание.

Answer 1

Пользовательские события должны запускаться программно через dispatchEvent, они не запускаются DOM. Вам всегда нужно явно называть их в вашем коде, например, в ответ на событие, генерируемое пользователем, такое как onmouseover, или изменение состояния, например onload.

Вы очень близки к рабочей реализации, однако вы сразу же вызываете dispatchEvent в своем setTimeout. Если вы сохраните его в закрытии (как показано ниже), вы можете вызывать dispatchEvent при прохождении элемента после того, как setTimeout закончил таймаут.

Это также хорошая практика, чтобы объявить переменные в верхней части файла, чтобы избежать возможных проблем с областью.

var img = document.createElement('img'), timeout, event, thetrigger; 

img.src = 'http://placehold.it/100x100'; 
document.body.appendChild(img); 

img.addEventListener("hoveredForThreeSeconds", afterHover, false); 

thetrigger = function (element, event) { 
    timeout = null; 
    element.addEventListener('mouseover',function() { 
     timeout = setTimeout(function(){ element.dispatchEvent(event) }, 3000); 
    },true); 
    element.addEventListener('mouseout', function() { 
     clearTimeout(timeout); 
    },true); 
}; 

function afterHover(e) { 
    console.log("Event is called: " + e.type); 
} 

event = new CustomEvent("hoveredForThreeSeconds"); 

thetrigger(img, event); 

Answer 2

Я создал метод, называемый addCustomEventListener, который работает так же, как addEventListener но когда инициализируется проходит целевой элемент в пользовательском триггер событий, который отправляет событие, когда он говорит, так что в данном случае это только рассылает, если таймаут достигает 3 секунд.

var img = document.getElementById('img'); 
 

 
window.mouseover3000 = new CustomEvent('mouseover3000', { 
 
    detail: { 
 
    trigger: function(element, type) { 
 
     timeout = null; 
 
     element.addEventListener('mouseover', function() { 
 
     timeout = setTimeout(function() { 
 
      element.dispatchEvent(window[type]) 
 
     }, 3000); 
 
     }, false); 
 
     element.addEventListener('mouseout', function() { 
 
     clearTimeout(timeout); 
 
     }, false) 
 
    } 
 
    } 
 
}); 
 

 
window.tripleclick = new CustomEvent('tripleclick', { 
 
    detail: { 
 
    trigger: function(element, type) { 
 
     element.addEventListener('click', function(e) { 
 
     if(e.detail ===3){ 
 
      element.dispatchEvent(window[type]) 
 
     }  
 
     }, false); 
 
    } 
 
    } 
 
}); 
 
EventTarget.prototype.addCustomEventListener = function(type, listener, useCapture, wantsUntrusted) { 
 

 
    this.addEventListener(type, listener, useCapture, wantsUntrusted); 
 
    window[type].detail.trigger(this, type); 
 
} 
 

 
var eventTypeImage = function(e) { 
 
    this.src = "http://placehold.it/200x200?text=" + e.type; 
 
} 
 

 
img.addEventListener('mouseout', eventTypeImage, false); 
 
img.addEventListener('mouseover', eventTypeImage, false); 
 
img.addCustomEventListener('mouseover3000', eventTypeImage, false); 
 
img.addCustomEventListener('tripleclick', eventTypeImage, false);

<img id="img" src="http://placehold.it/200x200?text=No+hover" ;/>

Я думаю, что это может быть полезным для других, так, пожалуйста, не стесняйтесь, чтобы улучшить это.