JS 给多个对象添加事件

废话不多说代码如下:

方法一:

<em>v</em>ar  pArys=document.getElementsByClassName("ps");
				for(var i = 1; i <= pArys.length; i++){
					//alert(i)
					var pAry = document.getElementById("p"+i);
					pAry.onclick=function(){
						this.style.fontSize="39px";
					}
				}
				

方法二:

var  pArys=document.getElementsByClassName("ps");
				for(var i = 1; i <= pArys.length; i++){
					//alert(i)
					var pAry = document.getElementById("p"+i);
					pAry.onclick=function(){
						this.style.fontSize="39px";
					}
				}
				

html代码:

<body>
		<p id="p1" class="ps">事件1</p>
		<p id="p2" class="ps">事件2</p>
		<p id="p3" class="ps">事件3</p>
		<p id="p4" class="ps">事件4</p>
	</body>

时间: 2024-10-10 09:58:21

JS 给多个对象添加事件的相关文章

(转)深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head&g

给js动态创建的对象绑定事件

1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.addEventListener){ el.addEventListener(type,fn,false) }else if(el.attachEvent()){ el.attachEvent('on' + type,fn,false) }else{ return false }} 1-2.使用JS创建

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head> 4.  <meta charset="utf

javascript面向对象--观察者模式(为对象添加事件监听功能)

正文开始之前,有这么一个需求: >背景:宁静的夜晚,一天晚上,狗蛋(主人)睡得正香,侠盗高飞(小偷)突然造访. >事件:高飞正准备下手的时候,不料被旺财(狗)发现了,于是旺财叫了起来,狗蛋醒了,高飞逃走了. 分析需求后,可以发现有三个对象: 高飞(小偷) 旺财(狗) 狗蛋(主人) 创建对象的构造函数以及原型方法 //人的构造函数 function Person(name){ this.name=name; //首次创建实例时,为Person的原型添加共有的方法 if(!Person.proto

深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> &

用JS给浏览器的关闭按钮添加事件

以下是指在js中实现,而非 <body onunload="close()"> 这种方法! 因为这样是在unload掉body的时候触发,而无聊任何浏览器,都会在关闭的时候unload掉body的! 模型1:function close(){ alert("sdfsdfsdf");} window.onbeforeunload=close; 模型2:function close(){ if(document.body.clientWidth-event.

使用addeventlistener为js动态创建的元素添加事件监听

点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul></ul> <script type="text/javascript"> var num = 1; var u=document.querySelector("ul"); function addFunction(){ var l=docume

给对象添加事件

<!doctype html> <html lang="en"> <head> <title>javascript1</title> <meta charset="utf-8"/> </head> <body> <div> <label >请输入您所在城市:</label> <button id="button"

给DOM元素添加事件

今天遇到一个问题:鼠标单击页面中的任意标签,弹出该标签的名称. 实现代码如下: <script type="text/javascript"> document.onclick = function(e){ var e = (e||event); var o = e["target"] || e["srcElement"]; alert(o.tagName.toLowerCase()); } </script> 即创建了一