I am trying to imitate jQuery.on("click", ".target", handler) by utilizing addEventListener() method. My research on Stackoverflow end up with this: Native addEventListener with selector like .on() in jQuery.
So, before some one mark my question as DUPLICATE please read carefully my requirements and my demo.
Here is my Plunker demo https://plnkr.co/edit/so8Sur?p=preview ( I am running chrome when testing it ). Following is the explanation for it:
At purple box which is "jQuery way" is running as my expectation which should be show Message popup no matter i am clicking on .target box or it children which is .target-child.
But for green box which is my custom event binding, with custom function: customOn(selector, type, filter, handler), it will only show popup when click on .target box only, but it will not show popup when i click on .target-child.
So, my question is, I wonder what kind of magic used by jQuery to make event to be triggered when click on the .target-child on my demo, while the actual selector filter is .target. Will jQuery traverse up on DOM trees to check any selector match every time it needs to handle delegated event? If yes, i feel it will take enough computation resource ( maybe RAM ), is that right? I hope there will be much efficient way rather than doing traverse up like that.
Any answer and comment will be highly appreciated. Thanks in advance.
Jquery use css selectors as crawling system.
So if you click on something, it will "crawl" the parents until it match (or not) the target.
Related
If I use CEFGlue CefDomVisitor class I can navigate around the DOM. Great, really useful and good job by the developers
Is there any way to pick up what event listeners are associated with a Tag?
Essentially id like to pick up the javascript that 'would' run when the element is clicked (for example). I think I can achieve this by finding out what is listening to the elements event. Then I want to run it independently of the event.
Hope this makes sense, and any help feedback or comment very much appreciated
Thanks
If you are trying to get information about the DOM and the elements that have events jQuery can help you with that. But I am not sure what you are asking.
This isn't exactly what you would be looking for but: $._data( $("#foo")[0], "events" ); from event info from jQuery
I'm using this plugin called "Chosen" to turn my plain old select elements into a find as you type deal.
The problem is my existing page has code that fires when the select element comes into focus, and it seems to no longer fire.
Here's a place you can play around with some sample chosen code if you have any ideas you might want to test. (It's pretty similar to my own code so you can also see how it's implemented.)
that plugin does not seem to have callbacks, that is how i'd do that, instead of .focus() you pass what you need to do on a plugin callback that emulates that event, there is no event "focus" for the markup that the plugin generates.
I'm learning how to do my own Jquery plugin and I'm starting with some basic stuff.
You can see my fiddle here: http://jsfiddle.net/denislexic/8YBM6/8/
This needs to be binded, ie, some of the time the elements will be AJAX loaded, so the plugin still needs to work. (in the fiddle I added a button that copies the content, so I could test it out, but no luck...)
I usually just do live or on. I'm trying to learn and understand.
Thanks
Here's an updated fiddle: http://jsfiddle.net/aR8RQ/1/
Changes I made include:
I'm using event delegation for the 'avatars' element(s). Previously the events were binded using .each() which would have only binded the events on the initial call for the plugin.
I'm using .data() to store the state of the menu (whether it's open or close) and added some event bindings on the document to handle closing the menu.
I added comments to hopefully help you out! I think this does everything you originally asked for (for instance: hiding the menu if you click on anything other than that). There's still some work you can do (for instance, when you "duplicate" you can handle the "close" method for your menus more gracefully!)
Hopefully this helps! :)
I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.
I have a grid and there is a column which contains <a> anchor tag with some additional information in <data-..> tag and has a class name <class='myspeciallink'>. And in my unobtrusive JS script I select all the elements with that class name and apply live('click'). I need that to be live() because the grid gets generated in the runtime.
What happens inside the live('click') handler? I use that additional data and add a <div> to the page based on that data. Which in its turn used to generate jQuery UI dialog. It works great on my computer.
But! How could that work in real-world? Should I be bothered about possible performance implications? I feel that applying live() on more than a dozen elements instantaneously
would affect the performance. Especially with rather complicated handler like mine - it needs to get the data, parse the data, create a div, apply a dialog and etc.
Does that smell like a bad design? Could you suggest a different approach or my concerns are unfounded? Can I use some sort of a profiler tool to find the bottlenecks in my javascript?
UPD: Still nobody suggested any profiling tool. firebug and chrome dev tools are good, but maybe there is something even better?
live("click") is actually better up-front from a performance standpoint: Instead of binding an event handler to each matched element, you're applying a single event handler which waits for events to bubble up and then sees if the element that triggered the event matches the selector .live was called on.
Compare this to $('selector').click(...) which does loop over each element and bind a new event handler. live('click') has no additional overhead regardless of how many page elements match its selector. Depending on how many elements your selector matches, using .live can avoid a delay of up to a few seconds during the initial load of each page.
However, the event handler must check each event which bubbles up against its selector, to see if there is a match. This is going to add a small amount of overhead to every click event, but chances are very good that your users will not notice the difference.
Peter bailey also has a nice post about this: Performance difference between jQuery's .live('click', fn) and .click(fn)