文档章节

JavaScript---事件绑定方式(传递参数)

奋斗的小芋头
 奋斗的小芋头
发布于 2016/12/06 16:17
字数 1136
阅读 73
收藏 2
点赞 0
评论 0

事件绑定方式:将对html元素或窗口的操作绑定给响应函数的方式。共四种

Html级别绑定

符合DOM0  级的事件绑定方式

符合DOM2

 

Html级别绑定  无法设置事件流

<script>
			function a(){
				//好的习惯,把整个网页上所有的事件绑定程序,聚集在一个函数中
				alert("nihao");
			}
		</script>
<input type="button" value="html级别绑定方式" onclick="a()" />
		

符合DOM0  级的事件绑定方式

将响应程序直接赋值给dom元素的时间属性。这是DOM最早版本的事件绑定方式,被所有浏览器兼容

无法设置事件流

1、是用普通函数作为响应程序

document.getElementById("btn1").onclick = sayHellow;    不要带(), 带着()表示直接调用·

<script>
			window.onload=function(){
				document.getElementById("btn1").onclick = sayHellow; //注意不要带()	
			}
			
			function sayHellow(){
				alert("hi")
			}
		</script>
<h2>DOM0级别的绑定方式</h2>
<input type="button" id="btn1" value="html级别绑定方式" />

2、是用匿名函数作为响应程序

window.onload=function(){
				document.getElementById("btn1").onclick = function(){
					alert("hi")
				}
}

特点:

1.可以使用匿名函数或普通函数作为响应函数

  1. 在响应函数中this代表目标元素(当前的button对象)
  2. 不符合DOM2标准,无法设定事件流
  3. 无法直接传递参数,但可以通过其他方式传递
  4. 对同一个事件只能绑定一个响应函数,最后绑定的响应函数会执行
  5. 通过 obj.onxx = null 可以解除绑定。
window.onload=function(){
				document.getElementById("btn1").onclick = function(){
					alert(this.id)
				}
			}
			

弹出 : btn1

传递参数的方式:将名字显示在列表中

window.onload=function(){
				function getData(){
				var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
				return workers;
			}
			
			var workers = getData(); //返回数组
			//显示列表
			function initList(workers){
				//获取ul的dom 对象
				//调用dom方法
				var ul=document.getElementById("ul1");
				for(var i=0 ;i<workers.length;i++){
					var li =document.createElement("li"); //<li></li>
					li.innerText = workers[i].name;
					ul.appendChild(li);
				}
				
			}
			initList(workers);
		}
		

传递参数的方法2 ---将参数 作为属性赋 给事件源

点击删除同时,显示出工号

		<script>
			window.onload=function(){
				function getData(){
				var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
				return workers;
			}
			
			var workers = getData(); //返回数组
			//显示列表
			function initList(workers){
				//获取ul的dom 对象
				//调用dom方法
				var ul=document.getElementById("ul1");
				for(var i=0 ;i<workers.length;i++){
					var li =document.createElement("li"); //<li></li>
					var button = document.createElement("input");
					button.type = "button";
					button.value = "删除";
					//设定属性值
					button.setAttribute("workerNum",workers[i].worknum);
					//绑定删除函数
					button.onclick = deleteWorker; //没有办法传递参数
					
				
					li.innerText = workers[i].name;
					li.appendChild(button);
					ul.appendChild(li);
				}
				
			}
			initList(workers);
		}
		
		function  deleteWorker(){
		//获取当前删除人员工号
			//第一种传递参数的方案,把参数传递给事件源(this---button);
			
			var workerNum = this.getAttribute("workerNum");
			alert("删除工号为"+workerNum)
		}
		</script>

传递参数方法三

使用绑定函数,专门设置一个函数,实现两重调用(绑定)

<script>
			window.onload=function(){
				function getData(){
				var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
				return workers;
			    }
			
			var workers = getData(); //返回数组
			//显示列表
			function initList(workers){
				//获取ul的dom 对象
				//调用dom方法
				var ul=document.getElementById("ul1");
				for(var i=0 ;i<workers.length;i++){
					var li =document.createElement("li"); //<li></li>
					var button = document.createElement("input");
					button.type = "button";
					button.value = "删除";
					//绑定函数
					bindAndArgs(button ,"onclick",deleteWorker1,workers[i])
				
					li.innerText = workers[i].name;
					li.appendChild(button);
					ul.appendChild(li);
				}
				
			}
			initList(workers);
		}
		
		
		function  deleteWorker1(worker){
		//响应函数
			alert("删除工号为"+ worker.worknum);
		}
		//执行当前的函数进行事件绑定,将参数传给事件源
		function bindAndArgs(dom, eventType , fun ,args){
			dom[eventType] = handleEvent;
			
			function handleEvent(){ //闭包
				fun.call(this,args);   //给响应函数的 this指针赋值为 workers[i]
			}
		}
		</script>

