2015-04-27 23 views
12

jestem wywołując pewne zdarzenia DOM z jQuery triggerHandler()spust zwyczaj wydarzenie bez jQuery

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>stackoverflow</title> 
 
    <script src="http://ajax.googleapis.com:80/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $(document).on('hey', function(customEvent, originalEvent, data) { 
 
     console.log(customEvent.type + ' ' + data.user); // hey stackoverflow 
 

 
     }); 
 

 
     // how to this in vanilla js 
 
     $(document).triggerHandler('hey', [{}, { 
 
     'user': 'stackoverflow' 
 
     }]) 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

Jak mogę powodować to bez jQuery?

Ważne: Muszę wiedzieć, typ zdarzenia i dane niestandardowe

+1

pod kołdrą jQuery będą używać document.addEventListener ('hej', function() {...}); gdzie jest kliknięcie, mousedown itd. Czy to masz na myśli? – garryp

+0

Czytanie źródła jQuery pokazuje, jak to się robi, ponieważ jQuery jest JavaScript. –

+0

O ile pamiętam, jquery łączy '.dispatchEvent' i' .fireEvent' dla triggerHandler. Możesz łatwo napisać funkcję, aby wypróbować jedną lub drugą. zdarzenie wysyłki będzie działać w większości przeglądarek. – David

Odpowiedz

10

Jeśli chcesz replikować zachowanie jQuery z dokładnością , prawdopodobnie najlepiej będzie przekopać się przez jQuery source code.

Jeśli chcesz tylko normalnie wysyłać i odbierać zdarzenia, zobacz CustomEvent, aby dowiedzieć się, jak wysłać zdarzenie z danymi niestandardowymi i addEventListener, aby dowiedzieć się, jak go odsłuchać.

Wasz przykład będzie prawdopodobnie wyglądać jak

document.addEventListener('hey', function(customEvent) 
{ 
    console.log(customEvent.type + ' ' + customEvent.detail.user); // hey stackoverflow 
}); 
document.dispatchEvent(new CustomEvent('hey', {'detail': {'user': 'stackoverflow'}})); 
+2

Konstruktor 'CustomEvent' nie ma wsparcia w IE. – Johnston

+2

@Johnston Ale wygląda na to, że jest tam [polyfill] (https://github.com/krambuhl/custom-event-polyfill/blob/master/custom-event-polyfill.js). – Siguza

+0

Tak i działa świetnie – Johnston

Powiązane problemy