Develop Reference

Detect what div 'id' or 'class' was clicked on page without jQuery

Is there a way to write an event on the page to listen for any and all clicks on the page and return their id or class name. I can't seem to find anything that does it without the use of jQuery. Example:
document.body.addEventListener('click', function(event)
console.log(event.target.id)
console.log(event.target.className);
});
Seems very simple but I am just having a hard time getting it to work. I have tried setting the event listener to the window as well.

I figured it out. I was clicking inside of an iframe and therefor it wasn't returning any values. Works outside of an iframe like intended. Thanks all!

document.body.addEventListener('click', function(event){
console.log(event.target.id)
console.log(event.target.className);
});
missing {

How to detect mobileinit and custom events through Javascripts AddEventListener?

I have an overrides.js script, which sets defaults in my application like so:
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = "fade";
$('html').addClass('viewGrid');
console.log("mobileinit detected in overrides");
$(window).trigger('jqm-ready');
});
The overrides.js is pulled in via requireJS after Jquery has loaded and before Jquery Mobile loads. On my page I have this snippet in the footer:
console.log("page done loading");
window.addEventListener('jqm-ready', function(){
console.log("detected jqm-ready")
// run some code
});
document.addEventListener('mobilelinit', function(){
console.log("mobilelinit detected from page");
// run some code
});
My console displays the following:
page done loading
mobileinit detected in overrides
So, I'm not able to detect mobileinit or my custom jqm-ready event through my eventListener added on the page.
As I'm using requireJS I cannot use Jquery to detect mobileinit/jqm-ready, because the page is parsed before Jquery has loaded. I hoped to be able to detect either event, but no luck so far. I need to detect them because the code I need to run needs to bind to Jquery Mobile events.
Question:
Is there something wrong in my snippet or why can't I bind to either mobileinit or jqm-ready like this?

You have a typo in the event name, see:
document.addEventListener('mobilelinit', function(){
^----- TYPO HERE (should be mobileinit)
That is probably why you were not seeing the event.

Ok. I got it... I think I can't use Jquery's trigger for events that I added listeners to using addEventListener. But maybe not. Anyway this works:
var trigAnalytics = function( trigger ){
console.log("triggered by "+trigger);
};
document.addEventListener("jqm_ready",function(){console.log("jqm_ready"); trigAnalytics("jqm_ready");},false);
And in overrides.js
console.log("Hello now");
var evt = document.createEvent("Event");
evt.initEvent("jqm_ready",true,true);
document.dispatchEvent(evt);
Works.

In Javascript (jquery), is there a way to detect when the page anchor changes?

Basically, I want to have links throughout the page that change the anchor -- the part of the URL after a # symbol. When that part of the URL changes, the JavaScript should respond.
I could add an onclick method to every link, but is there a better way?

That's not an anchor, it's the hash?
$(window).on('hashchange', function() {
alert('My fracking hash changed to : '+document.location.hash);
});

$(window).bind('hashchange', function() {
// code here
});
think that should do it

In jQuery you don't need to add onclick events to all links individual. With a selector like $('a') you could add an event to all of your links at once.
$('a').click(function(){
// code here
});
Inside this event you can use the $(this) object to get the href.
But I suggest that the other answers show you a more elegant way for solving this problem.

you can add a delegate to a,
$(elements).on(events, selector, data, handler);
the difference is it won't add "onClick" to every a element, but it will catch the "onClick" event of a

First of all you have to pick the element.
For example var links = $("a");
Then you add the jquery function .click()

Try this
Store window.location.hash on a global variable, say, currentHash
Create a function to check window.location.hash !== currentHash
If the check fails set currentHash = window.location.hash
Execute this function using setInterval on DOMReady

Sammy.js is your friend here. I've used it on a SPA I'm working on and I love it!

Click event is not triggered in jQuery

I am binding a click event with an elementid like this:
$("#a").bind({click : dosomestuff });
After that when I am trying to trigger it with the .trigger() function like this:
$("#a").trigger("click");
The function is not triggering. Can anybody tell me the problem?

A few things that could be wrong in order of likelihood:
You didn't put this code inside $(function() { ... });, so the element wasn't ready yet.
The element doesn't exist (you can check this via your developer console)
jQuery isn't loaded
You're deliberately creating the element later; use .on() instead of .bind().

You may don't put you code within
$(function() {
});
or
if your #a in dynamic then try
$('document').on('click', '#a', dosomestuff); // it would be better to
// replace document with
// `#a`'s parent

if you are trying to bind click event to an anchor tag then you should use
$("a").bind('click',function(){
//do your stuff here
} );

jQuery - Add e.preventDefault() to all links click events?

I'm making a script in jQuery, and I have many click links click events. The thing is that I don't want the links I have click events for to do anything except the event, so I put an e.preventDefault(); at start of all my click events. But I have many click events, so is there a more simple way to just add the e.preventDefault(); to all the links click events? Remember I also have some links that I want to work as they should, so adding the e.preventDefault(); to all the links won't work, I only want to add it to links with click event.

you can use jquery namespaced events
http://docs.jquery.com/Namespaced_Events
HTH
you can do something like this for the links you want to add a click event but prevent the default behaviour
$('a.someClass').bind('click.dontClick',function(e){
e.preventDefault();
});
and for the links you want the normal click behaviour
$('a.clickClass').bind('click.doClick',function(e){
//your event handling code here
});
DEMO

You could try overriding the bind method, or the click method, before any of your binding code runs. Here I'm overriding the click method in a fairly hacky way. I would really recommend just calling preventDefault where you need it.
(function(){
var original = jQuery.fn.click;
jQuery.fn.click = function(){
// wrap your function in another function
var f = arguments[0];
arguments[0] = function(e) {
e.preventDefault();
f(e);
}
original.apply( this, arguments );
}
})();
Example in action: http://jsfiddle.net/k4jzb/

This SO answer details how to detect events on an element, but it looks like the asker took that answer and built a jQuery plugin for selecting elements based on their event listeners.
So you could use that plugin and then use some event delegation like so:
$(document).delegate('a:Event(click)', 'click', function (e) { e.preventDefault(); });
Warning: I've never used this plugin myself, and I'm not really familiar with custom jQuery CSS filters, so this might not actually work. At all.

I would take #3nigma's answer a little further. Usually the links you don't want to do default actions on are like <a href="#">
So filter out these links so the page doesn't jump when clicked. I use jQuerys filter() function. Not sure if that is the best. What do you think?
$('a').filter(function(i) {
return $(this).attr("href") === "#";
})
.bind('click.dontClick',function(e){
e.preventDefault();
})
Example here: Filter a tags containing #