1. HTML事件

 直接添加到HTML结构中

function show() {

    alert('hello');

}

<body>

    <button id="btn" onclick="show()">按钮</button>

</body>

2. DOM0级事件

 把一个函数赋值给一个事件处理程序

    a. 移除事件：event.onclick = null

    b. dom 0级事件只允许绑定一个事件处理函数

<button id="btn">按钮</button>

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

btn.onclick = function() {

    alert('hello');

}

btn.onclick = function() {

    alert('ok');           //覆盖上面的函数，只会显示"ok"

}

3. DOM2级事件

 dom2级事件允许给元素绑定多个事件处理函数

a. 添加事件

addEventListener("事件名"，事件处理函数，"布尔值")；

 true：事件捕获

 false：事件冒泡

b. 移除事件

removeEventListener("事件名"，事件处理函数)

案例1：DOM2级事件

    btn.addEventListener('click', function() {

        alert('show');

        // arguments.callee 指向当前函数

        btn.removeEventListener('click', arguments.callee);

    });

案例2： 给同一个事件绑定多个处理函数

<button id="btn">按钮</button>

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

//function()是匿名函数形式

btn.addEventListener('click', function() {

    alert('ok');

});

function show() {

    alert('show');

}

//结果"ok","show"--两个事件都会处理，show引用函数名

btn.addEventListener('click', show);

案例3：一次性事件

<button id="btn">按钮</button>

<script>

    var btn = document.querySelector('#btn');

    function show() {

        alert('show');

        //当执行一次事件后，移除事件

        btn.removeEventListener('click', show);

    }

    btn.addEventListener("click",show);

</script>

一次性事件用this和callee方法

<button id="btn">按钮</button>

<script>

    var btn = document.querySelector('#btn');

    btn.addEventListener("click",

        function() {

            alert('show');

            //当执行一次事件后，移除事件

            this.removeEventListener('click', arguments.callee);

        }

    );

</script>

4. IE事件处理程序（ie8及以下版本）

a. attachEvent("事件名"，事件处理函数)

b. detachEvent("事件名"，事件处理函数)

事件处理函数兼容处理写法

function addEvent(elm, type, callback) {

    if (elm.addEventListener) {

        elm.addEventListener(type, callback); //DOM事件

    } else if (elm.attachEvent) {

        elm.attachEvent('on' + type, callback);//ie事件，事件需要带on

    } else {

        elm[on + "type"] = callback;     //HTML事件

    }

}

window.onload = function() {

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

    addEvent(btn, 'click', function() {

        alert(123);

    });

}

html代码：

<body>

    <button id="btn">按钮</button>

</body>

js中event事件处理的更多相关文章

  1. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  2. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  3. js中event的target和currentTarget

    js 中的event是个很有用的对象,不同的浏览器,处理方式可能不一样. 我们现在只考虑标准的浏览器的情况 event是表示时间触发的产生的对象,以click事件为例. 由于冒泡的存在,event对象 ...

  4. js中event的target和currentTarget的区别

    js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...

  5. js中event.target,this

    event.target这是注册事件时的对象,或者它的子元素.通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的.经常用于事件冒泡时处理事件委托. 1.this和e ...

  6. js中绑定事件处理函数，使用event以及传递额外数据

    IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...

  7. js中event.keyCode用法及keyCode对照表

    HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...

  8. js中event.target和event.srcElement的区别

    看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...

  9. js中event.preventDefault()和 event.stopPropagation( ) 方法详解

    event.preventDefault() 1.首先event.preventDefault()是通知浏览器不要执行与事件关联的默认动作,例如:  这里a标签的默认事件是跳转,这里我们告诉浏览器取消 ...

随机推荐

  1. SICP 习题 （2.11）解题总结:区间乘法的优化

    SICP 习题 2.11又出现Ben这个人了,如曾经说到的,仅仅要是Ben说的一般都是对的. 来看看Ben说什么.他说:"通过监測区间的端点,有可能将mul-interval分解为9中情况, ...

  2. 《TCP/IP具体解释》读书笔记（19章）－TCP的交互数据流

    在TCP进行传输数据时.能够分为成块数据流和交互数据流两种.假设按字节计算.成块数据与交互数据的比例约为90%和10%,TCP须要同一时候处理这两类数据,且处理的算法不同. 书籍本章中以Rlogin应 ...

  3. cocos2d-x 3.1.1学习笔记［23］寻找主循环 mainloop

    文章出自于  http://blog.csdn.net/zhouyunxuan cocos2d到底是怎样把场景展示给我们的,我一直非常好奇. 凭个人猜想,引擎内部的结构类似于这样 while(true ...

  4. 为OLED屏添加GUI支持2：2D图形库

    为OLED屏添加GUI支持2:2D图形库 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:S ...

  5. HDU 4572 Bottles Arrangement

    具体的证明:点击打开链接 我的想法: 要想保证题目所说 构造最小行的和,仅仅能是这样的情况 .....      m-3  m-2  m-1  m    |   m  m-1  m-2  m-3   ...

  6. js中arguments对象和this对象

    js中arguments对象和this属性 如果不注重复习,花时间准备的材料毫无意义 arguments对象和this对象都是对象 直接来代码 <!DOCTYPE html> <ht ...

  7. 如何在Ubuntu14.04中安装mysql

    接触过MySQL的小伙伴们都知道,在Windows下安装MySQL是一件让人十分头大的事情,但是在Ubuntu等其他Linux系统中安装MySQL就简单很多了,具体的教程如下.1.在Ubuntu的命令 ...

  8. Linux学习总结（8）——VMware v12.1.1 专业版以及永久密钥

    VMware v12.1.1 专业版以及永久密钥 热门虚拟机软件VMware Workstation 现已更新至v12.1.1 专业版!12.0属于大型更新,专门为Win10的安装和使用做了优化,支持 ...

  9. Codeforces 429D Tricky Function 近期点对

    题目链接:点击打开链接 暴力出奇迹. 正解应该是近期点对.以i点为x轴,sum[i](前缀和)为y轴,求随意两点间的距离. 先来个科学的暴力代码: #include<stdio.h> #i ...

  10. [C/C++标准库]_[0基础]_[使用fstream合并文本文件]

    场景: 1. 就是合并文本文件,而且从第2个文件起不要合并第一行. 2. 多加了一个功能,就是支持2个以上的文件合并. 3. 问题: http://ask.csdn.net/questions/192 ...