js动态绑定事件

来源：互联网发布：python基础教程2 编辑：程序博客网时间：2024/06/02 20:45

在页面中使用动态绑定事件，我们很容易就想到了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>

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

0 0