一、HTML事件

    HTML事件处理就是直接在HTML标签上添加事件,举例

     <p class="" onclick=function(){alert(HTML事件)}></p>

    这种方式的好处是简单易懂,兼容性好。

    缺点是代码的耦合性太高,不便于修改,而且一个事件只能监听一个function,多个function会被覆盖,并且事件无法删除。

二、DOM 0级处理事件

    DOM 0级处理事件可以理解成通过修改标签元素的onclick属性,来加入事件。 举例

    <div id="btn"></div>

    <script>

      var btn=document.getElementById("btn");

      btn.onclick=function(){alert(DOM 0级事件)} 

    </script>

      删除方式为

      btn.onclick=null;

    这种方式的优点是耦合较低,产生的问题是只能监听一个事件,容易被覆盖。

三、DOM 2级处理事件(重点)

    DOM 2级处理事件是通过addEventListener(参数一,参数二,参数三)的方式添加事件

     其中

     参数一:事件类型,如onclick onload,但在参数一种,前面的On 需要省略。

     参数二:回调函数:可以直接为某个function(){},也可以将函数提取,直接写函数名,不必添加括号

     参数三:定义冒泡或捕获,true为捕获,false为冒泡,考虑到兼容器的问题(IE 678只支持冒泡,不支持捕获)在这里推荐使用false——冒泡

     function Dom(){alert(“DOM 2级处理事件”)}

     addEventListener("click",Dom,false);

     这里删除监听的方式为

     removeEventListener("click",Dom,false);

    DOM 2级处理事件的有点是不会被覆盖,一次性可以添加多个监听事件,缺点是IE 8之下不可用(IE 8之下使用IE事件的处理程序)

四、 IE事件的处理程序(补充)

    IE 6 7 8 9 10都支持的一种专属事件方式,通过attachEvent添加事件

    举例

    attachEvent(参数一,参数二)

    其中参数一为事件类型,但和DOM 2级事件不同,这里的事件类型前面需要加上On

    参数二为回调函数

    因为是IE专属,默认为冒泡处理,所以没有参数三

    举例:

      function Ie(){alert(IE专属事件)}

         btn.attachEvent("onclick",Ie);

       删除事件用detachEvent

       btn.detachEvent("onclick",Ie);

      

        

js中的事件部分总结的更多相关文章

  1. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  2. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  3. 看懂此文,不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  4. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  6. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  7. js中的事件,内置对象,正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  8. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  9. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  10. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

随机推荐

  1. Windows下配置nginx+php(wnmp)

      第一部分:准备工作.(系统:Windows 8.1) 1.首先是下载软件. NGINX-1.3.8官网下载:http://nginx.org/en/download.html PHP5.4.8版本 ...

  2. windbg无法下载符号文件

    symbol file path: srv*d:\symbolslocal*http://msdl.microsoft.com/download/symbols 即使设置是对的,但我用.reload, ...

  3. Linq to xml 小例

    static void Main(string[] args)        {            string strXml = @"<?xml version='1.0' en ...

  4. iOS版本更新的App提交审核流程

    App的版本更新估计是在所难免的了!更新App和新的App发布有何不同了?今天我们一起来看看吧!在发布App的时候我们需要通过开发者帐号——(申请)——>发布证书(需要钥匙串对证书签名也叫加密( ...

  5. 山锅(samgor)的博客 2014

    搞移动端的前端开发已经3年,悄悄地从一个前端小白变成老油条. 项目已经做了好几个,最近发现技术的提升貌似停滞不前.说很菜吧,知道的还是不少.说精通吧,自我感觉还算不上. 认真的考虑下这个问题,觉得技术 ...

  6. Linux 动态链接库

    如何使用动态链接库 Linux下打开使用动态链接库需要三步(实际上和windows下基本一样):1.加载动态链接库,通过调用库函数dlopen()获得链接库的句柄,对应于windows下的 AfxLo ...

  7. Switch图形练习

    //package IfAndSwitchs;import java.util.Scanner; public class Mianji { public static void main(Strin ...

  8. Socket支持多用户并发访问的解决办法

    //创建线程池,池中具有(cpu个数*50)条线程 ExecutorService executorService = Executors.newFixedThreadPool(Runtime.get ...

  9. 查询SQLSERVER执行过的SQL记录

    SELECT TOP 1000 --创建时间 QS.creation_time, --查询语句 SUBSTRING(ST.text,(QS.statement_start_offset/2)+1, ( ...

  10. java语法基本知识

    java中,变量分为局部和成员变量.局部变量在程序运行的过程中在栈stack中分配存储空间. 从上到下是:heap, stack, data segment, code segment.