事件绑定的方式

1.  DOM  元素行内绑定
<div onclick="alert(1)"></div>
 
2. js on+eventType
document.onclick =function(){alert(2)}
3. addEventListener
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
4.addEvent
addEvent( document.getElementById('foo'), 'click', doSomething );
5. attachEvent
document.attachEvent('click',function(){alert(5)});

特点区别

DOM  元素行内绑定  js on+eventType attachEvent addEventListener addEvent
事件处理程序与html结构混杂在一起

由于该方法的事件函数是全局的,很容易命名冲突

该方法限制了绑定事件处理的函数的次数
document.onclick =function(){alert(2)}
 
document.onclick =function(){alert(3)}
 
3会覆盖2
绑定多个不会被覆盖
可以绑定多个事件但不会被覆盖
 
回调函数内的this指向target本身
element.addEventListener(eventfunctionuseCapture)
 
和addEventListener的却别 回调函数this指向window

例子

document.onclick =function(){alert(1)}
 
document.onclick =function(){alert(2)}
 
document.onclick =function(){alert(3)}
document.attachEvent('click',function(){alert(1)})
 
document.attachEvent('click',function(){alert(2)})
 
document.attachEvent('click',function(){alert(3)})
document.addEventListener('click',function(){alert(1)},false)
 
document.addEventListener('click',function(){alert(2)},false)
 
document.addEventListener('click',function(){alert(3)},false)
3 3   2   1 1    2    3

js 事件绑定的更多相关文章

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

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

  2. js事件绑定细节说明

    javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...

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

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

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

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

  5. js事件绑定及深入

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

  6. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

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

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

  8. js事件绑定/监听

    事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...

  9. 原生js事件绑定

    一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

随机推荐

  1. Python3.x和Python2.x的区别

    1.性能 Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可 以取得很好的优化结果. Py3.1性能比Py2 ...

  2. C#如何分割多个空格分隔的字符串?

    using System; using System.Text; using System.Text.RegularExpressions; namespace test { class Progra ...

  3. 主机WIFI网络环境下,Linux虚拟机网络设置

    在主机使用WIFI网络环境下,怎么样进行虚拟机静态ip设置和连接互联网呢,原理什么太麻烦,另类的网络共享而已: 1.其实简单将网络连接模式设置成NAT模式即可. 2.虚拟网络编辑器依旧是桥接模式,选择 ...

  4. java 平台 权限管理

    最近在做公司内部的物流业务平台的权限管理,感触颇多.记录一下 权限管理分两部分:数据权限和操作权限. 数据权限: 这个是和用户相关的. 因为平台是多机构的,所以再考虑数据权限的时候,是按照机构来管理的 ...

  5. java封装学习

    封装:将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问.把过程和数据包围起来,对数据的访问只能通过已定义的接口. 在java中通过关键字priva ...

  6. OpenCV Template Matching Subpixel Accuracy

    OpenCV has function matchTemplate to easily do the template matching. But its accuracy can only reac ...

  7. MC的分布式算法的实现和一些总结

    首先我们知道Memcached是一个分布式的缓存系统,但memcached并不像是mongodb那样,允许配置多个节点,且节点之间是自动分配数据的 也就是说memcached节点之间,是互不相通信的, ...

  8. delphi 开发者 linux 实务(转)

    Linux Essentials for Delphi Developers   There is currently no way using Delphi to target Linux. Lon ...

  9. SQL Server中Rowcount与@@Rowcount的用法

    rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...

  10. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...