第一种:

obj.on*=function(){}

var btn=document.getElementById('myBtn');
btn.onclick=function(){
alert(1);
}

这种方法是很常用,就是将一个函数赋值给一个事件处理程序。

它的优点是简单,然后具有跨浏览器的优势,现代所有浏览器都支持。

如果要取消这种形式绑定的事件,可以将事件处理程序属性的值设为null:

btn.onclick=null;  //删除事件处理程序

但是,这种形式的绑定有一个缺点,那就是不能在同一个对象上绑定两个事件,如下:

oDiv1.onclick=function(){
alert(1);
}
oDiv1.onclick=function(){
alert(2);
} //

上面代码在同一对象上分别绑定了两个事件,结果只弹出2,是因为后面绑定的事件会覆盖前面的事件。

要想在一个对象上同时绑定两个事件或多个事件,就需要第二种绑定形式了。

第二种:

这种形式称为“DOM2级事件”,定义了两个方法:addEventListener()和removeEventListener()。

他们都接受3个参数:

第一个参数:要处理的事件类型名称;

第二个参数:处理程序的函数;

第三个参数:布尔值,表示是否捕获,true则为捕获,false则为冒泡。

例:

var btn=document.getElementById('myBtn');
btn.addEventListener('click',function(){
alert(1);
},false);

通过addEventListener()添加的事件只能通过removeEventListener()来删除,

尤其注意的是,传入的匿名函数无法被删除,比如要删除上面代码绑定的事件,

btn.removeEventListener('click',function(){
alert(1);
},false)

这样写是没有用的,看似删除的是同一个处理函数,但其实是两个不同的函数了,虽然长的一样。

所以通常这样写:

var btn=document.getElementById('myBtn');
var show=function(){
alert(1);
} btn.addEventListener('click',show,false); //btn.removeEventListener('click',show,false);

同时,它可以在一个对象上绑定多个事件:

var show=function(){
alert(1);
}
var show2=function(){
alert(2);
} btn.addEventListener('click',show,false); //
btn.addEventListener('click',show2,false); //

兼容:

addEventListener() 和 removeEventListener()不支持IE8及其以下版本,对于低版本IE,同样有两个方法:

attachEvent()  和  detachEvent(),他们各自接收两个参数:事件处理程序名称和事件处理函数。

因为IE8和更早版本只支持事件冒泡,所以通过这种方法添加的事件处理程序都会被添加到冒泡阶段。

var btn=document.getElementById('myBtn');
var show=function(){
alert(1);
} btn.attachEvent('onclick',show); //btn.detachEvent('onclick',show);

同样,删除时也必须提供相同参数,即传入匿名函数不能被删除,如上写法正确。

注意事件类型名称,要加上‘on’。

同时,它也可以在一个对象上绑定两个事件,但结果略微不同:

var btn=document.getElementById('myBtn');
var show=function(){
alert(1);
}
var show2=function(){
alert(2);
} btn.attachEvent('onclick',show); //
btn.attachEvent('onclick',show2); //

在IE8及其以下版本,可以执行这段代码,但弹出结果是倒序的,即先弹出2,再弹出1。

我在IE9和IE10下测试,弹出结果又是正序的,先弹出1,再弹出2。

IE11不支持这个方法,同样Chrome和火狐也不支持。

总结!!!

标准浏览器(含ie): obj.addEventListener(事件名称,事件函数,是否捕获)

1.有捕获

2.事件名称没有on

3.事件执行的顺序是正序

4.this指向触发该事件的对象

ie: obj.attachEvent(事件名称,事件函数)

1.没有捕获

2.事件名称有on

3.事件函数执行的顺序:标准ie正序,非标准ie倒序

4.this指向window

关于this问题,可以通过call()方法修改。

JS事件绑定的两种形式的更多相关文章

  1. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  2. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  3. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. JS 事件绑定的几种方式 小笔记

    第一种 var test=document.getElementById('add'); add.onclick=function(){ alert('1'); } 直接在对象上注册事件 缺点:如果我 ...

  5. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  6. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  7. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  9. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

随机推荐

  1. qt5-工程文件的介绍--快捷键

    Ctrl+/    注释

  2. percon server5.7的配置版本

    percon server5.7的配置版本 [root@tidb-db-backup mysql_3306]# cat my_3306.cnf # my_3306.cnf [client] port ...

  3. ubuntu 7z解压

    安装方法:     sudo apt-get install p7zip 解压文件:     7z x manager.7z -r -o /home/xx 解释如下: x 代表解压缩文件,并且是按原始 ...

  4. 【Leetcode】二叉树的层次遍历

    题目: 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 例如: 思路:采用宽度优先搜索. 时间复杂度:O(n).n为节点的数量,遍历所有节 ...

  5. VMware NAT 静态IP模式下上网

    自从开始学Linux之后,对使用NAT模式上网,很是困惑.具体原理,还待求证. 使用方法(VMware): 简介: wmware在NAT使用方面很是轻松 打开本地的网络适配器. 修改虚拟网卡VMnet ...

  6. 8.Python标识符命名规范

    简单地理解,标识符就是一个名字,就好像我们每个人都有属于自己的名字,它的主要作用就是作为变量.函数.类.模块以及其他对象的名称. Python 中标识符的命名不是随意的,而是要遵守一定的命令规则,比如 ...

  7. java复制项目中的补丁,完整的包路径

    package com.bytter.audit.iface.util; import java.io.BufferedInputStream; import java.io.BufferedOutp ...

  8. python双划线类型

    通过__开始的属性感觉分为两种类型: 利用dir调用的时候: < build in x object at 0x01F116B0>:这种貌似和运算符重载有关系,用户如果需要的话可以重写该函 ...

  9. 01 MySQL入门了解

      MySql的前戏 在学习Mysql之前,我们先来想一下一开始做的登录注册案例,当时我们把用户的信息保存到一个文件中: #用户名 |密码root|123321 alex|123123 上面文件内容的 ...

  10. 20175201张驰 实验四 Android 开发

    4-1:[Android Studio安装]安装过程中出现的错误:参考https://blog.csdn.net/weixin_38277423/article/details/80254483 1. ...