浅谈JavaScript事件绑定的常用方法及其优缺点分析

传统方式  

  element.onclick = function(e){

     // ...

   };

 1.  传统绑定的优点

非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致

处理事件时，this关键字引用的是当前元素，这很有帮组

2. 传统绑定的缺点

传统方法只会在事件冒泡中运行，而非捕获和冒泡

一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数

事件对象参数(e)仅非IE浏览器可用

W3C方式  

 element.addEventListener('click', function(e){

    // ...

  }, false);

1. W3C绑定的优点

该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。

在事件处理函数内部，this关键字引用当前元素。

事件对象总是可以通过处理函数的第一个参数(e)捕获。

可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件

2. W3C绑定的缺点

IE不支持，你必须使用IE的attachEvent函数替代。

IE方式

element.attachEvent('onclick', function(){

    // ...

  });

1. IE方式的优点

可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。

2. IE方式的缺点

IE仅支持事件捕获的冒泡阶段

事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）

事件对象仅存在与window.event参数中

事件必须以ontype的形式命名，比如，onclick而非click

仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

Dean Edwards的方案（addEvent/removeEvent库）

1. addEvent的优点

可以在所有浏览器中工作，就算是更古老无任何支持的浏览器

this关键字可以在所有的绑定函数中使用，指向的是当前元素

中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数

不管浏览器类型，事件对象总是作为第一个对象传入

2. addEvent的缺点

仅工作在冒泡阶段（因为它深入使用事件绑定的传统方式）

以上就是小编为大家带来的浅谈JavaScript事件绑定的常用方法及其优缺点分析全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 关于JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

  • 浅析js绑定事件的常用方法

    浅析js绑定事件的常用方法  <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • js添加绑定事件的方法

    先介绍js添加事件通用方法,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签

  • javascript事件绑定学习要点

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getElementById('box'); box.onclick = function(){ alert('Le

  • 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO

  • 浅谈JavaScript事件绑定的常用方法及其优缺点分析

    传统方式  element.onclick = function(e){ // ... };  1.  传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很有帮组 2. 传统绑定的缺点 传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数.新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式  element.addEventListener('click'

  • 浅谈javascript事件环微任务和宏任务队列原理

    JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数,事情发生的时候 JS 会将相应的函数入栈执行然后出栈,但是关于事件环我们还有一些未知的东西,例如,setTimeout 我们习惯称他为定时器,但是可能很多人没有意识到,这个东西和我们常用的一些事件没什么不同,只不过我们通常所说的事件大多需要用户触发,而 setTimeout 不用用户自己触发,而是指定时间之后触发:那么问题来了,如果我们将时间设置为 0 会发生什么?会立即执

  • 浅谈jQuery事件绑定原理

    jq里面有一个data的方法,给dom元素绑定相关的数据的.当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • 浅谈Javascript事件对象

    如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象. document.onclick = function() { alert(arguments.length); //1 } 因为arguments[0]这样使用这个参数比较麻烦,所以我们可以传递一个参数evt来进行使用. document.onmouseup = function(evt) { var e = evt || window.event; alert(e.button); //0为鼠标左键,1为滚轮,

  • 浅谈JavaScript事件的属性列表

    HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为. 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. onerror 在加载文档或图像时发生错误.

  • 浅谈Javascript事件处理程序的几种方式

    事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q

  • 浅谈javascript事件取消和阻止冒泡

    取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程序,它使用全部的三种取消技术: function cancelHandler(event){ var even

  • 浅谈Javascript事件模拟

    这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序.这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件 a)Dom 事件模拟 可以通过document上的createEvent()方法,在任何时候创建事件对象,此方法只接受一个参数,既要创建事件对象的事件字符串,在DOM2 级规范上所有的字符串都是复数形式,

  • 浅谈JavaScript 浏览器对象

    浅谈JavaScript 浏览器对象

    window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

  • 浅谈JavaScript节流和防抖函数

    概念 节流函数 间隔固定的时间执行传入的方法 目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能. 防抖函数 对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题. 按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变. 应用在前端时,常见的场景是,输入框

随机推荐