文档章节

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

奋斗的小芋头
 奋斗的小芋头
发布于 2016/12/06 16:17
字数 1136
阅读 209
收藏 2

事件绑定方式:将对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
博文 161
码字总数 129345
作品 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
0
JavaScript变量作用域与闭包实现

先抛出原问题: for (var i = 0; i < 10; i++) {divs[i].onmouseover = function () { this.style.backgroundColor = "red"; this.style.left = -55i; };} 测试结果显示:鼠标经过所有div时......

cjp路人
2014/03/21
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
07/31
0
0
说说在 Vue.js 中如何实现组件间通信(高级篇)

之前说过,可以使用 props 将数据从父组件传递给子组件。其实还有其它种的通信方式,下面我们一一娓娓道来。 1 自定义事件 通过自定义事件,我们可以把数据从子组件传输回父组件。子组件通过...

deniro
12/09
0
0
addEventListener的第三个参数

如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例。 方法一: 直接在对应的HTML元素标签上绑定函数 <button id='submit' onclick='onClickFn()'>...

GZShi_alpha
2014/03/04
0
2

没有更多内容

加载失败,请刷新页面

加载更多

保护Hadoop集群三大方法

大约在两年前,开源数据库解决方案MongoDB以及Hadoop曾遭受过大量恶意攻击,这些攻击后被统称为“勒索软件”,因为其攻击者会擦除或加密数据,然后向被攻击者索要资金以恢复数据。自今年以来...

linuxCool
15分钟前
1
0
开源 java CMS - FreeCMS2.8会员我的留言

项目地址:http://www.freeteam.cn/ 我的留言 从左侧管理菜单点击我的留言进入。在这里可以查看当前登录会员的所有留言记录。 查看留言 点击留言标题可以查看留言详细内容。 删除留言 选择留...

freeteam
35分钟前
2
0
OSChina 周五乱弹 —— 这就是不要女朋友的理由

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @狄安娜的猫 :分享丁家鑫的单曲《丁家鑫 - 克罗地亚狂想曲 - 古筝remix》 《丁家鑫 - 克罗地亚狂想曲 - 古筝remix》 手机党少年们想听歌,请...

小小编辑
今天
799
20
CentOS配置Tomcat监听80端口,虚拟主机

Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [root@test-a ~]# vim /usr/local/tomcat/conf/server.xml # 找到 Connector port="8080" protocol="HTTP/1......

野雪球
今天
6
0
《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部