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外部声明,即为 ...
随机推荐
- Entity与Entity之间的相互转化
一.两个实体类的属性名称对应之间的转化 1.两个实体类 public class Entity1 { private Integer id; private String name; private ...
- 别再问我们用什么画图的了！问就是excalidraw
每次发 https://github.com/tal-tech/go-zero 相关文章时,都会有读者问我们用什么画图的. 这图什么工具画的呀?好看! 这个手绘风格真好看,用啥工具画的呀? 可不可以介 ...
- 基于scrapy框架的分布式爬虫
分布式 概念:可以使用多台电脑组件一个分布式机群,让其执行同一组程序,对同一组网络资源进行联合爬取. 原生的scrapy是无法实现分布式 调度器无法被共享 管道无法被共享 基于 scrapy+redi ...
- ModelForm的基本用法：
一.ModelForm的基本用法示例: from django import forms from app01 import models class BookModelForm(forms.Mode ...
- Matlab GUI学习总结
从简单的例子说起吧. 创建Matlab GUI界面通常有两种方式: 1,使用 .m 文件直接动态添加控件 2. 使用 GUIDE 快速的生成GUI界面显然第二种可视化编辑方法算更适合 ...
- 聊聊.net应用程序的Docker镜像
要在容器中运行.net应用程序,你需要在容器镜像中安装.net Framework或.net Core 运行时.这不是你需要自己管理的东西,因为微软提供的Docker镜像已经安装了运行时,你可以使用 ...
- 邮件解析 CNAME记录 A记录 NS记录 MX记录
域名配置 示例发信配置请至域名 service.i-test.cn DNS服务提供商处添加TXT记录,并保持SPF记录正确,否则会无法发信.*1.所有权验证类型 主机记录 主域名 记录值 状态TXT ...
- Jaspersoft Studio报表设计
1 开发工具 1.1 软件名称 名称:TIBCO Jaspersoft Studio 版本:6.0或以上,建议6.2.1 1.2 软件安装 免安装软件包,拷贝即可使用,建议放在D:盘或其 ...
- LOJ1036
AHOI 2008 聚会 Y 岛风景美丽宜人,气候温和,物产丰富.Y 岛上有 N 个城市,有 N-1 条城市间的道路连接着它们.每一条道路都连接某两个城市.幸运的是,小可可通过这些道路可以走遍 Y 岛 ...
- SpringMVC听课笔记（二：SpringMVC的 HelloWorld）
1.如何建Maven web项目,请看http://how2j.cn/k/maven/maven-eclipse-web-project/1334.html 2.Maven项目,pom文件中的jar包 ...