事件绑定的方式

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. PCI Express(五) - Xilinx wizard

    原文地址:http://www.fpga4fun.com/PCI-Express5.html Xilinx makes using PCI express easy - they provide a ...

  2. 获取View到顶部的高度

    tv_title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener ...

  3. Linux内核分析 第二周

    Linux内核分析——完成一个简单的时间片轮转多道程序内核代码 张潇月+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-100 ...

  4. 调用WCF Client客户端测试

    之后

  5. cocos2d-js callFunc传参

    1.传递一个参数: pg.TestScene.prototype.init = function () { if (cc.Scene.prototype.init.call(this)) { var ...

  6. 微软ASP.NET技术“乱谈”

    微软ASP.NET技术“乱谈” 2014新年了,顺手写的一点文字,主要谈谈我对当前微软ASP.NET技术的看法,比较随意,大伙儿随便看看吧. 1 当前微软Web平台技术全貌 从2002年发布.NET ...

  7. All About Python

    Part one: Learn the Basics Hello, World! print "Hello,World!" Variables and Types Python i ...

  8. 21.2 Partitioning Types

    分区类型: range:根据列值得一个给定的范围 list:和range相似,除了分区被选择基于的列被匹配在一个被设定为分离的值 hash 基于列组成的表达式返回的非负值 key  相似hash ,除 ...

  9. case when语句后的表达式

    SQL中Case When语句的语法如下 Simple CASE expression: CASE input_expression WHEN when_expression THEN result_ ...

  10. 【软件工程】“谁是卧底”之NABC分析

    结对编程结束之后,迎来了结队编程,经过了很长时间的思考,想到了“谁是卧底”的idea,以下是该游戏的NABC分析: N(need): 即需求,近期,内地一知名综艺节目将“谁是卧底”游戏推广到年轻人中, ...