Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

document.body.addEventListener is not working

I'm working on a screen reader project and I needed to get the paragraph under the cursor. To do that in Firefox, I wrote an extension, to which my screen reader connects through sockets and gets the text. I needed to get the current element under the cursor and the function worked fine in a sample html page written by myself (So there is no problem with the function).

But when I try to attach the function to my JS file in the extension, It seems that the function which is called by "document.body.addEventListener('mouseover',myfunc(mEvent),false);" is never called. But if I call

document.body.addEventListener('mouseover',function(mEvent){...},true);

myfunc is called.

I'm new to javascript, so excuse me if it's a stupid question, But why the

document.body.addEventListener('mouseover',function(mEvent){...},true);

is not working?

I always appreciated your nice helps and ideas. :)

like image 726
Luke Avatar asked Aug 23 '11 21:08

Luke


People also ask

What is document body addEventListener?

Definition and Usage. The addEventListener() method attaches an event handler to a document.

How do you add an event to your body?

To add an event listener to the body element: Access the body element on the document object. Use the addEventListener() method on the body element in the useEffect hook. Remove the event listener when the component unmounts.

Is it better to use onclick or addEventListener?

Summary: addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.

How do you check if there is an Eventlistener?

Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.


1 Answers

While this isn't a direct answer to your question, I hope that it is helpful nevertheless. Using an extension for a screen reader is unnecessary, in particular you might not want to update that extension regularly as the browser's user interface changes. Firefox supports a number of accessibility APIs which you can use directly from your application. These APIs have the advantage of being stable, once your implementation is done it should continue working (as far as I remember there was only one occasion where Mozilla broke compatibility with existing screen readers).

As to the actual question: you didn't tell anything about the context in which this code is executing. Normally, extensions run code in their XUL overlay meaning that the context is the browser window, not the web page. Which would explain why your code isn't working (it's a XUL document, no document.body there). What you probably mean is attaching an event listener to the <tabbrowser> element where the web pages are loaded: gBrowser.addEventListener(...). Side-note: If you really wanted to catch all events on a XUL document you should register an event listener on document or document.documentElement.

Btw, you can see error messages related to extensions in the Error Console (the article I link to explains how to enable it in the current Firefox versions).

like image 161
Wladimir Palant Avatar answered Sep 21 '22 07:09

Wladimir Palant