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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
JSON 数据格式介绍
Jan 13 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
vue实现行列转换的一种方法
Aug 06 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jquery tools之tooltip
2009/07/25 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Python fileinput模块使用实例
2015/06/03 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python能自学吗
2020/06/18 Python
python定义具名元组实例操作
2021/02/28 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
单位员工收入证明样本
2014/10/09 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
毕业实习计划书
2015/01/16 职场文书
个人年终总结结尾
2015/03/06 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android