`
cobo85
  • 浏览: 114525 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用JS为页面元素添加事件

阅读更多

        今天需要为项目所有的页面可编辑input框增加空字符串过滤功能,利用正则表达式很容易实现内容的过滤,但是项目有上百个页面,每个页面也有20左右的input框,如果一个一个的加事件的话,估计后半生都没了,如何在不改动现有页面的前提下,又能实现目标呢?想到了在页面解析的时候用JS去动态的为这些输入框增加事件,并且还要保留原事件,只要想到了,一定能做到,doit。下面是实现的代码。

       

function trimInputs(){ 
   var o=document.getElementsByTagName("input");
   for(var i=0;i <o.length;i++){
    if(o[i].type=="text"&& !o[i].disabled && !o[i].readOnly){//只对可编辑的输入框添加过滤功能 
      o[i].attachEvent("onblur",function(obj){ return function() 
                   {obj.value=(obj.value).replace(/\s/g,"");} }(o[i]));//闭包传参     } 
      } 

} 
window.attachEvent("onload",trimInputs);//如果页面少的话,从性能考虑可以写在调用页面里,不要写在公共JS里面

 

 


 因为所有的页面几乎都需要增加这样的功能因此就把这段功能直接加到项目的公共JS,进入页面测试下完全达到预期效果,哎,不过那个闭包传参研究了好大会,看来以后还要加紧对闭包的学习。

 

        上面的只是为项目需求而写的特定代码,稍微修改下可以适合多种情况。为实现这个功能又特意的温习下正则表达式,修改了以前系统里面对数字的验证方法,数字正则表达式:


     

function test(obj){
          
      if(obj.value.match(/^-?\d*(\.)?\d+$/)){
                  alert("匹配");
         }else{ alert("不匹配"); } 
}

 

 

BWT:闭包在IE下容易引起内存的泄露,如果页面比较复杂的话,可以用下面的代码来代替闭包

function demo(){ 
      //IE下是srcElement ,FF下是target 
     var obj=event.srcElement ? event.srcElement : event.target; 
     //do something for obj 
}

 

分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript给事件委托批量添加事件监听详细流程.docx

    JavaScript给事件委托批量添加事件监听详细流程  1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找...

    JS获取动态添加元素的方法详解

    在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1. 在模板引擎里面添加行内事件 2. 利用事件的委托获取(常用) 3. 在ajax的监听...

    JavaScript动态添加事件之事件委托

    先给大家讲下什么是事件委托:通俗的讲,事件...但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理? 为了说明白这一问题,我们假设需要给后来添加到当前

    老生常谈js动态添加事件— 事件委托

    为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件。 解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小! 题外话:...

    html登录注册页面,登录和注册页面的实现HTML,CSS,JS

    登录和注册页面是网站或应用程序中最基本和重要的功能之一。以下是使用HTML、CSS和JavaScript... - 使用CSS伪类`:hover`、`:focus`等为表单元素添加交互效果。 - 利用CSS媒体查询实现响应式设计,适配不同屏幕尺寸。

    jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。

    直接为DOM元素添加事件处理程序时,event对象作为window对象的一个属性存在。 event对象包含了一个重要属性:target(W3C)/srcElement(IE),这个属性标识了触发事件的原始元素,思路二就是要利用这个属性。我们可以...

    让IE支持CSS3 Media Query实现响应式Web设计,html5.js让IE(包括IE6)支持HTML5元素方法

    让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement_x声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也...

    DIY的JS延迟加载图片的插件

    大概的实现方式是:页面的定义元素img时,将src统一替换成自定义的一个属性名,如叫“originalSrc”,然后利用JS把给img的src设置为一个定义好的等待图片,然后在scroll事件触发时,把img元素位置正好在浏览器显示...

    js-tracker:一个chrome扩展程序跟踪运行时使用DOM jQuery API来操作html dom元素(例如,更改样式,附加事件监听器)的前端JavaScript。

    JavaScript追踪器 chrome扩展程序跟踪运行时使用DOM或jQuery API来操作网页上的html dom元素... 转到“ JS-Tracker”侧栏,查看哪些JavaScript代码会影响所选元素。 我还选择了,您可以根据需要尝试使用JavaScript Tr

    大名鼎鼎SWFUpload- Flash+JS 上传

    然后使用它提供的一组简单的JS事件来更新上传状态,开发人员能够利用这些事件来及时更新页面中的上传进度UI。 SWFUpload v2 SWFUpload v2包含了新的高级功能,改善了稳定性,解决了FlashPlayer中的一些bug,并且...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    JQuery中DOM加载与事件执行实例分析

    本文实例讲述了JQuery中DOM加载与事件执行原理。分享给大家供大家参考。具体分析如下: JavaScript和HTML之间的交互是通过用户...以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。

    html5 拖拽及用 js 实现拖拽功能的示例代码

    拖拽元素:可以为元素添加 draggable=true来让元素能够被拖拽。 拖拽元素的事件监听:(应用于拖拽元素) ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ondragend 当拖拽结束时调用 ...

    JavaScript详解(第2版)

    1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 JavaScript及其在Web开发中承担的角色 7 1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 ...

    Vuejs在v-for中,利用index来对第一项添加class的方法

    (1)在v-for中,利用index来对第一项添加class 在CODE上查看代码片派生到我的代码片 &lt;a&gt; index来源于v-for,i表示遍历的数组的元素,index表示索引。 由于index从0开始,因此如果要指定第一项有active这个类,...

    客户端统一验证JavaScript函数库及示例源码

    这里先简要介绍一下文档对象模型(DOM)与树状结构,DOM可以让HTML元素与其属性,利用JS程序来控制。有两种方法将JS程序用于文档的元素:通过元素的名称和通过树状结构。这两个方法并非独立的,可能同时存在于相同的...

    JavaScript王者归来part.1 总数2

     13.3.3 把对象注册为事件处理程序   13.3.4 事件模块和事件类型   13.3.5 关于Event接口   13.3.5.1 Event接口的属性和方法   13.3.5.2 UIEvent接口的属性   13.3.5.3 MouseEvent接口的属性   13.3....

Global site tag (gtag.js) - Google Analytics