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接收get传递的值的代码
Nov 30 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
vue实现文字加密功能
Sep 27 Javascript
JavaScript canvas仿代码流瀑布
Feb 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
js 省地市级联选择
2010/02/07 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
js禁止表单重复提交
2017/08/29 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
对python Tkinter Text的用法详解
2018/10/11 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
什么是Python变量作用域
2020/06/03 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
项目经理任命书
2014/06/04 职场文书
单位作风建设自查报告
2014/10/23 职场文书
元旦主持词开场白
2015/05/29 职场文书
2016年清明节寄语
2015/12/04 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js