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. iOS framework配置脚本

    # Sets the target folders and the final framework product. FMK_NAME=HovnVoipEngine FMK_VERSION=1.0 # ...

  2. 【计算机视觉】基于Kalman滤波器的进行物体的跟踪

    预估器 我们希望能够最大限度地使用測量结果来预计移动物体的运动. 所以,多个測量的累积能够让我们检測出不受噪声影响的部分观測轨迹. 一个关键的附加要素即此移动物体运动的模型. 有了这个模型,我们不仅能 ...

  3. Unix网络编程之环境搭建

    环境搭建 在尝试UNP书上的样例时,会由于找不到"unp.h"等问题无法编译成功.因此在学习之前须要先搭建好编译环境. 步骤 <1>下载  UNIX网络编程源码unpv ...

  4. Codeforces Round #337 (Div. 2) 610C Harmony Analysis(脑洞)

    C. Harmony Analysis time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  5. JAVA 解析复杂的json字符串

    转自:https://blog.csdn.net/lovelovelovelovelo/article/details/73614473String parameter = { success : 0 ...

  6. Codefroces B. Hamming Distance Sum

    Genos needs your help. He was asked to solve the following programming problem by Saitama: The lengt ...

  7. javascript 基础篇 随课笔记

    !DOCTYPE HTML><html><head><meta name="content-type" content="text/h ...

  8. centos yum 安装php7.2

    yum -y remove php* rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm r ...

  9. 从零開始制作H5应用（2）——V2.0版，多页单张图片滑动，透明过渡及交互指示

    上一次.我们制作了我们第一个H5场景应用的V1.0版,这次我们趁热打铁.在上一版的基础上对层序进行改动和扩展. 任务 1.页面数量由3张增加至9张: 2.每张页面中放入一张全屏自适应的图片. 3.修复 ...

  10. struts2学习笔记（7）---数据验证之validateXxx()方法

    validateXxx()方法 上一篇文章写了使用Action的validate()方法,validate()仅仅能对action的所有方法进行验证.而要实现对action中特定的方法进行验证,就须要 ...