How to create my own HTMLEvent onMyOwnEvent="alert('Hey

Talk about add-ons and extension development.
asrev2000
Posts: 4
Joined: December 20th, 2007, 7:10 am

How to create my own HTMLEvent onMyOwnEvent="alert('Hey

Post by asrev2000 »

Hi there,

i've read through lot of documents know and I still can't find anything that helps me with my problem:

I want to write a Web-Site where I can add my own events into almost any HTML-Tag. Just like this:

<div onMyOwnEvent="alert('Hey' + e.someData);">...</div>

Now I do want to trigger the "MyOwnEvent" from my extension whenever I want.
Obviously I want to trigger it in a way that the JavaScript defined there doesn't get executed by my Extension for security reasons. Also I do want to pass some extra data in an event-object like other events do.

How can i implement such a thing?

Thanks a lot in advance.
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post by max1million »

??
http://developer.mozilla.org/en/docs/Co ... eged_pages
http://forums.mozillazine.org/viewtopic.php?t=171216

Maybe you want both the event listener and to "createEvent" in the page's document. If only the current page/tab/window window.content.document from the extension.
asrev2000
Posts: 4
Joined: December 20th, 2007, 7:10 am

Post by asrev2000 »

Hi Max,

thanks for the links. But i really don't want to "hack" this by appending other child elements to the domtree. I really want to create a new event which can be used like any other event in the HTML domtree. Like the good old onLoad="javascript" onChange="javascript" way just with my new event. So the HTML on the web-site just needs to do <div onBlah="takesomeaction();"> and i want to trigger "Blah" from my extension.

Any ideas?
semicloud
Posts: 99
Joined: December 9th, 2007, 9:36 pm

Post by semicloud »

I don't see why you need to create your own event. The whole point of event is to trigger something. If you can give us a more specific example of what you are talking about, we might be able to help you.
asrev2000
Posts: 4
Joined: December 20th, 2007, 7:10 am

Post by asrev2000 »

Hmm, i thought I already explained that. However I can give you more details if that helps:

I'm writing an extension which will add some buttons to the toolbar. Whenever the users presses a button in the toolbar i want an event to be triggered on the HTML-Dom.

So on the HTML-Page i want to have code like this:
<html>
...
<div onToolBarButtonPressed="alert('Omg, somebody pressed a button in the toolbar');">...</div>
</html>

My toolbar button obviously needs to trigger the "onToolBarButtonPressed" event on the HTML-Dom. Unfortunately there is no such event. So I need to create that somehow.
semicloud
Posts: 99
Joined: December 9th, 2007, 9:36 pm

Post by semicloud »

You do not need to write a custom event for that. This should work.

<div onclick="alert('hello')"> Click here </div>
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Fire "myevent" on web page element from extension

Post by max1million »

Fire "myevent" on web page element from extension with extra data as attribute "myextra". Listener reads "onmyevent" and "myextra" attributes of the element, and executes "onmyevent".

Fire event from extension:

Code: Select all

function myEvent(aId, aExtra){
//*** aId is id of element
//*** aExtra is passed as attribute "myextra" of element
//*** content.document is document of current page
  var doc = content.document;
  var elm = doc.getElementById(aId);
  if (elm && "createEvent" in doc) {
    //*** set myextra atteribute on elm
    elm.setAttribute("myextra", aExtra);
    //*** fire myevent on elm
    var evt = doc.createEvent("Events");
    evt.initEvent("myevent", true, false);
    elm.dispatchEvent(evt);
  }
}

myEvent("my-div", "some extra info");
Add listener to page:

Code: Select all

<script type="application/x-javascript">
  function myeventListener(event){
    var elm = event.target;
    var att = elm.getAttribute("onmyevent");
    //*** attribute "myextra" is set in extension code
    var myextra = elm.getAttribute("myextra");
    if (elm && att){
      //*** onmyevent can use above variables cause it executed here
      //*** execute (eval) in scope of page's window object
      window.eval(att);
    }
    //*** clean up
    if (elm.hasAttribute("myextra"))
      elm.removeAttribute("myextra");
  }
  window.addEventListener("myevent",myeventListener,false);
</script>

<div id="my-div"
  onmyevent="alert('Omg, somebody pressed a button for ' +elm.id +'\n' +myextra);"
>...</div>
asrev2000
Posts: 4
Joined: December 20th, 2007, 7:10 am

Post by asrev2000 »

Hi max1million,

i tried it and it works pretty well! Thanks a lot.
I actually had to pass a whole object in the "myextra" which didn't work so i just added some JSON en/decode and now it's working fine.
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post by max1million »

Setting a property with the object may also work. And either way it doesn't need to be on the object of the event, it could be on the page's window. Just set it to null after each use and reuse it.

note: I had trouble with the idea of adding a property to the event.
marvelousmogli
Posts: 122
Joined: November 16th, 2007, 10:01 pm

Post by marvelousmogli »

Sorry to re-open this. But I've a similar case:

Code: Select all

<iframe id="content-body" src="chrome://myext/content/my.html" height="20" width="300" scrolling="false"/>
<iframe id="content-body1" src="http://www.mysite.com/my.html" height="20" width="300" scrolling="false"/>


I want the javascript within my.html to communicate with XUL elements. BTW, the above iframe is a XUL iframe.
What's the best way? Is that possible?
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post by max1million »

If you mean to send data from a web page to chrome, you set an attribute or property and create an event somewhere in the page and listen for it in the chrome that is an ancestor. The ancestor, perhaps a chrome: (xul) window, dialog or page that those 2 iframes may be in. When you get the event read the attribute or property from the web page.
http://developer.mozilla.org/en/docs/Co ... eged_pages

Basically you use the web page as the data storage (attributes or properties) and the place to create the events, since the chrome (ancestor) and the web page (descendant) both have read/write capability on the web page's window object on down to do so. Both can also listen for the events and get the data from the web page. The web page doesn't have the same read/write freedoms with chrome code.
marvelousmogli
Posts: 122
Joined: November 16th, 2007, 10:01 pm

Post by marvelousmogli »

I implemented this and works fine.
One thing that did trouble was sending object to the webpage. By the time the object reached the event handler on the webpage it had lost all it's data members. Which is strange. So I had to send JSON encoded string and create the final object on the webpage.

Wish, if there was some better but secured way. Thanks anyways.
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post by max1million »

If set as an attribute its just a string like [object Object].
If set as a property it should be an real object.

var x = {y:'y',z:'z'}; // a simple object with 2 string properties
elm.x = x; // object x as property of elm
marvelousmogli
Posts: 122
Joined: November 16th, 2007, 10:01 pm

Post by marvelousmogli »

Oh ok. Rather than using setAttribute, I should have added a custom property to the elm. So when you setAttribute the object.toString will be used.
Right?

That's some learning for the day. Thanks a lot.
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post by max1million »

Yes, automatically toString because an attribute is a string.

Also for cleanup can set the property equal to null or or just delete it.
elm.x = null;
or
delete elm.x;
Post Reply