2020-09-29

最新推荐文章于 2024-07-26 13:06:55 发布

月光派件中。

最新推荐文章于 2024-07-26 13:06:55 发布

阅读量137

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108868699

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

创建一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
			}
		</style>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" id="btn" value="X显示效果"> 
		<div id="dv"></div>
		<script type="text/javascript">
			mFun$("btn").onclick = function(){
				//如果div中存在子元素input 就不继续创建
				if(mFun$("btn1")){
					//如果存在子元素btn1 我们就直接删除
					mFun$("dv").removeChild(mFun$("btn1"));
				}
				var input = document.createElement("input");
				input.type="button";
				input.value="按钮";
				input.id = "btn1";
				mFun$("dv").appendChild(input);
			};
			mFun$("btn").onclick = function(){
				//如果div中存在子元素input 就不继续创建
				if(!mFun$("btn1")){
					var input = document.createElement("input");
					input.type="button";
					input.value="按钮";
					input.id = "btn1";
					mFun$("dv").appendChild(input);
				}
			};
		</script>
	</body>
</html>

为元素绑定事件的引入

//1.js
mFun$("btn").onclick = function(){
	alert("真好1");
}

//2.js
mFun$("btn").onclick = function(){
	alert("真好2");
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
		<script src="1.js" type="text/javascript" charset="utf-8"></script>
		<script src="2.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<script type="text/javascript">
			mFun$("btn").onclick = function(){
				alert("真好");
			}			
		</script>
	</body>
</html>

为一个元素绑定多个相同事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" id="btn" value="按钮">
		<script type="text/javascript">
				//谷歌火狐支持IE8不支持
				//添加事件  绑定事件(事件类型[没有on],事件函数,布尔类型false)
// 				mFun$("btn").addEventListener("click",function(){
// 					console.log("啦啦啦~~~~");
// 				},false);
// 				mFun$("btn").addEventListener("click",function(){
// 					console.log("哈哈哈~~~~");
// 				},false);
// 				mFun$("btn").addEventListener("click",function(){
// 					console.log("呵呵呵~~~~");
// 				},false);
				//
				//参数1 事件类型 参数2:事件处理函数
				mFun$("btn").attachEvent("onclick",function(){
					console.log("嘿嘿嘿~~~~")
				});
				mFun$("btn").attachEvent("onclick",function(){
					console.log("啦啦啦~~~~")
				});
				mFun$("btn").attachEvent("onclick",function(){
					console.log("哈哈哈~~~~")
				});
		</script>
	</body>
</html>

为元素绑定事件兼容代码

addEventListener(事件类型(没有on),事件函数,布尔)
attachEvent(事件类型(有on),事件函数)
为任意元素绑定任意事件任意元素事件类型事件函数布尔
封装函数用于判断多个事件绑定在浏览器中的兼容问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<input type="button" name="" id="btn" value="按钮" />
		<div id="dv"></div>
		<script type="text/javascript">
			function f1(element,type,fun){
				//如果此浏览器支持此属性
				if(element.addEventListener){
					element.addEventListener(type,fun,false);
					// element["on"+type] = fun;
				}else if(element.attachEvent){
					element.attachEvent("on"+type,fun);
					// element["on"+type] = fun;
				}else{
					element["on"+type] = fun;
				}
			}
			
			f1(mFun$("dv"),"click",function(){
				console.log("1111111111ssdfsdf");
			})
			f1(mFun$("dv"),"click",function(){
				console.log("2222222222222ssdfsdf");
			})
			f1(mFun$("dv"),"click",function(){
				console.log("333333333333ssdfsdf");
			})
// 	
// 			function f1(){
// 				
// 			}
// 			f1();
			
// 			var per = new Object();
// 			per.name = "小豆豆";
// 			per.eat = function(){
// 				console.log("吃");
// 			}
// 			per.eat();
			
			// console.log(mFun$("btn"));
		</script>
		
	</body>
</html>

为元素解绑事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" id="btn" value="小昕">
		<input type="button" id="btn1" value="小软软把小昕干掉了" >
		<script type="text/javascript">
// 			mFun$("btn").onclick = func tion(){
// 				console.log("dfasfsdaf");
// 			}
			function f1(){
				console.log("小昕");
			}
			function f2(){
				console.log("小软软");
			}
// 			mFun$("btn").addEventListener("click",f1,false);
// 			mFun$("btn").addEventListener("click",f2,false);
// 			
// 			//把小昕干掉
// 			mFun$("btn1").onclick = function(){
// 				mFun$("btn").removeEventListener("click",f1,false);
// 			}
			
			mFun$("btn").attachEvent("onclick",f1);
			mFun$("btn").attachEvent("onclick",f1);
			
			mFun$("btn1").onclick = function(){
				mFun$("btn").detachEvent("onclick",f1)
			}
		</script>
	</body>
</html>

总结绑定事件的区别:
addEventListener();
attachEvent()

相同点: 都可以为元素绑定事件

不同点:

方法名不一样
参数个数不一样addEventListener三个参数,attachEvent两个参数
addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
this不同,addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on

解绑事件:

注意:用什么方式绑定事件,就应该用对应的方式解绑事件

解绑事件
对象.on事件名字=事件处理函数—>绑定事件
对象.on事件名字=null;
解绑事件
对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件
对象.removeEventListener(“没有on的事件类型”,函数名字,false);
解绑事件
对象.attachEvent(“on事件类型”,命名函数);—绑定事件
对象.detachEvent(“on事件类型”,函数名字);

模拟百度搜索案例

<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <title>Title</title>
	  <style>
	    #box {
	      width: 450px;
	      margin: 200px auto;
	    }
	
	    #txt {
	      width: 350px;
	    }
	
	    #pop {
	      width: 350px;
	      border: 1px solid red;
	    }
	
	    #pop ul {
	      margin: 10px;
	      padding: 0px;
	      width: 200px;
	      list-style-type: none;
	
	    }
	
	    #pop ul li {
	
	    }
	  </style>
	</head>
	<body>
	
		<div id="box">
		  <input type="text" id="txt" value="">
		  <input type="button" value="搜索" id="btn">
		
		</div>
		
		<script src="common.js"></script>
		<script>
		
		
		  var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "苹果好吃", "苹果此次召回还是没有中国"];
		  //获取文本框注册键盘抬起事件
		  my$("txt").onkeyup = function () {
		
		
		    //每一次的键盘抬起都判断页面中有没有这个div
		    if(my$("dv")){
		      //删除一次
		      my$("box").removeChild(my$("dv"));
		    }
		    //获取文本框输入的内容
		    var text = this.value;
		    //临时数组--空数组------->存放对应上的数据
		    var tempArr = [];
		    //把文本框输入的内容和数组中的每个数据对比
		    for (var i = 0; i < keyWords.length; i++) {
		      //是否是最开始出现的
		      if (keyWords[i].indexOf(text) == 0) {
		        tempArr.push(keyWords[i]);//追加
		      }
		    }
		    //如果文本框是空的,临时数组是空的,不用创建div
		    if (this.value.length == 0 || tempArr.length == 0) {
		      //如果页面中有这个div,删除这个div
		      if (my$("dv")) {
		        my$("box").removeChild(my$("dv"));
		      }
		      return;
		    }
		    //创建div,把div加入id为box的div中
		    var dvObj = document.createElement("div");
		    my$("box").appendChild(dvObj);
		    dvObj.id = "dv";
		    dvObj.style.width = "350px";
		    //dvObj.style.height="100px";//肯定是不需要的------
		    dvObj.style.border = "1px solid green";
		    //循环遍历临时数组,创建对应的p标签
		    for (var i = 0; i < tempArr.length; i++) {
		      //创建p标签
		      var pObj = document.createElement("p");
		      //把p加到div中
		      dvObj.appendChild(pObj);
		      setInnerText(pObj, tempArr[i]);
		      pObj.style.margin = 0;
		      pObj.style.padding = 0;
		      pObj.style.cursor = "pointer";
		      pObj.style.marginTop = "5px";
		      pObj.style.marginLeft = "5px";
		      //鼠标进入
		      pObj.onmouseover = function () {
		        this.style.backgroundColor = "yellow";
		      };
		      //鼠标离开
		      pObj.onmouseout = function () {
		        this.style.backgroundColor = "";
		      };
		    }
		  }
		</script>
	
	</body>
</html>