Custom event in javascript

Question

I know that there is a lot of questions like mine, but I don't think it's a duplicate.

I want to create my own custom event, for exemple onresize or onshake.

And I would like to make a library, then the user of my library would just write that :

<script src="theLib.js" ></script>
<script>
window.addEventListener("shake",myFunc,false);
</script>

I saw a lot of tutoriels and questions on stackoverflow but either they are using jQuery(I want the most simple exemple to make a custom event) or the user must not just write window.addEventListener.

Can you please explain me the most basic way to add a custom event?

There's a great MDN article about just that (document.createEvent) developer.mozilla.org/en/DOM/document.createEvent — Saebekassebil
– Saebekassebil, Commented Jun 7, 2012 at 19:51

user1365010 · Accepted Answer · 2012-06-08 12:25:58Z

2

I found the answer finally :

//Library part
var evt=document.createEvent("Event");
evt.initEvent("foo",true,true);
function blah()
{
    window.dispatchEvent(evt);
}
window.addEventListener("load",blah,false);

//User part
window.addEventListener("foo",function(){alert("Hi");},false);

answered Jun 8, 2012 at 12:25

user1365010

3,3838 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:58:14Z

1

You'll want to trigger the event somehow. This answer gives particularly good depth: How to trigger event in JavaScript?

You'll probably have to use document instead of window, though.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 7, 2012 at 19:49

Will

1,61915 silver badges20 bronze badges

4 Comments

Will Over a year ago

From what I understand, by sing the initEvent method you create an event which can be fired on any element--the document, the window, a text field, whatever. So you simply use addEventListener on any object which gets that event fired.

user1365010 Over a year ago

And where do I write the tests (for exemple, testing if the iphone is shaked or not)

Will Over a year ago

Anywhere in the document. Doesn't matter where. The trouble is figuring out when the phone is shaken, but it seems like you've taken care of that.

user1365010 Over a year ago

then, I write function dataavailable(){/*Tests*/} then the code of stackoverflow.com/questions/2490825/…, then window.addEventListener("dataavailable",otherFunc,false); ???????

Collectives™ on Stack Overflow

Custom event in javascript

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related