Check If Event Exists on Element

Check if event exists on element

$('body').click(function(){ alert('test' )})

var foo = $.data( $('body').get(0), 'events' ).click
// you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.

$.each( foo, function(i,o) {
    alert(i) // guid of the event
    alert(o) // the function definition of the event handler
});

You can inspect by feeding the object reference ( not the jQuery object though ) to $.data, and for the second argument feed 'events' and that will return an object populated with all the events such as 'click'. You can loop through that object and see what the event handler does.

Check if an element has event listener on it. No jQuery

There is no JavaScript function to achieve this. However, you could set a boolean value to true when you add the listener, and false when you remove it. Then check against this boolean before potentially adding a duplicate event listener.

Possible duplicate: How to check whether dynamically attached event listener exists or not?

How to check whether dynamically attached event listener exists or not?

There is no way to check whether dynamically attached event listeners exist or not.

The only way you can see if an event listener is attached is by attaching event listeners like this:

elem.onclick = function () { console.log (1) }

You can then test if an event listener was attached to onclick by returning !!elem.onclick (or something similar).

Check if element exists on click event

Instead of this:

const currentValue = Number(quantity.innerHTML) || 0;

You can do this:

const currentValue = Number(quantity?.innerHTML ?? 0);

The ?. will basically check if the object to the left exists (in this case, quantity) before trying to get the property on the right (innerHTML). If it doesn't exist, then it'll returned undefined. The ?? will then kick in and return 0 instead.

That solves getting the current value.

But then, you're trying to set a value to a thing that might not exist. That's bad news. There are a couple of ways to go about it, but probably the best would just be to check if it is falsey, and if it is, go ahead and create it:

if (!quantity) {
  // code to create quantity and apparent it to its parent here
  // don't forget to set its default value to 0.
  // and assign it to quantity
}

Or, better yet:

const quantity = document.querySelector('.product__quantity') ?? createQuantity(); 
// createQuantity() being the function that creates and returns the element.

If you put that block before the const currentValue line, you don't have to do the stuff to handle null and can just do:

const currentValue = Number(quantity.innerHTML);

Also, I'm not sure what you want this bit to do:

Number(quantity.innerHTML) < this._data.stocks
    ? (quantity.innerHTML = currentValue + 1)
    : 1;

But how it is written, that last 1 just gets thrown away and does absolutely nothing, so, assuming you just want to increment the quantity if it is less then current stocks, you should rewrite it to be:

currentValue < this._data.stocks && (quantity.innerHTML = currentValue + 1);

(Also, only less than, not less than or equal to?)

Side note: You should probably use .textContent or .innerText instead of .innerHTML for getting the quantity, since you don't want any HTML that might be hanging out in there, only the text value. Even better, don't parse the text at all and just store the value as a property which you write out when it changes:

 // initialize
 quantity.value = 0;

 // increment
 quantity.value++;
 quantity.innerText = quantity.value;

To create the quantity element, you can do something like this:

function createQuantity() {
  // Use whatever element it should be
  const quantity = document.createElement('span');

  quantity.classList.add('product__quantity');

  // You'll probably need to tweak this to get it in the right spot
  __parentElement.appendChild(quantity);

  return quantity;
}

Check if a component has an event listener attached to it

When there are listeners attached to a component they are available in the $listeners property of the component.

You can use that property to determine if a specific listener is available. For example, here is a computed property that checks for the existence of a cancel listener.

computed:{
  hasCancelListener(){
    return this.$listeners && this.$listeners.cancel
  }
}

And here is an example of that used in a component.

console.clear()
Vue.component("CustomForm", {  template:`    <div>      <h1>Custom Form</h1>      <button v-if="hasCancelListener" @click="$emit('cancel')">I have a listener!</button>    </div>  `,  computed:{    hasCancelListener(){      return this.$listeners && this.$listeners.cancel    }  },})
new Vue({  el: "#app",  methods:{    onCancel(){      alert('canceled')    }  }})

<script src="https://unpkg.com/vue@2.4.2"></script><div id="app">  <custom-form @cancel="onCancel"></custom-form>  <hr>  <custom-form></custom-form></div>

test if event handler is bound to an element in jQuery

You can get this information from the data cache.

For example, log them to the console (firebug, ie8):

console.dir( $('#someElementId').data('events') );

or iterate them:

jQuery.each($('#someElementId').data('events'), function(i, event){

    jQuery.each(event, function(i, handler){

        console.log( handler.toString() );

    });

});

Another way is you can use the following bookmarklet but obviously this does not help at runtime.

How to check if element has click handler?

You can use jQuery._data to check for events. The first argument should be a reference to the HTML element, not the jQuery object.

var ev = $._data(element, 'events');
if(ev && ev.click) alert('click bound');

Sample below.

$(function(){    $('#test').click(function(){        // NOTE: this below is refering to the HTML element, NOT the jQuery element        var ev = $._data(this, 'events');        if(ev && ev.click) alert('click bound to this button');    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><button id="test">Click me to check for click handlers</button>

jQuery check if onClick exists on element

You can do:

if ($('a').attr("onClick") != undefined) {}

---

Related Topics