I need to replace the Bind event from JQuery with some event from JavaScript.

I am developing a Bookmarklet and i received order to replace jQuery with JavaScript

I have the following code

$(document).unbind("mousemove", X.highlighter);

$(document).bind("mousemove", X.highlighter);

and also

var current, overlay = $("#overlayhighlight"), o = $('#y');

this last 3 I can replace with document.getElementsByID

the bind and unbind ... no clue

I need to replace the Bind event from JQuery with some event from JavaScript.

I am developing a Bookmarklet and i received order to replace jQuery with JavaScript

I have the following code

$(document).unbind("mousemove", X.highlighter);

$(document).bind("mousemove", X.highlighter);

and also

var current, overlay = $("#overlayhighlight"), o = $('#y');

this last 3 I can replace with document.getElementsByID

the bind and unbind ... no clue

• javascript
• jquery
• bind
• bookmarklet
• unbind

Share Improve this question Follow asked Jun 15, 2012 at 9:50 Ionut Flavius PogacianIonut Flavius Pogacian 4,8111515 gold badges6262 silver badges101101 bronze badges 4

• JQuery has great cross-browser support, tell your client that JQuery is more reliable ;-) – musefan Commented Jun 15, 2012 at 9:51
• we know, but this is a plex bookmarklet and we should use only js; if a website does not have jquery, the bookmarklet will crack instalntly – Ionut Flavius Pogacian Commented Jun 15, 2012 at 9:54
• Why don't you then load jQuery in the bookmarklet if it doesn't exist then? You cannot just replace these with javascript, jQuery events include dozens of fixes and features you might be using. Every little thing you have taken for granted must be now coded by you. – Esailija Commented Jun 15, 2012 at 9:58
• no jquery code is allowed; it could break the website or bookmarklet; i did not know this when i started, but now, jquery must not be used; it's plicated :d – Ionut Flavius Pogacian Commented Jun 15, 2012 at 10:02

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

document.onmousemove(function(){
//do something here
});

var current, overlay = doucment.getElementById("overlayhighlight"), o = docuemnt.getElementById('y');

You can replace jquery code by javascript code like above

Have a look at element.addEventListener() (MDN docu) and element.removeEventListener (MDN docu).

document.addEventListener( 'mousemove', X.highlighter );

document.removeEventListener( 'mousemove', X.highlighter );

Use the below sample to attach simple events

if (document.addEventListener) {  
      document.addEventListener('mousemove', modifyText, false);   
    } else if (document.attachEvent)  {  
      document.attachEvent('onmousemove', modifyText);  
    }  

Add this to the top of your script and work with jQuery as usual, if a website does not have jquery, doesn't matter.

var js = document.createElement("https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);

document.onmousemove=X.highlighter;//bind

document.onmousemove=null;//unbind

Check our this link for lots of mouse event information, more specifcally this one:

Mousemove

The mousemove event works fine, but you should be aware that it may take quite some system time to process all mousemove events. If the user moves the mouse one pixel, the mousemove event fires. Even when nothing actually happens, long and plicated functions take time and this may affect the usability of the site: everything goes very slowly, especially on old puters.

Therefore it’s best to register an onmousemove event handler only when you need it and to remove it as soon as it’s not needed any more:

element.onmousemove = doSomething;
// later
element.onmousemove = null;