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. [Poi] Build and Analyze Your JavaScript Bundles with Poi

    Ever wonder where those extra KB in your bundle are coming from? This lesson walks you through runni ...

  2. [React] Implement a React Context Provider

    If you have state that needs to exist throughout your application, then you may find yourself passin ...

  3. DF标志和串移动指令(movsb/movsw)

    1.标志寄存器的第10位DF,方向标志位.在串处理指令中,控制每次操作后si,di的增减 DF=0,每次操作后,si.di添加 DF=1,每次操作后,si.di减小 我们能够用汇编语法描写叙述movs ...

  4. hdu 1102 Constructing Roads(kruskal || prim)

    求最小生成树.有一点点的变化,就是有的边已经给出来了.所以,最小生成树里面必须有这些边,kruskal和prim算法都能够,prim更简单一些.有一点须要注意,用克鲁斯卡尔算法的时候须要将已经存在的边 ...

  5. 【HDU 5402】Travelling Salesman Problem（构造）

    被某题卡SB了,结果这题也没读好...以为每一个格子能够有负数就当搜索做了.怎么想也搜只是去,后来发现每一个格子是非负数,那么肯定就是构造题. 题解例如以下: 首先假设nn为奇数或者mm为奇数,那么显 ...

  6. POJ 1459 最大流 第二题

    http://poj.org/problem?id=1459 也是网络流的基础,只是虚拟出一个源点和终点,对应的生产值和消费值就加到与源点和终点的边上,然后做一次bfs就好了. #include &l ...

  7. JAVA学习书籍

    1 java编程思想(第四版) 2 head first servlet &jsp

  8. php自定义加密和解密

    <?php function _authcode($string, $operation = 'DECODE', $expiry = 0) { $key = 'c5s1t6o';    $cke ...

  9. NOIP 模拟赛

    NOIP 模拟赛 思路:求 n , m 的 gcd,然后用 n , m 分别除以 gcd:若 n 或 m 为偶数,则输出 1/2. 特别的,当 n = m = 1 时,应输出 1/1 #include ...

  10. java正則表達式总结

    近期用到的正則表達式 因为近期在做一个android的新闻client.多次用到了正則表達式.因此总结下. 1.使用正則表達式获取Rss资源内的文章内容的图片url 由于在每条新闻浏览的listVie ...