10 examples of 'onclick event listener' in JavaScript

Every line of 'onclick event listener' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
49iconClick() {
50 // console.log('icon click');
51}
75function 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}
145function 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) &amp;&amp;
301 (evt.target.tagName === 'BUTTON')) {
302 return this.toggle();
303 }
304}, false, false)
401elLink.addEventListener("mousedown", function onClick(e) {
402 e.stopPropagation();
403 e.preventDefault();
404});
61function 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 &amp;&amp; this.props.onClick(e, this.state);
20}
45document.querySelector('button[name="select"]').addEventListener('click', function onClick(event) {
46 chooser.click();
47});
51onClick(event) {
52 // emit the button click event
53 this.buttonClick.emit(event);
54}
10function 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}

Related snippets