原生JS元素怎么取消事件

简介: 关于原生JS元素怎么取消事件,有3种方式 方法1:removeEventListener案例: div 元素添加了  onmousemove 事件句柄,在你移动鼠标时会显示随机数。     点击按钮移除 DIV 的事件句柄。

关于原生JS元素怎么取消事件,有3种方式

 方法1:removeEventListener

案例:

<body>

<div id="myDIV"> div 元素添加了  onmousemove 事件句柄,在你移动鼠标时会显示随机数。

     <p>点击按钮移除 DIV 的事件句柄。</p>

     <button onclick="removeHandler()" id="myBtn">点我</button>

</div>

<p id="demo"></p>

<script>

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction()

{

    document.getElementById("demo").innerHTML = Math.random();

}

function removeHandler()

{

    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

}

</script>

</body>

 

原生JS里面的方法很少,所以换一种思路,在方法里面进行判断

方法2:通过function里面的判断状态,然后return false

案例:

var state=1;

document.getElementById("myBtn").addEventListener("click", function(){

if(state==0){

return false

}else{

    alert(“caca”);

         state=0;

}
   });

 

方法3:通过function的判断状态,然后在方法里面再次添加此事件,覆盖事件后,然后再return false

案例:

var state=1;

document.getElementById("myBtn").addEventListener("click", function(){

if(state==0){

document.getElementById("myBtn") .addEventListener("click", function() {return false;});

}else{

       alert(“caca”);

            state=0;

}
   });

 

相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
5天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
20天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
40 6
|
28天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
40 4
|
29天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
34 4
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
31 1
|
23天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
63 0
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
51 0
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法