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
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 );
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;