I have a bunch of event listeners as illustrated below :
<a id="target0" >target0</a>
<div id="container">
<a id="target1" >target1</a>
<a id="target2" >target1</a>
<a id="target3" >target1</a>
.. more targets with event listeners
<script>
document.getElementById("#target1").addEventListener("click", ...);
document.getElementById("#target2").addEventListener("mouseover", ...);
document.getElementById("#target3").addEventListener("mouseout", ...);
...
</script>
</div>
<script>
document.getElementById("#target0").addEventListener("click", ...);
</script>
How do I write a function that will kill ALL DOM elements with event listeners binded to them ( with function reference or anonymous functions ) that are inside the container div ?
function killEvtListenersInsideContainerDiv(){
// loop to all DOM elements inside container that has event listeners and disable them
}
The container div is dynamically loaded by AJAX so the event listeners inside them will vary. The only one "static" is target0.
If you will have more than ont container you should add inside class for each a, something like this:
<div>
<a class="container1" id="#target1"></a>
...
</div>
To remove events there are two ways, I recommend the second because it easier and more modern:
1)Use native javascript, only if you can't use jquery for some technical reasons
var elements = document.getElementsByClassName("container1");
elements.forEach(function(elem, i, arr) {
element.removeEventListener("click");
}, this);
2)Use jquery:
//set
$('.container1').click(function() {
alert("click");
});
//remove
$('.container1').click(function(){}); //just empty function() :) the same as .click(null)
UPDATE: If you can't add class use this
javascript:
var elements = document.querySelector('#idDiv a'); //or '.classId a'
elements.forEach(function(elem, i, arr) {
element.removeEventListener("click");
}, this);
jquery
$('#idDiv a).click(function(){});
There is no way to check if event has been set before, if you really need you should implement this functionality with your hands(use flags for example). If function has already existed, new function will always override previous. In 99.9% cases it is enough.
Related
The problem:
I have 134 elements which must have an onclick event attached.
I am doing this by now, on eeeeeeevery single one of them (and they have an ondbclick event attached too!):
<div id="id1" class="name" onclick="functionName(this.id)"></div>
<div id="id2" class="name" onclick="functionName(this.id)"></div>
<div id="id3" class="name" onclick="functionName(this.id)"></div>
but read in Eloquent Javascript (chapter 14) that this is considered bad practice, since it mixes html and javascript.
So I thought I could find a way to attach the onclick event to all of them together. I searched a few hours and tried a few things, like this: (from 'How do you set a JavaScript onclick event to a class with css' here on stackoverflow)
window.onload = function() {
var elements = document.getElementsByClassName('nameOfTheClass');
for(var i = 0; i < elements.length; i++) {
var OneElement = elements[i];
OneElement.onclick = function() {
//do something
}
}
}
Which got the click to work on the elements, but not my function.
My original function was receiving two values, the id and the innerHTML of the element that got clicked, and now I cannot find a way to access that information.
I tried OneElement.id and OneElement.innerHTML just to find out that it gets the id and innerHTML of the last of the elements in the document.
Any clues? Any help very much appreciated! :)
When an event is triggered in JavaScript, JavaScript passes an event object to the callback function. Pass that into the signature and you will gain access to element properties.
window.onload = function() {
const elements = document.getElementsByClassName('nameOfTheClass');
for (const element of elements) {
element.addEventListener("click", e => {
console.log("element was clicked", e.target.id, e.target.innerHTML);
})
}
}
<div id="id1" class="name">first</div>
<div id="id2" class="name">second</div>
<div id="id3" class="name">third</div>
<script type="text/javascript">
var nodes = document.querySelectorAll('.name');
Array.from(nodes).forEach(function (node) {
node.addEventListener('click', function (event) {
alert('you clicked' + event.target.textContent + ' with id: ' + event.target.getAttribute('id'));
// you might also use event.target.innerHTML here
});
});
</script>
There are two DOM apis I would recommend you use:
document.querySelector and document.querySelectorAll and
element.addEventListener('click', event => {/* ... */});
Those are my gotos for "vanilla js" dom manipulation.
See the example below for what you wanted.
Array.from(document.querySelectorAll('.name')).forEach(element => {
// for each element that matches the querySelector `.name`
element.addEventListener('click', clickEvent => {
// call your function when the element is clicked
// see the properties of a Dom Element here:
// https://developer.mozilla.org/en-US/docs/Web/API/Element
yourFunction(element.id, element.innerHTML);
});
})
function yourFunction(id, innerHtml) {
// use the values!
console.log({id, innerHtml});
}
<div id="id1" class="name">[click me] inner html 1</div>
<div id="id2" class="name">[click me] inner html 2</div>
<div id="id3" class="name">[click me] inner html 3</div>
In the template I have a input element.
<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onkeypress='captionUpdate();'>
I want to track the change in the input value,and enable the Update button.Tried below options:
onkeypress='captionUpdate();'
Tried jquery change or click on the class
$('.qq-edit-caption').change(function() {
alert('qq-edit-caption');
});
Both options does not get fired up!!not sure I have anything issues with my setup or Fine Uploader does not allow that? Please see my screenshot:
Any way to solve this problem with FU?
If you are simply adding this inline event handler directly to the template element, then it's not surprising that it's never triggered. Fine Uploader templates are quite primitive in that the template is interpreted as an HTML string and then used to create DOM elements inside of your container element (the element referenced as your element option).
You really should never use inline event handlers. There are quite a few disadvantages to this approach. I talk about this in more depth in my book - Beyond jQuery. And the method of attaching event handlers is not necessary at all in your case, as far as I can tell. Instead, after constructing a new instance of Fine Uploader, simply attach an event handler of your choice to the input element using addEventListener. For example if your <input> element is given a CSS class name of 'qq-edit-caption', you can attach a "change" event handler like this:
var uploadContainer = document.querySelector('#my-uploader')
var uploader = new qq.FineUploader({
element: uploadContainer
...
})
uploadContainer.querySelector('.qq-edit-caption')
.addEventListener('change', function(event) {
// event handler logic here...
})
...and if you are creating this input element for each file and need to attach a "change" handler to all of these input elements, you should attach a single delegated event handler to the container element, and react based on the element that initially triggered the event (look at the target property of the event). You can determine the ID of the file by looking at the CSS class of the parent <li> of the event.target, or you can look for a 'qq-file-id' attribute on the parent <li> of the target element (the value will be the file ID). That code might look something like this:
var uploadContainer = document.querySelector('#my-uploader')
var uploader = new qq.FineUploader({
element: uploadContainer
...
})
uploadContainer.addEventListener('change', function(event) {
if (event.target.className.indexOf('qq-edit-caption') >= 0) {
var fileId = parseInt(event.target.getAttribute('qq-file-id'))
// ...
}
})
This might get you started:
$('.inp input').keyup(function(){
if (this.value.length > 0) {
$(this).closest('.row').find('.cell.btn button.upload').prop('disabled', false);
}else{
$(this).closest('.row').find('.cell.btn button.upload').prop('disabled', true);
}
});
* {position:relative;box-sizing:border-box;}
.row{overflow:hidden;}
.cell{float:left;height:40px;}
.pic{width:82px;}
.inp{width:230px;}
.inp input{font-size:1rem;padding:2px 5px;}
.btn{width:60px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="cell pic">
<img src="http://lorempixel.com/80/40">
</div>
<div class="cell inp">
<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption...'>
</div>
<div class="cell btn">
<button class="upload" disabled>Upload</button>
</div>
<div class="cell btn">
<button class="del" disabled>Delete</button>
</div>
</div><!-- .row -->
You can enable and disable the state of button by the input value.Using the Keyup function
$('.qq-edit-caption').keyup(function() {
if(this.value.length > 0){
$("#edit").prop('disabled', false);
}
else {
$("#edit").prop('disabled', true);
}
});
Have you tried the onchange event? Does it work?
<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onchange='captionUpdate();'>
I'm teaching myself JS and trying to avoid jQuery until my JS skills are better.
Goal: add an eventlistener, for click event, to all the divs of a certain class. Have all the child nodes of that class respond to the event.
My HTML
<div class="grid-panel six columns">
<div class="grid-panel-image">
<i class="fa fa-css3"></i>
</div>
<div class="grid-panel-title">
<h4>css3</h4>
</div>
</div>
<div class="grid-panel six columns">
<div class="grid-panel-image">
<i class="fa fa-paint-brush"></i>
</div>
<div class="grid-panel-title">
<h4>tamberator</h4>
</div>
</div>
I select all the .grid-panel divs using this JS
var gridPanels = document.querySelectorAll('.grid-panel');
then, since that returns an array of divs with the class .grid-panel
I add the event listener for click as such
for(i=0; i<gridPanels.length; i++){
gridPanels[i].addEventListener('click', myFunction);
}
my function is this
myFunction(){
var e = event.target;
switch(e){
case gridPanels[0]:
modalArray[0].setAttribute("data-modal-display", "show");
break
case gridPanels[1]:
modalArray[1].setAttribute("data-modal-display", "show");
break
}
console.log(e);
}
This does work if I click a very specific part of the .grid-paneldiv and the e logs that specific element. However, clicking any children of the div logs the e as the element i clicked, but the eventlistener is not applied to that element. I'm clearly missing something here with this event delegation. I really want the function to fire on the div clicked and all of its childnodes.
You're binding correctly, but if you want to get the element to which the handler is bound in the handler, then use this or event.currentTarget instead of event.target.
The event.target represents the actual element that was clicked, which is sometimes useful as well.
Also, you should define the event parameter in the function. Not all browsers have it available as a global variable.
function myFunction(event){
var e = this
// var e = event.currentTarget // same as above
switch(e){
case gridPanels[0]:
modalArray[0].setAttribute("data-modal-display", "show");
break
case gridPanels[1]:
modalArray[1].setAttribute("data-modal-display", "show");
break
}
console.log(e);
}
After a lot of googling, I am here to ask if it is possible to enumerate all the events attached to HTML elements in a DOM.
For example: Suppose my document is
<body onscroll=docScrolled()>
<span onmouseover=doSomethingElse()> Span is here </span>
<div id="container">
<script>
$("#container").bind("click", doSomething);
</body>
After my document has been loaded and all the javascript code executed, I want to provide a button on clicking which display all the HTML elements and the events attached to them.
Ouptut
<body onscroll=docScrolled()> ------ onscroll
<span onmouseover=doSomethingElse()> Span is here </span> -----onmouseover
<div id="container"> ------onclick
So ultimately question is How to enumerate over all HTML elements and find out the events attached to them.
Here is a page that might help.
Also, this piece of code does something in the lines of what you're searching for:
// List bound events:
console.dir( $('#elem').data('events') );
// Log ALL handlers for ALL events:
$.each($('#elem').data('events'), function(i, event){
$.each(event, function(i, handler){
console.log( handler.toString() );
});
});
UPDATE: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference shows a list of events for DOM elements. You should create a function that checks if any event is assigned a function.
It would be something like:
var events = ["onchange","onkeydown",...]
function hasEventsAssigned(elem) {
for (var i = events.length; i > 0; i--) {
if (elem[events.i]) {
/* do something */
}
}
}
I have a number of elements (the total number of which I do not know). I want something to appear when I mouse-over any one of these elements (which is taken care of by having a mouseover bound to the shared class of these elements).
However, the thing that I want to appear on mouseover is dependent on what the cursor is over - so I need to get the DOM element under the cursor, without the luxury of being able to bind mouseover events to each element in code.
Any suggestions?
HTML:
<a id="say1" class="say" href="#" data-word="one">Say 'one'</a>
<a id="say2" class="say" href="#" data-word="two">Say 'two'</a>
<a id="say3" class="say" href="#" data-word="three">Say 'three'</a>
Javascript (with jQuery):
$(document).ready(function () {
$('.say').mouseover(function () {
alert($(this).data('word'));
});
});
Pure Javascript (without jQuery, it is not equivalent):
window.onload = function () {
var onmouseover = function (e) {
alert(e.target.getAttribute('data-word'));
};
var elems = document.getElementsByClassName('say');
for (var i = 0; i < elems.length; i += 1) {
elems[i].onmouseover = onmouseover;
}
};
Instead of calling alert function you may implement any logic.
Event delegation is your friend here.
See this post from Christian Heilmann on that topic http://www.icant.co.uk/sandbox/eventdelegation/.
HTH.
jQuery makes this easy with .each():
$('#container').bind('mouseover', function () {
$(".selector").each(function(){
// Do something $(this) = item clicked
$(this).toggleClass('.example'); // Toggle class is just an example
});
});
You can then check certain characteristics of $(this) and then do different things based on the values/characteristics.