Converting a native js event object to jQuery event object

Question

I want to convert a native JavaScript event object to jQuery event object.

Actually this is the problem:
I have bound an event handler to documents keyup event via jQuery and there are some text boxes on the page with which a keyup event handler is bound via inline JavaScript.

The problem is when the text box's event handler is fired the document's event handler also gets fired because the event "bubbles up" I can modify the event handler function bound by inline JavaScript but not that line itself.

What I am looking for is a cross browser, a way to cancel the event bubbling that's why I wanted to convert it to a jQuery object.

score 9 · Answer 1 · answered Nov 11 '11 at 16:04

9

Looking to the code of jQuery (I looked at 1.7, but I think it is available before that as well) it is easy to create a jQuery Event from a native event using:

var jQueryEvent = jQuery.Event(event);

answered Nov 11 '11 at 16:04

Aristoteles

708
2
7
15

2

That did not work for me but jQuery.event.fix(event) helped. See http://stackoverflow.com/questions/9508377/how-to-create-a-jquery-event-object-out-of-a-native-browser-event-object – Gábor Nagy Dec 16 '13 at 10:02

score 8 · Accepted Answer · answered Dec 19 '10 at 13:14

8

If all you want to do is prevent an event from bubbling, that's easy without jQuery. Don't be scared of stepping outside the world of jQuery. It's not as complicated as some people would have you believe.

function stopEventPropagation(evt) {
    if (typeof evt.stopPropagation != "undefined") {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

// Example
document.getElementById("yourInputId").onkeyup = function(evt) {
    evt = evt || window.event;
    stopEventPropagation(evt);
};

answered Dec 19 '10 at 13:14

Tim Down

318,141
75
454
536

2

I guess someone didn't like the suggestion that you can do JavaScript without jQuery. – Tim Down Apr 23 '13 at 23:10
1

@Shaheer: There is one (4 up, 1 down). It really doesn't bother me, I just found it curious. – Tim Down Apr 24 '13 at 08:43

score 0 · Answer 3 · answered Dec 19 '10 at 11:18

0

You can remove onclick or whatever inline eventhandler attributes with jQuery right after page load eg.:

$(document).ready(function () {

  $('#someInput').removeAttr('onclick');

});

Then attach Your event handlers to customize behaviour.

answered Dec 19 '10 at 11:18

azAttis

13
6

how would i get the parameters passed to it there are two total ? – Shaheer Dec 19 '10 at 11:25

Converting a native js event object to jQuery event object

3 Answers3