美文网首页
事件监听事件代理

事件监听事件代理

作者: 饥人谷_小霾 | 来源:发表于2017-03-16 12:54 被阅读0次

DOM0 事件和DOM2级在事件监听使用方式上有什么区别?

Dom0中的事件处理函数
DOM0中通过on开头加上事件,click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload
后添加的事件处理程序会覆盖掉之前添加的处理程序,只能有一个是有效的;DOM0级以属性赋值的方式绑定事件程序;

  1. html中绑定事件
<input id='myBtn' type="button" value="这是个按钮 "onclick="showMessage()" />
  1. 对应的程序
function showMessage(){
 console.log(this.id);
}
//还有一种方法,获取对应的DOM,绑定属性值
var btn=document.getElementById("myBtn");
btn.onclick=function(){
 console.log(this.id);
}
  1. 取消事件
    DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序,将相应属性值设置为null即可。
btn.onclick=null;

缺点:1.HTML与JavaScript代码紧密耦合,对代码修改和维护都造成了不便。2.如果一个事件绑定多个程序,后面的程序会覆盖前面的程序

DOM2的事件监听
DOM2中通过addEventListener()添加事件监听,通过removeEventListener()来移除事件监听

var btn=document.quertSelector(".mybtn")
btn.addEventListener('click',showMessage,false)
btn.removeEventListener('click',showMessage,false)

实现了js和html分离,也可以绑定多个元素

btn.addEventListener('click',showMessage,false)
btn.addEventListener('click',showMessage2,false)
btn.addEventListener('click',showMessage3,false)

attachEvent与addEventListener的区别?

低版本的IE不支持addEventListener()事件监听,它通过attachEvent()来实现事件的监听

  1. 参数的区别 addEventListener()接受三个参数(事件类型,事件方法,布尔值{如果是true则是在捕获阶段调用事件方法,如果是false则是在事件冒泡阶段处理}),attachEvent()接受二个参数(事件类型,事件方法)

  2. 第一个参数的值不同 addEventListener()的第一个值参数是事件类型(click,load),attachEvent()则是事件处理函数名称(onclick,onload)

  3. 事件处理程序的作用域的不同 addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,所以this是window

  4. 为一个事件添加多个事件处理程序时,执行顺序不同 addEventListener会从上到下的依次执行,而attachEvent当事件监听多的时候,是没有规律的执行

相关文章

  • 事件监听,事件代理

    题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件,添加多个事件处理程序时, 会...

  • 事件监听-事件代理

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别?Dom0中的事件处理函数DOM0中通过on开头加上事件,...

  • 封装一个通用的事件监听函数

    封装一个通用的事件监听函数,可实现普通的事件监听,也可实现事件委托(事件代理)

  • iOS控制器手势左滑返回监听笔记

    协议声明 代理设置 事件监听

  • js事件深入学习

    JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等 js中的事件流 ① .冒泡:当下级...

  • 事件监听事件代理

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0中的事件处理函数DOM0中通过on开头加上事件...

  • iOS监听文集目录

    监听事件综述blockdelegate(代理)NSNotificationCenterNSNotification...

  • zj9 事件

    事件模型、事件冒泡、事件捕获、事件代理、阻止默认事件、事件兼容等 题目1: DOM0 事件和DOM2级在事件监听使...

  • 事件对象,事件监听,事件冒泡,事件代理

    一、事件对象 二、冒泡事件:(事件从子元素往父级元素向上触发事件)处理兼容问题:主流浏览器:e.stopPropa...

  • 手写通用的事件监听函数

    前言 在问题前,需要先理解事件冒泡、事件代理 可参考文章【事件代理】 动态数据列表里,如何监听每条数据的点击? 具...

网友评论

      本文标题:事件监听事件代理

      本文链接:https://www.haomeiwen.com/subject/brndnttx.html