EN
JavaScript - remove event with VanillaJS
6 points
In this article, we would like to show you how to remove events using VanillaJS.
xxxxxxxxxx1
// 1. removeEventListener method example2
button.removeEventListener('click', onClick);3
4
// 2. Setting event property null value example5
button.onclick = null;6
7
// 3. Removing element attribute example8
button.removeAttribute('onclick');9
10
// 4. jQuery examples11
// https://dirask.com/q/jquery-how-to-remove-event-zjMozDxxxxxxxxxx1
2
<html>3
<body>4
<button id="my-button">5
Click button...6
</button>7
<br /><br />8
<button onclick="removeEvent();">9
Remove click event...10
</button>11
<script>12
13
var button = document.getElementById('my-button');14
15
function onClick() {16
console.log('Event name: click');17
}18
19
button.addEventListener('click', onClick);20
21
function removeEvent() {22
button.removeEventListener('click', onClick);23
}24
25
</script>26
</body>27
</html>xxxxxxxxxx1
2
<html>3
<body>4
<button id="my-button">5
Click button...6
</button>7
<br /><br />8
<button onclick="removeEvent();">9
Remove click event...10
</button>11
<script>12
13
var button = document.getElementById('my-button');14
15
button.onclick = function() {16
console.log('Event name: click');17
};18
19
function removeEvent() {20
button.onclick = null;21
}22
23
</script>24
</body>25
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onClick() {7
console.log('Event name: click');8
}9
10
</script>11
</head>12
<body>13
<button id="my-button" onclick="onClick();">14
Click button...15
</button>16
<br /><br />17
<button onclick="removeEvent();">18
Remove click event...19
</button>20
<script>21
22
var button = document.getElementById('my-button');23
24
function removeEvent() {25
button.removeAttribute('onclick');26
}27
28
</script>29
</body>30
</html>How to remove events with jQuery has been described in this article.
