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外部声明,即为 ...
随机推荐
- salesforce零基础学习（一百）Mobile Device Tracking
本篇参考: Mobile Device Tracking (salesforce.com) UserDevice | SOAP API Developer Guide | Salesforce Dev ...
- jvm源码解析java对象头
认真学习过java的同学应该都知道,java对象由三个部分组成:对象头,实例数据,对齐填充,这三大部分扛起了java的大旗对象,实例数据其实就是我们对象中的数据,对齐填充是由于为了规则分配内存空间,j ...
- ubuntu 14.04下安装 mysql-workbench
直接在命令行下运行下面命令: sudo apt-get install mysql-workbench 安装完,都可以在Dash中找到 "mysql" 就点击应用打开. 在data ...
- go mod 以及vscode解决被墙的插件问题
https://blog.csdn.net/weixin_39003229/article/details/97638573?utm_medium=distribute.pc_relevant.non ...
- 中央事件总线 事件驱动架构（EDA） 解析事件总线的4种实现方式
事件驱动架构(EDA)https://mp.weixin.qq.com/s/nA8XFD2Rx_7qA_LxltGGHw https://mp.weixin.qq.com/s/cD3auglgKzOb ...
- (G)I-DLE—화(火花) （HWAA）
闲来无事又来推歌了/cy 我这博客好像只能用来更日记+推歌了/kk 到今天(G)I-DLE已经获得九个一位啦~ 歌真的挺不错的 特别是,一个韩国女团出了这首歌的中文版 就觉得很有好感 music 韩文 ...
- oracle 常用语法（）
一ORACLE的启动和关闭 1在单机环境下 2在双机环境下 Oracle数据库有哪几种启动方式 1startup nomount 2startup mount dbname 3startup open ...
- UML——活动图
宏观导图 是森马? 活动图,属于UML中动态建模工具图,它描述活动的顺序,展现从一个活动到另一个活动的控制流.活动图着重表现从一个活动到另一个活动的控制流,是内部处理驱动的流程. 其实,说白了 ...
- mysql:如何利用覆盖索引避免回表优化查询
说到覆盖索引之前,先要了解它的数据结构:B+树. 先建个表演示(为了简单,id按顺序建): id name 1 aa 3 kl 5 op 8 aa 10 kk 11 kl 14 jk 16 ml 17 ...
- 2020Nowcode多校 Round9 B.Groundhog and Apple Tree
题意 给一棵树 初始\(hp=0\) 经过一条边会掉血\(w_{i}\) 第一次到达一个点可以回血\(a_{i}\) 在一个点休息\(1s\)可以回复\(1hp\) 血不能小于\(0\) 每条边最多经 ...