js 事件绑定
事件绑定的方式
<div onclick="alert(1)"></div>
document.onclick =function(){alert(2)}
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
addEvent( document.getElementById('foo'), 'click', doSomething );
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(event, function, useCapture)
![]() ![]() |
和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 事件绑定的更多相关文章
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- js事件绑定细节说明
javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...
- js事件绑定的几种方式与on()、bind()的区别
版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
- js事件绑定函数
js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...
- js事件绑定的几种方式
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...
- js事件绑定/监听
事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...
- 原生js事件绑定
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...
随机推荐
- PCI Express(五) - Xilinx wizard
原文地址:http://www.fpga4fun.com/PCI-Express5.html Xilinx makes using PCI express easy - they provide a ...
- 获取View到顶部的高度
tv_title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener ...
- Linux内核分析 第二周
Linux内核分析——完成一个简单的时间片轮转多道程序内核代码 张潇月+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-100 ...
- 调用WCF Client客户端测试
之后
- cocos2d-js callFunc传参
1.传递一个参数: pg.TestScene.prototype.init = function () { if (cc.Scene.prototype.init.call(this)) { var ...
- 微软ASP.NET技术“乱谈”
微软ASP.NET技术“乱谈” 2014新年了,顺手写的一点文字,主要谈谈我对当前微软ASP.NET技术的看法,比较随意,大伙儿随便看看吧. 1 当前微软Web平台技术全貌 从2002年发布.NET ...
- All About Python
Part one: Learn the Basics Hello, World! print "Hello,World!" Variables and Types Python i ...
- 21.2 Partitioning Types
分区类型: range:根据列值得一个给定的范围 list:和range相似,除了分区被选择基于的列被匹配在一个被设定为分离的值 hash 基于列组成的表达式返回的非负值 key 相似hash ,除 ...
- case when语句后的表达式
SQL中Case When语句的语法如下 Simple CASE expression: CASE input_expression WHEN when_expression THEN result_ ...
- 【软件工程】“谁是卧底”之NABC分析
结对编程结束之后,迎来了结队编程,经过了很长时间的思考,想到了“谁是卧底”的idea,以下是该游戏的NABC分析: N(need): 即需求,近期,内地一知名综艺节目将“谁是卧底”游戏推广到年轻人中, ...