文档章节

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

奋斗的小芋头
 奋斗的小芋头
发布于 2016/12/06 16:17
字数 1136
阅读 93
收藏 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
码字总数 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
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
MVC如何使用开源分页插件shenniu.pager.js

  最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了;虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(...

神牛步行3
2016/12/06
0
0
jquery之trigger()

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。 <script type="text/javascrip...

freedonn
2014/09/13
0
0
微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善

详情 - 功能完善 本文配套视频地址: https://v.qq.com/x/page/f0555nfdi14.html --- 开始前请把 分支中的 目录导入微信开发工具 这一节中,我们把详情的其他功能完善起来:下一篇、 分享、 ...

iKcamp
2017/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

此生1.3

颜值是开胃菜,不要太在意,正餐才是重点。

colinux
今天
1
0
[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
3
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
3
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
1
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部