JavaScript事件绑定的三种方式
(一)事件绑定的三种方式
(1)通过on的形式
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0]; div.onclick = function(){
console.log('a');
}
</script>
兼容性好，但是每个事件只能绑定一个处理函数；
(2)通过addEventListener形式
形式为obj.addEventListener(事件类型，处理函数，false)
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0]; div.addEventListener('click',function(){
console.log('b');
},false);
</script>
IE9以下版本不兼容；
还可以为一个事件绑定多个处理函数，如下示例：
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0]; div.addEventListener('click',function(){
console.log('b');
},false);
div.addEventListener('click',function(){
console.log('c');
},false);
</script>
(3)attachEvent
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0]; div.attachEvent('onclick',function(){
console.log('c');
});
</script>
IE独有；可以为一个事件绑定多个处理函数
(二)上述三种绑定时间的this问题
1 <body>
2 <div style="width:100px;height:100px;background-color:green">
3
4 </div>
5 <script type="text/javascript">
6 var div = document.getElementsByTagName('div')[0];
7
8 function addEvent(elem,type,handle){
9 if(elem.addEventListener){
10 elem.addEventListener(type,handle,false);
11 }else if(add.attachEvent){
12 elem.attachEvent('on'+type,function(){
13 handle.call(elem);
14 });
15 }else{
16 elem['on' + type] = handle;
17 }
18 }
19 function handle(elem){
20 console.log(this);
21 }
22
23 addEvent(div,'click',handle);
24
25 </script>
26 </body>
(三)解除事件处理程序
如下函数功能实现只有点击第一次有效
1 <body>
2 <div style="width:100px;height:100px;background-color:green">
3
4 </div>
5 <script type="text/javascript">
6 var div = document.getElementsByTagName('div')[0];
7
8 div.onclick = function (){
9 console.log('a');
10 this.onclick = null; //取消绑定事件
11 }
12 </script>
13 </body>
JavaScript事件绑定的三种方式的更多相关文章
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JavaScript中事件绑定的三种方式
JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- JS事件绑定的三种方式比较
js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- js中的事件绑定的三种方式
1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onlo ...
- [转]javascript指定事件处理程序包括三种方式：
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
- JavaScript事件处理程序的3种方式
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...
- JavaScript声明全局变量的三种方式
JavaScript声明全局变量的三种方式 JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...
随机推荐
- Spring-AOP为类增加新的功能
适配器的简单应用实现: 比如:有一个类Car,在类中有两个属性一个为汽车名name,另一个为速度speed.其行为为run(). 现在有一辆车BMWCar 增加了GPS功能.如下实现: 基本类: pu ...
- Poj-P1088题解【动态规划/记忆化搜索】
本文为原创,转载请注明:http://www.cnblogs.com/kylewilson/ 题目出处: http://poj.org/problem?id=1088 题目描述: 区域由一个二维数组给 ...
- 5V充12.6V三节锂电池，5V升压12.6V的电路图
三串锂电池的充电电压是三串锂电池的最高电压值,就是12.6V了.5V充12.6V是5V给三串锂电池充电.如笔记本的USB口5V给三串锂电池充电,如5V的适配器或者手机充电器插上数据线给三串锂电池充电电 ...
- Socket.IO基础教程
什么是Socket.IO Socket.IO是一个库,可用于在浏览器和服务器之间进行实时,双向和基于事件的通信.它包括: 使Node.js服务器:来源 | API 为浏览器(可从Node.js的也运行 ...
- 提示框，对话框，路由跳转页面，跑马灯，幻灯片及list组件的应用
目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...
- 网络优化之net.ipv4.tcp_tw_recycle和tcp_tw_reuse参数
网络优化之net.ipv4.tcp_tw_recycle和tcp_tw_reuse参数 - 一个人默默潜行 - 博客园 https://www.cnblogs.com/ppp1314520818/p/ ...
- django 请求处理流程 链路追踪
class BaseMiddleware: # https://github.com/django/django/blob/master/tests/utils_tests/test_decorato ...
- Uniter 单一框架学习
unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 一.u ...
- HBase二级索引、读写流程
HBase二级索引.读写流程 一.HBse二级索引方案 1.1 基于Coprocessor方案 1.2 Phoenix二级索引特点 1.3 Phoenix 二级索引方案 二.HBase读写流程 2.1 ...
- 关于Spring Boot的博客集合
掘金: 关于Spring Boot的博客集合 CSDN: Spring Boot教程 掘金: SpringBoot2 简书: Spring Boot 核心技术 天码营 Spring Data JPA: ...