10 examples of 'onclick event listener' in JavaScript

49
iconClick() {
50
    // console.log('icon click');
51
}

75
function onClick(event) {
76
	event.preventDefault();
77
	var self = this,
78
		forward = (self.className.indexOf('pagMore') > -1),
79
		parent = self.parentElement,
80
		prev = (forward) ? parent.getElementsByClassName('pagLess')[0] : self,
81
		prevBatch = ~~(prev.getAttribute('data-batch')),
82
		next = (forward) ? self : parent.getElementsByClassName('pagMore')[0],
83
		nextBatch = prevBatch + 2,
84
		batch = (forward) ? nextBatch : prevBatch,
85
		add = (forward ? 1 : -1),
86
		id = parent.id,
87
		container = parent.getElementsByTagName('ul')[0];
88
89
	prev.setAttribute('data-batch', prevBatch + add);
90
	next.setAttribute('data-batch', nextBatch + add);
91
92
	throbber.show(self, {size: '40px'});
93
94
	self.className += ' active';
95
96
	nirvana.sendRequest({
97
		controller: 'WikiaMobile',
98
		method: 'getCategoryBatch',
99
		format: 'html',
100
		type: 'GET',
101
		data: {
102
			category: wgTitle,
103
			batch: batch,
104
			//this is already encoded and $.ajax encode all data
105
			index: decodeURIComponent(id.slice(8))
106
		}
107
	}).done(
108
		function (result) {
109
			container.parentElement.removeChild(container);
110
			next.insertAdjacentHTML('beforebegin', result);
111
112
			if (forward) {
113
				parent.previousElementSibling.scrollIntoView();
114
				track.event('category', track.PAGINATE, {label: 'next'});
115
			} else {
116
				track.event('category', track.PAGINATE, {label: 'previous'});
117
			}
118
119
			throbber.hide(self);
120
121
			prev.className = 'pagLess' + (batch > 1 ? ' visible' : '');
122
			next.className = 'pagMore' + (batch < ~~(parent.getAttribute('data-batches')) ? ' visible' : '');
123
		}
124
	);
125
}

145
function onClick(e) {
146
  var el = e.target
147
148
  // Ignore command click, control click, and non-left click
149
  if (e.metaKey || e.which !== 1) return
150
151
  // Ignore if already prevented
152
  if (e.defaultPrevented) return
153
154
  // Also look up for parent links (<a></a>)
155
  while (el) {
156
    var url = el.href
157
    if (url) {
158
159
      // Ignore if created by Tracks
160
      if (el.hasAttribute &amp;&amp; el.hasAttribute('data-router-ignore')) return
161
162
      // Ignore links meant to open in a different window or frame
163
      if (el.target &amp;&amp; el.target !== '_self') return
164
165
      // Ignore hash links to the same page
166
      var hashIndex = url.indexOf('#')
167
      if (~hashIndex &amp;&amp; url.slice(0, hashIndex) === window.location.href.replace(/#.*/, '')) {
168
        return
169
      }
170
171
      e._tracksLink = el
172
      history.push(url, true, null, e)
173
      return
174
    }
175
176
    el = el.parentNode
177
  }
178
}

299
.onEvent('click', function click(evt) {
300
  if ((evt.target.nodeType === Node.ELEMENT_NODE) &&
301
      (evt.target.tagName === 'BUTTON')) {
302
    return this.toggle();
303
  }
304
}, false, false)

401
elLink.addEventListener("mousedown", function onClick(e) {
402
    e.stopPropagation();
403
    e.preventDefault();
404
});

61
function onClick() {
62
  const currentTarget =
63
    $navlist.find('.tabcordion_nav-item.is-active .tabcordion_nav-trigger')[0];
64
  if (currentTarget != $(this)[0]) {
65
    const eventData = { 'previousTarget': currentTarget, 'newTarget': $(this)[0] };
66
    const event = new CustomEvent('rb.tabcordion.tabChanged', { detail: eventData });
67
    $tabcordion[0].dispatchEvent(event);
68
  }
69
70
  setActiveAndInactive(this, $navlist);
71
}

14
_onClick(e) {
15
    if(this.props.disabled || this.props.pseudo) {
16
        e.preventDefault();
17
    }
18
19
    this.props.onClick && this.props.onClick(e, this.state);
20
}

45
document.querySelector('button[name="select"]').addEventListener('click', function onClick(event) {
46
	chooser.click();
47
});

51
onClick(event) {
52
  // emit the button click event
53
  this.buttonClick.emit(event);
54
}

10
function onClick(event) {
11
  // check if div has large class
12
  if(div.classList.contains("large")) {
13
    div.classList.remove("large");
14
    div.classList.add("small"); 
15
  } else {
16
    div.classList.add("large");
17
    div.classList.remove("small");
18
  }
19
}