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. 使用Opencv2遇到error C2061: 语法错误: 标识符dest

    在写代码是遇到了这样一个问题,error C2061: 语法错误: 标识符"dest": 1>d:\opencv\opencv\build\include\opencv2\f ...

  2. rgba

    正反两面展示效果 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  3. STL使用————SET&MULTISET

    SET函数的基本用法 by hhl 使用set的好处 1. 当增加元素后,集合会自动删重并从小到大排列(时间比快排还快)2. 相当于一棵伸展树(能快速求出后继) 使用基础 #include<se ...

  4. BZOJ5106: [CodePlus2017]汀博尔

    [传送门:BZOJ5106] 简要题意: 给出n棵树,初始高度为h[i],每棵树每个月长高a[i] 现有一个客户,需要至少s长的总木材,而且每次截取的木材必须是一整颗树而且高度大于等于L 求出最少的月 ...

  5. spring配置 quartz-config.xml

    <!-- 配置调度程序quartz ,其中配置JobDetail有两种方式--> <!-- 使用MethodInvokingJobDetailFactoryBean,任务类可以不实现 ...

  6. IOC DI 专题

    IoC:Inversion of Control,控制反转DI:Dependency Injection,依赖注入 要理解上面两个概念,就必须搞清楚如下的问题: 参与者都有谁?依赖:谁依赖于谁?为什么 ...

  7. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 (B,F,L,M)

    B. Train Seats Reservation You are given a list of train stations, say from the station 1 to the sta ...

  8. 127.0.0.1和localhost和本机IP三者的区别！

    1, 先来说下回送地址(Loopback Address): 回送地址是主机用于向自身发送通信的一个特殊地址(也就是一个特殊的目的地址).可以这么说:同一台主机上的两项服务若使用回送地址而非分配的主机 ...

  9. 实现人脸识别性别之路---matplotlib之注释

    一.准备数据 利用np.linspace()函数得到一定范围内的数据集 利用2*x+1的公式求出y 二.创建窗口 三.根据具有规律的数据画图 四.调整坐标轴 1.将原本的坐标轴的上轴和右轴去掉,使用基 ...

  10. Django transaction 误用之后遇到的一个问题与解决方法

    今天在调试项目开发好的一个模块的时候,发现了一个很诡异的现象,最后追踪发现是因为在项目中事务处理有误所致.这个问题坑了我好一会,所以记录一下,以免再踩坑.下面开始详述. 我们都知道 Django 框架 ...