js学习day11

超、凢脫俗 2023-02-26 08:23 15阅读 0赞

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ 
        
        var u1 = document.getElementById("u1");
        
        //点击按钮以后添加超链接
        var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ 
         //创建一个li
         var li = document.createElement("li");
         li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
         
         //将li添加到ul中
         u1.appendChild(li);
        };
        
        
        /* * 为每一个超链接都绑定一个单击响应函数 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， * 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 */
        //获取所有的a
        var allA = document.getElementsByTagName("a");
        //遍历
        /*for(var i=0 ; i<allA.length ; i++){ allA[i].onclick = function(){ alert("我是a的单击响应函数！！！"); }; }*/
        
        /* * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的 * 我们可以尝试将其绑定给元素的共同的祖先元素 * * 事件的委派 * - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素 * 从而通过祖先元素的响应函数来处理事件。 * - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 */
        
        //为ul绑定一个单击响应函数 u1.onclick = function(event){ 
         event = event || window.event;
         
         /* * target * - event中的target表示的触发事件的对象 */
         //alert(event.target); //如果触发事件的对象是我们期望的元素，则执行否则不执行 if(event.target.className == "link"){ 
          alert("我是ul的单击响应函数");
         }
         
        };
        
       };
       
      </script>
     </head>
     <body>
      <button id="btn01">添加超链接</button>
      
      <ul id="u1" style="background-color: #bfa;">
       <li>
        <p>我是p元素</p>
       </li>
       <li><a href="javascript:;" class="link">超链接一</a></li>
       <li><a href="javascript:;" class="link">超链接二</a></li>
       <li><a href="javascript:;" class="link">超链接三</a></li> </ul> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ 
    				
    				/* * 点击按钮以后弹出一个内容 */
    				//获取按钮对象
    				var btn01 = document.getElementById("btn01");
    				
    				/* * 使用 对象.事件 = 函数 的形式绑定响应函数， * 它只能同时为一个元素的一个事件绑定一个响应函数， * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 */
    				
    				//为btn01绑定一个单击响应函数
    				/*btn01.onclick = function(){ alert(1); };*/
    				
    				//为btn01绑定第二个响应函数
    				/*btn01.onclick = function(){ alert(2); };*/
    				
    				/* * addEventListener() * - 通过这个方法也可以为元素绑定响应函数 * - 参数： * 1.事件的字符串，不要on * 2.回调函数，当事件触发时该函数会被调用 * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false * * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 * * 这个方法不支持IE8及以下的浏览器 */
    				/*btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); btn01.addEventListener("click",function(){ alert(3); },false);*/
    				
    				/* * attachEvent() * - 在IE8中可以使用attachEvent()来绑定事件 * - 参数： * 1.事件的字符串，要on * 2.回调函数 * * - 这个方法也可以同时为一个事件绑定多个处理函数， * 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 */
    				/*btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); btn01.attachEvent("onclick",function(){ alert(3); });*/
    				
    				/*btn01.addEventListener("click",function(){ alert(this); },false);*/
    				
    				/*btn01.attachEvent("onclick",function(){ alert(this); });*/
    				
    				bind(btn01 , "click" , function(){ 
    					alert(this);
    				});
    			
    				
    			};
    			
    			//定义一个函数，用来为指定元素绑定响应函数
    			/* * addEventListener()中的this，是绑定事件的对象 * attachEvent()中的this，是window * 需要统一两个方法this */
    			/* * 参数： * obj 要绑定事件的对象 * eventStr 事件的字符串(不要on) * callback 回调函数 */
    			function bind(obj , eventStr , callback){ 
    				if(obj.addEventListener){ 
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr , callback , false);
    				}else{ 
    					/* * this是谁由调用方式决定 * callback.call(obj) */
    					//IE8及以下 obj.attachEvent("on"+eventStr , function(){ 
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    			
    		</script> </head> <body> <button id="btn01">点我一下</button> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
    				width: 300px;
    				height: 300px;
    				background-color: yellowgreen;
    			}
    			
    			#box2{ 
    				width: 200px;
    				height: 200px;
    				background-color: yellow;
    			}
    			
    			#box3{ 
    				width: 150px;
    				height: 150px;
    				background-color: skyblue;
    			}
    			
    		</style> <script type="text/javascript"> window.onload = function(){ 
    				
    				/* * 分别为三个div绑定单击响应函数 */
    				var box1 = document.getElementById("box1");
    				var box2 = document.getElementById("box2");
    				var box3 = document.getElementById("box3");
    				
    				/* * 事件的传播 * - 关于事件的传播网景公司和微软公司有不同的理解 * - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， * 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 * - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， * 然后在向内传播给后代元素 * - W3C综合了两个公司的方案，将事件传播分成了三个阶段 * 1.捕获阶段 * - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 * 2.目标阶段 * - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 * 3.冒泡阶段 * - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 * * - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true * 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false * * - IE8及以下的浏览器中没有捕获阶段 */
    				
    				bind(box1,"click",function(){ 
    					alert("我是box1的响应函数")
    				}); bind(box2,"click",function(){ 
    					alert("我是box2的响应函数")
    				}); bind(box3,"click",function(){ 
    					alert("我是box3的响应函数")
    				});
    				
    			}; function bind(obj , eventStr , callback){ 
    				if(obj.addEventListener){ 
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr , callback , true);
    				}else{ 
    					/* * this是谁由调用方式决定 * callback.call(obj) */
    					//IE8及以下 obj.attachEvent("on"+eventStr , function(){ 
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    			
    		</script> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			
    			#box2{ 
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				position: absolute;
    				
    				left: 200px;
    				top: 200px;
    			}
    			
    		</style> <script type="text/javascript"> window.onload = function(){ 
    				/* * 拖拽box1元素 * - 拖拽的流程 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup */
    				
    				//获取box1
    				var box1 = document.getElementById("box1"); //为box1绑定一个鼠标按下事件 //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown box1.onmousedown = function(event){ 
    					event = event || window.event;
    					//div的偏移量 鼠标.clentX - 元素.offsetLeft
    					//div的偏移量 鼠标.clentY - 元素.offsetTop
    					var ol = event.clientX - box1.offsetLeft;
    					var ot = event.clientY - box1.offsetTop; //为document绑定一个onmousemove事件 document.onmousemove = function(event){ 
    						event = event || window.event;
    						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    						//获取鼠标的坐标
    						var left = event.clientX - ol;
    						var top = event.clientY - ot;
    						
    						//修改box1的位置
    						box1.style.left = left+"px";
    						box1.style.top = top+"px";
    						
    					}; //为document绑定一个鼠标松开事件 document.onmouseup = function(){ 
    						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    						//取消document的onmousemove事件
    						document.onmousemove = null;
    						//取消document的onmouseup事件
    						document.onmouseup = null;
    					};
    				};
    				
    				
    				
    				
    			}; </script> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			
    			#box2{ 
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				position: absolute;
    				
    				left: 200px;
    				top: 2000px;
    			}
    			
    		</style> <script type="text/javascript"> window.onload = function(){ 
    				/* * 拖拽box1元素 * - 拖拽的流程 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup */
    				
    				//获取box1
    				var box1 = document.getElementById("box1");
    				var box2 = document.getElementById("box2"); //为box1绑定一个鼠标按下事件 //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown box1.onmousedown = function(event){ 
    					
    					//设置box1捕获所有鼠标按下的事件
    					/* * setCapture() * - 只有IE支持，但是在火狐中调用时不会报错， * 而如果使用chrome调用，会报错 */
    					/*if(box1.setCapture){ box1.setCapture(); }*/
    					box1.setCapture && box1.setCapture();
    					
    					
    					event = event || window.event;
    					//div的偏移量 鼠标.clentX - 元素.offsetLeft
    					//div的偏移量 鼠标.clentY - 元素.offsetTop
    					var ol = event.clientX - box1.offsetLeft;
    					var ot = event.clientY - box1.offsetTop; //为document绑定一个onmousemove事件 document.onmousemove = function(event){ 
    						event = event || window.event;
    						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    						//获取鼠标的坐标
    						var left = event.clientX - ol;
    						var top = event.clientY - ot;
    						
    						//修改box1的位置
    						box1.style.left = left+"px";
    						box1.style.top = top+"px";
    						
    					}; //为document绑定一个鼠标松开事件 document.onmouseup = function(){ 
    						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    						//取消document的onmousemove事件
    						document.onmousemove = null;
    						//取消document的onmouseup事件
    						document.onmouseup = null;
    						//当鼠标松开时，取消对事件的捕获
    						box1.releaseCapture && box1.releaseCapture();
    					};
    					
    					/* * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， * 如果不希望发生这个行为，则可以通过return false来取消默认行为 * * 但是这招对IE8不起作用 */
    					return false;
    					
    				};
    				
    				
    				
    			}; </script> </head> <body> 我是一段文字 <div id="box1"></div> <div id="box2"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ 
    				//分别为两个按钮绑定单击响应函数
    				var btn01 = document.getElementById("btn01");
    				var btn02 = document.getElementById("btn02"); btn01.onclick = function(){ 
    					alert(1);
    				}; btn02.onclick = function(){ 
    					alert(2);
    				};
    				
    				//设置btn01对鼠标按下相关的事件进行捕获
    				//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
    				btn01.setCapture();
    			}; </script> </head> <body> <button id="btn01">按钮01</button> <button id="btn02">按钮02</button> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			
    			#box2{ 
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				position: absolute;
    				
    				left: 200px;
    				top: 200px;
    			}
    			
    		</style> <script type="text/javascript"> window.onload = function(){ 
    				/* * 拖拽box1元素 * - 拖拽的流程 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup */
    				
    				//获取box1
    				var box1 = document.getElementById("box1");
    				var box2 = document.getElementById("box2");
    				var img1 = document.getElementById("img1");
    				
    				//开启box1的拖拽
    				drag(box1);
    				//开启box2的
    				drag(box2);
    				
    				drag(img1);
    				
    				
    				
    				
    			};
    			
    			/* * 提取一个专门用来设置拖拽的函数 * 参数：开启拖拽的元素 */
    			function drag(obj){ 
    				//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown obj.onmousedown = function(event){ 
    					
    					//设置box1捕获所有鼠标按下的事件
    					/* * setCapture() * - 只有IE支持，但是在火狐中调用时不会报错， * 而如果使用chrome调用，会报错 */
    					/*if(box1.setCapture){ box1.setCapture(); }*/
    					obj.setCapture && obj.setCapture();
    					
    					
    					event = event || window.event;
    					//div的偏移量 鼠标.clentX - 元素.offsetLeft
    					//div的偏移量 鼠标.clentY - 元素.offsetTop
    					var ol = event.clientX - obj.offsetLeft;
    					var ot = event.clientY - obj.offsetTop; //为document绑定一个onmousemove事件 document.onmousemove = function(event){ 
    						event = event || window.event;
    						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    						//获取鼠标的坐标
    						var left = event.clientX - ol;
    						var top = event.clientY - ot;
    						
    						//修改box1的位置
    						obj.style.left = left+"px";
    						obj.style.top = top+"px";
    						
    					}; //为document绑定一个鼠标松开事件 document.onmouseup = function(){ 
    						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
    						//取消document的onmousemove事件
    						document.onmousemove = null;
    						//取消document的onmouseup事件
    						document.onmouseup = null;
    						//当鼠标松开时，取消对事件的捕获
    						obj.releaseCapture && obj.releaseCapture();
    					};
    					
    					/* * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， * 如果不希望发生这个行为，则可以通过return false来取消默认行为 * * 但是这招对IE8不起作用 */
    					return false;
    					
    				};
    			}
    			
    			
    		</script>
    	</head>
    	<body>
    		
    		我是一段文字
    		
    		<div id="box1"></div>
    		
    		<div id="box2"></div>
    		
    		<img src="img/an.jpg" id="img1" style="position: absolute;"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    			
    		</style> <script type="text/javascript"> window.onload = function(){ 
    				
    				
    				//获取id为box1的div
    				var box1 = document.getElementById("box1");
    				
    				//为box1绑定一个鼠标滚轮滚动的事件
    				/* * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， * 但是火狐不支持该属性 * * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件 * 注意该事件需要通过addEventListener()函数来绑定 */
    				
    				
    				box1.onmousewheel = function(event){ 
    					
    					event = event || window.event;
    					
    					
    					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
    					//向上滚 120   向下滚 -120
    					//wheelDelta这个值我们不看大小，只看正负
    					
    					//alert(event.wheelDelta);
    					
    					//wheelDelta这个属性火狐中不支持
    					//在火狐中使用event.detail来获取滚动的方向
    					//向上滚 -3  向下滚 3
    					//alert(event.detail);
    					
    					
    					/* * 当鼠标滚轮向下滚动时，box1变长 * 当滚轮向上滚动时，box1变短 */
    					//判断鼠标滚轮滚动的方向 if(event.wheelDelta > 0 || event.detail < 0){ 
    						//向上滚，box1变短
    						box1.style.height = box1.clientHeight - 10 + "px";
    						
    					}else{ 
    						//向下滚，box1变长
    						box1.style.height = box1.clientHeight + 10 + "px";
    					}
    					
    					/* * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false * 需要使用event来取消默认行为event.preventDefault(); * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错 */
    					event.preventDefault && event.preventDefault();
    					
    					
    					/* * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动， * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为 */
    					return false;
    					
    					
    					
    					
    				};
    				
    				//为火狐绑定滚轮事件
    				bind(box1,"DOMMouseScroll",box1.onmousewheel);
    				
    				
    			}; function bind(obj , eventStr , callback){ 
    				if(obj.addEventListener){ 
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr , callback , false);
    				}else{ 
    					/* * this是谁由调用方式决定 * callback.call(obj) */
    					//IE8及以下 obj.attachEvent("on"+eventStr , function(){ 
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    			
    		</script>
    	</head>
    	<body style="height: 2000px;"> <div id="box1"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ 
    				
    				/* * 键盘事件： * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 * - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快 * 这种设计是为了防止误操作的发生。 * onkeyup * - 按键被松开 * * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document */
    				
    				document.onkeydown = function(event){ 
    					event = event || window.event;
    					
    					/* * 可以通过keyCode来获取按键的编码 * 通过它可以判断哪个按键被按下 * 除了keyCode，事件对象中还提供了几个属性 * altKey * ctrlKey * shiftKey * - 这个三个用来判断alt ctrl 和 shift是否被按下 * 如果按下则返回true，否则返回false */
    					
    					//console.log(event.keyCode); //判断一个y是否被按下 //判断y和ctrl是否同时被按下 if(event.keyCode === 89 && event.ctrlKey){ 
    						console.log("ctrl和y都被按下了");
    					}
    					
    					
    				};
    				
    				/*document.onkeyup = function(){ console.log("按键松开了"); };*/
    				
    				//获取input
    				var input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ 
    					
    					event = event || window.event;
    					
    					//console.log(event.keyCode); //数字 48 - 57 //使文本框中不能输入数字 if(event.keyCode >= 48 && event.keyCode <= 57){ 
    						//在文本框中输入内容，属于onkeydown的默认行为
    						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
    						return false;
    					}
    					
    					
    				};
    			}; </script> </head> <body> <input type="text" /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			
    			
    		</style>
    		
    		<script type="text/javascript">
    			
    			//使div可以根据不同的方向键向不同的方向移动
    			/* * 按左键，div向左移 * 按右键，div向右移 * 。。。 */
    			window.onload = function(){ 
    				
    				//为document绑定一个按键按下的事件 document.onkeydown = function(event){ 
    					event = event || window.event;
    					
    					//定义一个变量，来表示移动的速度
    					var speed = 10; //当用户按了ctrl以后，速度加快 if(event.ctrlKey){ 
    						speed = 500;
    					}
    					
    					/* * 37 左 * 38 上 * 39 右 * 40 下 */
    					switch(event.keyCode){ 
    						case 37:
    							//alert("向左"); left值减小
    							box1.style.left = box1.offsetLeft - speed + "px";
    							break;
    						case 39:
    							//alert("向右");
    							box1.style.left = box1.offsetLeft + speed + "px";
    							break;
    						case 38:
    							//alert("向上");
    							box1.style.top = box1.offsetTop - speed + "px";
    							break;
    						case 40:
    							//alert("向下");
    							box1.style.top = box1.offsetTop + speed + "px";
    							break;
    					}
    					
    				};
    				
    			};
    			
    			
    		</script>
    	</head>
    	<body>
    		<div id="box1"></div>
    	</body>
    </html>