添加/移除事件处理程序
添加/移除事件处理程序
本文整理自《JavaScript高级程序设计》(第3版)。
1. HTML事件处理程序
添加事件:
//在HTML标签中给特性指定函数: onclick=""
<input id="myBtn" type="button" value="Click Me" onclick="showMessage()" />
移除事件:
无法移除。
2. DOM0级事件处理程序
添加事件:
//给DOM0元素的事件处理程序属性赋值
var btn = document.getElementById("myBtn");btn.onclick = showMessage();
移除事件:
//给属性赋 null
btn.onclick = null;
3. DOM2级事件处理程序
添加事件:
//调用 addEventListener(要处理的事件名,作为事件处理程序的函数,布尔值)
//--要处理的事件名:"click","load","mouseover"
//--作为事件处理程序的函数:定义的函数,或匿名函数
//--布尔值:false,冒泡阶段调用事件处理程序;true,事件捕获阶段调用事件处理程序
btn.addEventListener("click", showMessage(), false);//可添加多个事件处理程序,事件发生时依次触发,即先执行showMessage1(),再执行showMessage2()
btn.addEventListener("click", showMessage1(), false);
btn.addEventListener("click", showMessage2(), false);
移除事件:
//调用 removeEventListener(要处理的事件名,作为事件处理程序的函数,布尔值)
//--传入参数同添加事件的 addEventListener() 中的参数保持一致
//**以匿名函数作为事件处理程序函数的事件无法移除
btn.removeEventListener("click", showMessage(), false);
4. IE事件处理程序
添加事件:
//调用 attachEvent(事件处理程序名,作为事件处理程序的函数)
//--事件处理程序名:"onclick","onload"
//--作为事件处理程序的函数:定义的函数,或匿名函数
btn.attachEvent("onclick", showMessage());
移除事件:
//调用 detachEvent(事件处理程序名,作为事件处理程序的函数)
//--传入参数同添加事件的 attachEvent() 中的参数保持一致
//**以匿名函数作为事件处理程序函数的事件无法移除
btn.detachEvent("onclick", showMessage());
5. 跨浏览器的事件处理程序
综合上述多重情况,定义了一个可跨浏览器实现的对象 EventUtil,用于实现不同浏览器的添加/删除事件的方法:
var EventUtil = {addHandler: function(element, type, handler){if (element.addEventListener){element.addEventListener(type, handler, false);} else if (element.attachEvent){element.attachEvent("on" + type, handler);} else {element["on" + type] = handler;}},removeHandler: function(element, type, handler){if (element.removeEventListener){element.removeEventListener(type, handler, false);} else if (element.detachEvent){element.detachEvent("on" + type, handler);} else {element["on" + type] = null;}},};
转载于:https://www.cnblogs.com/gpeng/p/4787061.html
添加/移除事件处理程序相关推荐
- button添加插槽之后绑定不来事件_javaScript基础事件(二)事件处理程序
前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应某个事件的函数就叫事件处理程序(也叫事件处理函数.事件句柄).事件处理程序的名字以&quo ...
- 后处理程序文件大小的变量_【每日一题】(17题)面试官问:JS中事件流,事件处理程序,事件对象的理解?...
关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
- 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = {// ...
- JavaScript --- 跨浏览器的事件处理程序
var EventUtil = {addHandler: function(element, type, handler) { // 添加事件处理程序if (element.addEventListe ...
- 事件(二):事件处理程序
click,load,mouseover都是事件的名字,而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以'on'开头,onclick,onload 事件处理程序(html事 ...
- 读《Javascript高级程序设计》中的javascript事件处理程序(事件侦听器)心得
今天读了<Javascript高级程序设计>中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作.例如click . ...
- 同一个按钮绑定多个事件_带你走进JavaScript世界系列——事件处理程序之 IE 事件处理...
IE 事件处理程序 IE 实现了与 DOM 中类似的两个方法:attachEvent() 和 detachEvent() .这两个方法接收相同的两个参数:事件处理程序名称和事件处理程序函数.通过 at ...
- JavaScript中的事件处理程序
JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
最新文章
- 用PaddlePaddle打比赛!
- [Spring mvc 深度解析(一)] 详解Servlet
- (转)Unity3D研究院之手游开发中所有特殊的文件夹(assetbundle与Application.persistentDataPath)...
- python好找工作吗2017-你为什么不来了解一下Python?
- 测试网页速度性能的利器-Yslow和page speed
- 宜信(刘志波)技术培训
- 百度之星2019 初赛一 题解
- mysql 在windows中安装问题
- Linux Qt打包发布应用程序
- oracle 取消exp权限,oracle 复制账号权限oracle11gexp导出问题:部分表导不出来
- Spring RestTemplate示例
- JavaScript学习-函数
- 金融网络直播室软件的功能介绍
- java fckeditor下载_FCKEditor的使用
- 后渗透阶段的权限维持
- python re sub 替换多个_re.sub 实现多处替换
- 全国大学生数学建模竞赛(建模全过程)
- NASA丨登陆火星六大前沿技术
- SuperMap iDesktop常见问题解答集锦(七)
- 企业应如何制定多云世界的反脆弱身份?
热门文章
- java中字符串的截取
- opencv中 当你直接把别人的程序拖进去无法运行时 解决方法
- R语言--查看数据类型+类型判断
- pandas.Series.multiply()含义解释
- 如何在Ubuntu18.04下安装CUDA10.1和cudnn
- 11.1自定义异常类
- android 自定义皮肤,Android Studio 自定义皮肤主题和背景
- 小甲鱼Python课程18课课后题
- 【转载】PHP面向对象(OOP)编程入门教程
- linux基础-第十单元 系统的初始化和服务