Javascript中bind、call、apply函数用法

http://developer.51cto.com/art/201503/466978.htm

符合DOM2级别的事件绑定方式:(不兼容)

绑定后可以设定事件流的顺序,顺序为绑定顺序。

格式:addEventListener("eventType",callback,use-capture);

  1. eventTye:事件名称。 click 省略on
  2. callback:事件处理方法
  3. use-capture:false-->冒泡阶段/ture-->捕获阶段。

ps:大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器

//浏览器可以自动传入一个对象 event对象
/*document.getElementById("outerDiv").addEventListener("click" , function(){
					
})*/ //匿名函数方式
				
document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //绑定函数方式

特点 :

可以使用匿名函数或普通函数

响应函数中this代表目标函数

可以设定事件流

无法传递参数,通过其他方式传递

对同一个事件可以绑定多个形影函数,响应函数执行顺序依据绑定顺序

建议使用jquery 的on方法 解决绑定函数兼容方式

1、可以传递参数

2、实现了事件委托

3、on方法可以实现事件流控制

4、在一般的浏览器都兼容

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 79
码字总数 129412
作品 0
大连
【译】为什么需要在 React 类组件中为事件处理程序绑定 this

原文地址:This is why we need to bind event handlers in Class Components in React 原文作者:Saurabh Misra 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:whu...

whuzxq ⋅ 05/15 ⋅ 0

React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

基于 BindingX 的富交互解决方案

基于 BindingX 的富交互解决方案 BindingX 官网: https://alibaba.github.io/bindingx/ BindingX 项目地址: https://github.com/alibaba/bindingx 一. 背景 在 Weex 环境下实现一些复杂的手势...

作者: 楚奕 ⋅ 05/31 ⋅ 0

关于js的bind牌胶水,了解一下?

前言 今天聊一聊js中的bind方法,主要从三个维度来阐述:why——>what——>how。文章虽经个人多次校验,对语言表述、代码书写等进行了认真审核,但仍免不了有疏漏之处,如若发现,还望指出,...

hanmin ⋅ 05/14 ⋅ 0

精读《你不知道的javascript》中卷

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书《你不知道的javascript》中卷介...

程序员解决师 ⋅ 06/20 ⋅ 0

JavaScript 编程精解 中文第三版 四、数据结构:对象和数组

四、数据结构:对象和数组 原文:Data Structures: Objects and Arrays 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 On two occas...

ApacheCN_飞龙 ⋅ 05/01 ⋅ 0

趣谈js的call和apply两大召唤术

前言 在《趣谈js的bind牌胶水》这篇文章中,我聊到了js的bind胶水,这篇文章我来聊聊js的call和apply这对孪生兄弟。 Why? ——> 为什么会出现apply和call? 在《趣谈js的bind牌胶水》中,我...

hanmin ⋅ 05/21 ⋅ 0

妙用Javascript中apply、call、bind

这篇文章实在是很难下笔,因为网上相关文章不胜枚举。 巧合的是前些天看到阮老师的一篇文章的一句话: “对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整...

孟飞阳 ⋅ 04/27 ⋅ 0

JavaScript 编程精解 中文第三版 十二、项目:编程语言

十二、项目:编程语言 原文:Project: A Programming Language 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 确定编程语言中的表达式...

ApacheCN_飞龙 ⋅ 05/11 ⋅ 0

微信小程序运行流程看这篇就够了

一.微信小程序是啥 本质其实就是(混合)的app 介于web app与native 原生app之间,具备丰富的调用手机各种功能的接口,同时又具备灵活性,跨平台 1. 运行环境差异 微信小程序运行在三端:iOS...

⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 9分钟前 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 13分钟前 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 15分钟前 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 34分钟前 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 40分钟前 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 41分钟前 ⋅ 0

监控各项服务

比如有三个服务, 为了减少故障时间,增加监控任务,使用linux的 crontab 实现. 步骤: 1,每个服务写一个ping接口 监控如下内容: 1,HouseServer 是否正常运行,所以需要增加一个ping的接口 ; http...

黄威 ⋅ 45分钟前 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 45分钟前 ⋅ 0

nodejs __proto__跟prototype

前言 nodejs中完全没有class的这个概念,这点跟PHP,JAVA等面向对象的语言很不一样,没有class跟object的区分,那么nodejs是怎么样实现继承的呢? 对象 对象是由属性跟方法组成的一个东西,就...

Ai5tbb ⋅ 51分钟前 ⋅ 0

Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库

Q: Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库 A: 执行以下2条命令解决: apt-get install php-mysql service apache2 restart php -m 执行后会多以下4个模块: mysqli mysqlnd...

SamXIAO ⋅ 54分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部