js中DOM事件绑定分析

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实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
  • JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
赞 (0)

相关推荐

  • JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

    先来看看现象: 复制代码 代码如下: <html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px&q

  • JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    本文实例讲述了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法.分享给大家供大家参考,具体如下: 事件的执行顺序绝对是让人头疼的问题.当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段.有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发.如果你想细致了解JavaScript中的事件发生,请慢慢阅读. 1. 原生事件的发生顺序 一般来讲,当为一个a标签添加click事件以后,点击这个标签

  • js中DOM事件绑定分析

    js事件绑定 JavaScript 有三种事件模型: 内联模型 脚本模型 DOM2 模型 1.内联模型 //基本废除不用 <input type="button" value="按钮" onclick="alert('Lee');" /> <input type="button" value="按钮" onclick="box();" /> 2.脚本模型 //基本

  • JQuery中DOM事件绑定用法详解

    本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

  • JQuery中DOM事件冒泡实例分析

    本文实例分析了JQuery中DOM事件冒泡.分享给大家供大家参考.具体分析如下: 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <script type=&qu

  • JQuery中DOM事件合成用法实例分析

    本文实例讲述了JQuery中DOM事件合成用法.分享给大家供大家参考.具体分析如下: jQuery有两个合成事件--hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法 hover()方法的语法结构为: hover(enter,leave); hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个

  • js中的事件捕捉模型与冒泡模型实例分析

    本文实例讲述了js中的事件捕捉模型与冒泡模型.分享给大家供大家参考. 具体实现方法如下: 实例1: 复制代码 代码如下: <html> <head> <script type="text/javascript">  window.onload = function(){   document.getElementById('par').addEventListener('click',function() {alert('par');},true);

  • JS中自定义事件的使用与触发操作实例分析

    本文实例讲述了JS中自定义事件的使用与触发操作.分享给大家供大家参考,具体如下: 1. 事件的创建 JS中,最简单的创建事件方法,是使用Event构造器: var myEvent = new Event('event_name'); 但是为了能够传递数据,就需要使用 CustomEvent 构造器: var myEvent = new CustomEvent('event_name', { detail:{ // 将需要传递的数据写在detail中,以便在EventListener中获取 //

  • 一文详解JS中的事件循环机制

    目录 前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环 前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在

  • 详解Node.js中的事件机制

    前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操

  • 关于Jquery中的事件绑定总结

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出.交流. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事

  • js中键盘事件实例简析

    本文实例分析了js中键盘事件.分享给大家供大家参考.具体分析如下: 该实例效果: 按键盘上的任意一个键,弹出相应的ASCII码,兼容ie,chrome和firefox. 但还是有不少问题: (1)ie和chrome中,一些键没有效果,如上.下.左.右等: (2)而firefox中的向右键,与单引号键,都为39. 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript">  wind

随机推荐