js中DOM事件绑定分析


Posted in Javascript onMarch 18, 2018

js事件绑定

JavaScript 有三种事件模型:

  • 内联模型
  • 脚本模型
  • DOM2 模型

1、内联模型

//基本废除不用
<input type="button" value="按钮" onclick="alert('Lee');" />
<input type="button" value="按钮" onclick="box();" />

2、脚本模型

//基本不用
var input = document.getElementsByTagName('input')[0]; //得到 input 对象
 input.onclick = function () { //匿名函数执行
 alert('Lee');
};
事件处理函数 影响的元素 何时发生
onabort 图像 当图像加载被中断时
onblur 窗口、框架、所有表单对象 当焦点从对象上移开时
onchange 输入框,选择框和文本区域 当改变一个元素的值且失去焦点时
onclick 链接、按钮、表单对象、图像映射区域 当用户单击对象时
ondblclick 链接、按钮、表单对象 当用户双击对象时
ondragdrop 窗口 当用户将一个对象拖放到浏览器窗口时
onError 脚本 当脚本中发生语法错误时
onfocus 窗口、框架、所有表单对象 当单击鼠标或者将鼠标移动聚焦到窗口或框架时
onkeydown 文档、图像、链接、表单 当按键被按下时
onkeypress 文档、图像、链接、表单 当按键被按下然后松开时
onkeyup 文档、图像、链接、表单 当按键被松开时
onload 主题、框架集、图像 文档或图像加载后
onunload 主体、框架集 文档或框架集卸载后
onmouseout 链接 当图标移除链接时
onmouseover 链接 当鼠标移到链接时
onmove 窗口 当浏览器窗口移动时
onreset 表单复位按钮 单击表单的 reset 按钮
onresize 窗口 当选择一个表单对象时
onselect 表单元素 当选择一个表单对象时
onsubmit 表单 当发送表格到服务器时

3、内联模型

“DOM2 级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:
addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数;事件名、函数、冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡)

window.addEventListener('load', function () {
 alert('Lee');
}, false);
window.removeEventListener('load', function () {
 alert('Mr.Lee');
}, false)

PS: IE 实现了与 DOM 中类似的两个方法:attachEvent()和 detachEvent()。这两个方法接受
相同的参数:事件名称和函数。

在使用这两组函数的时候,先把区别说一下:

1. IE 不支持捕获,只支持冒泡;
2. IE 添加事件不能屏蔽重复的函数;
3. IE 中的 this 指向的是 window 而不是 DOM 对象。
4. 在传统事件上,IE 是无法接受到 event 对象的,但使用了 attchEvent()却可以,但有些区别。
```javascript
window.attachEvent('load', function () {
 alert('Lee');
}, false);
window.detachEvent('load', function () {
 alert('Mr.Lee');
}, false)
```

PS:IE 中的事件绑定函数 attachEvent()和 detachEvent()可能在实践中不去使用,有几个原因:

1.IE9 就将全面支持 W3C 中的事件绑定函数;

2.IE 的事件绑定函数无法传递 this;

3.IE的事件绑定函数不支持捕获;

4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏的问题

Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
js实现音乐播放控制条
Sep 09 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
js中如何完美的解析数据
Mar 18 #Javascript
解决使用vue.js路由后失效的问题
Mar 17 #Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 #Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 #Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 #Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
You might like
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python中upper是做什么用的
2020/07/20 Python
市场营销专业个人自荐信格式
2013/09/21 职场文书
出国留学自荐信
2013/10/25 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2014年政协工作总结
2014/12/09 职场文书
升职感谢信
2015/01/22 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android