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. Thinking in UML 学习笔记（三）——UML核心视图之类图

    类图的作用:用于展示系统中的类及其相互之间的关系. UML在解决面向对象的方法中对类理解为三个层次,各自是:概念层.说明层.实现层.在UML中,从開始的需求到终于设计类,类图也是环绕这三个层次的观点进 ...

  2. html2canvas截取页面

    1.下载html2canvas.js 2.引入 3.修改html2canvas支持远程图片处理 function ImageContainer(src, cors) { this.src = src; ...

  3. 关于vue中的语法糖v-model

    开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识 1. 使用prop ...

  4. 关于Hive在主节点上与不在主节点上搭建的区别之谈

    Hive不在主节点上搭建,我这里是在HadoopSlave1上.

  5. [ Linux ] 釋放記憶體指令(cache) - 轉載

    1. [Linux]釋放記憶體指令(cache) http://jeffreyy.pixnet.net/blog/post/84333764-%E3%80%90linux%E3%80%91%E9%87 ...

  6. GHO文件内IE主页的修改方法

    修改方法: 1.先打开映像  GHOSTexp 打开GHO文件 2.提取注册表文件  C:\WINDOWS\SYSTEM32\CONFIG 下就是系统的注册表文件,详细见下 3.打开本地的注册表,加载 ...

  7. 安装完Python之后，如何设置Python环境变量

    人生苦短,我用Python.最近有许多加群的萌新在咨询Python安装的事宜,Python安装问题不大,可以戳这篇文章:.本以为安装Python之后就可以万事大吉,高枕无忧了,往命令行中输入pytho ...

  8. 推荐学习《算法之美：指导工作与生活的算法》中文PDF+英文PDF

    我们所有人的生活都受到有限空间和有限时间的限制,因此常常面临一系列难以抉择的问题.在一天或者一生的时光里,哪些事是我们应该做的,哪些是应该放弃的?我们对杂乱无序的容忍底线是什么?新的活动与熟悉并喜爱的 ...

  9. JAVA文件写入FileWriter

    JAVA文件写入FileWriter 导包import java.io.FileWriter创建构造方法public FileWrite(String filename),参数是文件的路径及文件名(默 ...

  10. 数据持久化－存取方式总结&应用沙盒&文件管理NSFileManager

    iOS应用数据存储的常用方式:  1.XML属性列表   (plist归档)  2.NSUserDefaults (偏好设置)  3.NSKeyedArchiver  归档(加密形式)  4.SQLi ...