Develop Reference

addEventListener 'click' event not recognizing click and not calling function

EDIT: Removed all question content because I wiped my JavaScript clean and started from scratch and it worked. As far as I can tell I did not do anything different from the first time. I'm still not sure why it wasn't working before, but it is working now. See answer below for working addEventListener click/toggle event.

The argument to an event listener is the event. If you want the element the event listener is attached to, reference the currentTarget of the event.
function activateOffCanvasNav(e) {
e.currentTarget.classList.toggle('active');
}
If you try to do e.classList.toggle instead, like you're currently doing, you'll get a TypeError, since events don't have a classList property.
Working live demo:
document.getElementById('hamburger-icon').addEventListener('click', activateOffCanvasNav);
function activateOffCanvasNav(e) {
console.log('here')
e.currentTarget.classList.toggle('active');
}
.active {
background-color: green;
}
<header>
<!-- small screens only -->
<div class="small-nav-header">
<a id="nav-toggle" href="#!">
<div id="hamburger-icon" class="hamburger-icon">
<div class="bar1">bar</div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
</div>
</header>

How to prevent modal click-through?

I have a modal that looks something like this:
<div className="modal modal-focuser" tabindex="1" style="z-index: 5;">
<div className="handle-modal-close"></div>
<div className="modal-content modal-content">
<div className="body">
<span>
<div className="container">
<div className="title-text">Title Text</div>
<div className="body-text">Body Text</div>
</div>
<button onClick={this.toggleView} className="toggle-view">Switch View</button>
</span>
</div>
</div>
</div>
With the click code like the following:
toggleView = e => {
e.stopPropagation();
this.setState(prevState => ({ view: !prevState.view}));
}
But for some reason (despite the stop propagation), when I click the button, sometimes the parent's event handlers are still being activated.
That is, there is a table behind the modal with click-able rows, and when I click the Toggle button in the modal, not only is that button clicked, but also the table row behind the behind (which also has its own click event handlers)
The stranger thing is that this only sometimes happens, and only happens on mobile. Try as I might, I can't replicate the behavior on my PC in Chrome or Firefox.
What could be causing this?

You're using the onclick handler, which essentially ignores all the propegation through down-up events. Try using onmousedown. Chances are the thing underneath the modal has a down or up event. Learn about "bubbling" : What is event bubbling and capturing?
<button onMouseDown={this.toggleView} ... yada yada
Using the mousedown will allow you to prevent bubbling through the stopPropegation, and maybe also look into stopImmediatePropegation -- which prevents other listeners of the same type (click, down, up) from getting called: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

Event delegation works with document but not with parents

I have the following HTML code, and i am currently trying to add the 'selected' class when a photo is clicked, and to remove the class when it is clicked again.
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="photos/skyemonroe.jpg">
<div class="details">
<div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
<div class="date">12/24/2000</div>
<div class="photographer">Alasdair Dougall</div>
</div>
</div>
//Repetitions of the photo class.....
</div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
I am currently using the following jquery code to bind an event handler to the photo's ancestor so that when more pictures are appended to the page when clicking the more photos button, the jquery code will still work with these newly added pictures.
jQuery
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
The jQuery code above DOES NOT work when i try using the #gallery, NOR does it work when i try using #container.However, the code works when i use $(document) for the event delegation.
I can't seem to figure out why binding the event handlers to the parent elements do not work, but binding it to the document itself makes it work.
Would appreciate any insights into the matter
EDIT: Added the jsfiddle here http://jsfiddle.net/744cX/ ( The code works in the fiddle, but does nothing on my laptop, and i can't seem to figure out why)

You can listen event on '.photo' class
<div class="photo" onclick="$(this).toggleClass('selected');">

I forked your fiddle and as can be seen here:
http://jsfiddle.net/6Qz8C/1/
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
I did:
when the nextpage event is fired, append a new photo.
add the event delegation when the document is ready.
set the delegator to the #gallery

function work without class that call for function

I have two classes and a function that works with one of them
$('.div-image').click(function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});
and html something like:
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
Why after first click on the image or (div .div-image) my class div-image is changing to div-image-big. But if we click once more the function $('.div-image').click(function(){...} will execute again. The question is why so? I don't need this behavior. I want that this function work only when class is div-image not div-image-big. Thanks.

The event handler is bound on the element, not the class. Which elements it is bound to is decided based on the class they have at the time that the event is bound, so changing the class later doesn't change which elements have the event handler.
If you want the event handler to react to the class, you should bind a delegate to the a parent element. That way the event bubbles to the parent element, and the delegate handler will check for the class at that moment. Example:
HTML:
<div class="image-container">
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
</div>
Javascript:
$('.image-container').on('click', '.div-image' ,function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});

Detecting clicks inside a div using wildcards in jQuery

I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class

I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.

Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});