JQuery to event listener [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

I need to turn these jquery functions into event listeners and i have tried lots of different ways but i am not 100% familiar with Jquery. Can some one please help

The reason they need to be event listeners is becuase they are for a canvas drawing application and they must be able to be turned off after use as they contiuosly run once activated.

$("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseUp(e);});

If they can be in the format that would be even better. The line is the button that will activate these :D thankyou

 var line = document.getElementById('rubber');


     line.addEventListener('click', function () {


  "content here "    

 });

Answer 1

Sure, what you are looking for is jQuery.on() and jQuery.off().

So this is the code for you example.

function onClick (e) {
    console.log("content here");
}
var $line = $('#rubber')
           .on("click", onClick);
// to remove later
$line.off("click", onClick);

Also check out jQuery.one(), as this attaches a listener to an object and removes it after firing once.

Answer 2

Are you looking for this.

var el = document.getElementById('canvas');
el.addEventListener('mousedown', function(e){
    handleMouseDown(e);
}, false);

el.addEventListener('mousemove', function(e){
    handleMouseMove(e);
}, false)

el.addEventListener('mouseup', function(e){
    handleMouseUp(e);
}, false)

el.addEventListener('mouseout', function(e){
    handleMouseUp(e);
}, false)

Answer 3

I dont know what is exactly what you want. I think you want Event Handlers:

$("#canvas").mousedown(eventHandler);



function eventHandler(e){

 //do your stuff

}

Also I recommend you to use bind instead of shortcuts:

http://api.jquery.com/bind/

Answer 4

Try it like this.

$("#canvas").mousedown(handleMouseDown);
$("#canvas").mousemove(handleMouseMove);
$("#canvas").mouseup(handleMouseUp);
$("#canvas").mouseout(handleMouseUp);