js动态绑定事件

最新推荐文章于 2024-07-29 02:06:13 发布

kechuangww

最新推荐文章于 2024-07-29 02:06:13 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/kechuangww/article/details/46454265

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在页面中使用动态绑定事件，我们很容易就想到了onpropertychange、oninput和onchange。

首先说下这三个区别。

onchange：当前属性值发生改变，并且有鼠标或者键盘触发，并失去焦点。

onpropertychange：属性值发生改变。但是他是IE专属事件，并在IE9开始弃用，IE11已停止使用。

oninput：是onpropertychange事件的非IE浏览器版本。

在网站页面查询内容时，一般会在输入时就会拿到对应的值，所以onchange我们在这里就不在研究。

接下来通过实例介绍下。

一、用事件来处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态事件</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">

	function search(){
		var self = this;

		self.boxInput = document.getElementById("box_input");
		self.boxDiv = document.getElementsByClassName("dis");
		self.boxContent =  document.getElementById("content");
		var html = [];
		if(self.boxInput.value){
			var val = new Array();
			val[0]={"name":"张三"};
			val[1]={"name":"李四"};
			val[2]={"name":"王五"};
			self.boxDiv[0].style.display="";
			for(var i=0;i<val.length;i++){
				html.push("<li>"+val[i].name+"</li>");			
			}
			self.boxContent.innerHTML = html.join('');	
		 }
	}
</script>
</head>

<body>
<input type="text" id="box_input"<span style="color:#cc0000;">  onpropertychange = "search()"</span>>

<div class="dis" style="display: none">
 <ul id="content">
 </ul>
</div>
</body>
</html>

这个实例是通过onpropertychange触发的。所以只能用在IE浏览其中，并且必须IE11以下的。

如果不止在IE中运行，可以把onpropertychange换成oninput方法。所以我们在实际用的时候只需要在对应需要处理的地方调用oninput事件就行。

二、用js来处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态事件</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	var self = this;
	
	self.boxInput = document.getElementById("box_input");
	self.boxDiv = document.getElementsByClassName("dis");
	self.boxContent =  document.getElementById("content");

	//onpropertychange为IE专属动态变更事件，但是从IE9开始弃用，从IE11已停止运用，用添加监听事件

        if(!-[1,]) { 
<span style="white-space:pre">	</span>      <span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">this.boxInpu</span><span style="color:#ff0000;"><span style="font-family: Arial, Helvetica, sans-serif;">t</span>.onpropertychange = </span><span style="font-family: Arial, Helvetica, sans-serif; color: rgb(255, 0, 0);">search</span><span style="font-family: Arial, Helvetica, sans-serif;">;//所以这里可以不用再通过判断使用这个方法。</span>
<span style="white-space:pre">	</span>}else{ <span style="white-space:pre">		</span><pre name="code" class="html"><span style="color:#ff0000;">           this.boxInput.addEventListener("input",search,false);</span>//直接把这句移到判断外面

}function search(){var html = [];if(self.boxInput.value){var val = new Array();val[0]={"name":"张三"};val[1]={"name":"李四"};val[2]={"name":"王五"};self.boxDiv[0].style.display="";for(var i=0;i<val.length;i++){html.push("<li>"+val[i].name+"</li>");}self.boxContent.innerHTML = html.join('');}} })</script></head><body><input type="text" id="box_input"><div class="dis" style="display: none"> <ul id="content"> </ul></div></body></html>

因为只是介绍动态绑定方法的使用，所以代码中其他内容可能比较简略，实际中可根据个人需要自己添加内容。