JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用:
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数:事件名、事件处理的函数和布尔值。
布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
示例:
环境:移动端,界面禁止触摸事件
要在body上添加事件处理程序,可以使用下列代码:
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
},false);
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也
意味着通过addEventListener()添加的匿名函数无法移除
错误用法示例:
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
},false);
document.body.removeEventListener('touchmove', function (event) {
event.preventDefault();
},false);
这个例子中,我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数,但实际上,第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同
正确用法示例:
function bodyScroll(event){
event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);
重写后的这个例子没有问题,是因为在addEventListener()和removeEventListener()中用来相同的函数。
共用函数不能带参数,错误用法示例:
function bodyScroll(event){
event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll(event),false);
document.body.removeEventListener('touchmove',bodyScroll(event),false);
总结:
一:相同事件绑定和解除,需要使用共用函数;
二:共用函数不能带参数;
JS添加事件和解绑事件:addEventListener()与removeEventListener()的更多相关文章
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEv ...
- jq 绑定事件和解绑事件
<!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...
- JS---DOM---为元素绑定事件和解绑事件的兼容代码
1. 绑定事件的兼容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEve ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 原生js绑定和解绑事件,兼容IE,FF,chrome
主要是最近项目中用到了原生的js 解绑和绑定 事件 然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...
- 7-20 jquery遍历节点,bootstrap模态框绑定事件和解绑,mock.js,model.urlroot,id,打基础
7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...
- bind,unbing,on,live,delegate绑定和解绑事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...
随机推荐
- bzoj 2155 Xor
题目大意: 求一条从$1 \rightarrow n$的路径是异或和最大 思路: 先随便求一棵生成树,然后求出所有环,对于所有环都可以去转一圈只取到这个环的贡献 那么就是线性基裸题了 #include ...
- office2007下载地址
thunder://QUFodHRwOi8vNDYuZHVvdGUub3JnOjgwODAvb2ZmaWNlMjAwN3Byby56aXBaWg==thunder://QUFodHRwOi8vNTEu ...
- 使用Bootstrap模态框实现增删改查功能
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...
- Asset Catalog Help (四)---Adding an iOS App Icon Set or Launch Image Set
Adding an iOS App Icon Set or Launch Image Set Organize different resolutions of your app icons and ...
- 微信小程序开发之三元运算符代替wx.if/wx.else
直接上代码 实现功能为:当fbphotoFirst为空时,src路径为“pic/信息反馈1-1_14.png“,并且点击事件uploadfbphotoFirst有效,否则为路径fbphotoFirst ...
- Flutter实战视频-移动电商-59.购物车_计算商品价格和数量
59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...
- 4-3逻辑非运算符及案例 & 4-4
创建类 LoginDemo3 这里取反 !(n%3==0) package com.imooc.operator; import java.util.Scanner; public class Log ...
- 带emoji表情弹出层的评论框,semantic+emoji picker,java.sql.SQLException: Incorrect string value: '\xF0\x9F..'
在自己做一个项目玩时,在做评论的时候. 选中了semantic.js原型,这个在国内用的不是很多,但是在github上star数量很高,想当初我想找一个js框架是就在上面找的. semantic中文网 ...
- ORA-22992:没法使用从远程表选择的LOB定位器
OLB 问题 ORA-22992:没法使用从远程表选择的LOB定位器 Create global temporary table temp on commit preserve rows as sel ...
- 深入探究Java中equals()和==的区别是什么
目录 相等判断符"==" "=="判断基本类型数据 "=="判断引用类型数据 相等判断方法equals() 思考:为什么要设计equals( ...