js实现动态添加事件

一、实例描述

前一个案例讲了如何在网页中动态添加元素，有时候我们需要添加事件。本例学习如何动态的为元素添加事件。

二、截图

三、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>课堂演示</title>

     <style type="text/css">

      input{

       margin: 10px;

       width: 100px;

       height: 30px;

     }

     </style>

 </head>

 <body>

 <input id="Button1" type="button" value="Button1">

 <input id="Button2" type="button" value="动态添加事件" onclick="addClick(Button1)">

 <script type="text/javascript">

  //添加事件的参数，参数为元素的标识

     function addClick(obj){

         obj.onclick=function(){

             alert('动态添加事件成功 ');

         }

     }

 </script>

 </body>

 </html>

1、函数中带参数，参数就是另一个元素的id

2、 obj.onclick 动态添加点击事件，

3、没有函数名的匿名函数

4、函数嵌套

四、总结

案例要点：

本例的重点是如何为元素绑定事件。绑定元素时需要知道此元素的唯一标识（ID或Name）。

js实现动态添加事件的更多相关文章

  1. js动态添加事件

    转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...

  2. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  3. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  4. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  5. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. UGUI Button和Toogle动态添加事件

    如果你想动态创建Button和Toogle 等等一系列控件,需要动态添加事件的如下. 拿button和Toogle抛砖引玉O(∩_∩)O~ using UnityEngine; using Syste ...

  7. JS——动态添加事件和移除事件（有待补充...）

    动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...

  8. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

  9. 如何使用validate.js进行动态添加和移除表单验证信息

    表单是我们在开当中的常客,那么对表单的验证也是必须的,那么如何实现动态给表单添加验证规则呢? 方法: 1,动态添加验证规则 // 添加$("#addConnectUser").ru ...

随机推荐

  1. Python开发注意事项

    仅为记录自己在使用python过程的的一些心得!   1.服务器上运行脚本: windows服务器: 显式运行:在cmd中直接用python xxxx.py  运行一个py脚本文件. 后台运行:在cm ...

  2. UWP开发小结

    做了两天的UWP开发,上手还是挺快的,不过比较郁闷的是总会被一些很简单的细节卡住很久. 首先当然是用C#修改xaml界面这个难点了,Bing搜了好久都没找到相关信息,最后还是老司机伟神指点的我.对于g ...

  3. GoldenGate 1403错误解决方法

    OGG  oracle goldengate 1403错误解决方法 1. 错误描述WARNING OGG-01154 Oracle GoldenGate Delivery for Oracle, re ...

  4. Xrdp - 通过Windows的RDP连接Linux远程桌面（Ubuntu/CentOS/Redhat 7）（转载）

            您多久访问一次Linux桌面? 您使用什么工具来访问远程桌面? Xrdp是一个开源工具,允许用户通过Windows RDP访问Linux远程桌面. 除了Windows RDP之外,xr ...

  5. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  6. 隐马尔科夫模型(HMM)

    基本概念 1Markov Models 2Hidden Markov Models 3概率计算算法前向后向算法 1-3-1直接计算 1-3-2前向算法 1-3-3后向算法 4学习问题Baum-Welc ...

  7. 51Nod 1405 树的距离之和(dp)

    1405 树的距离之和 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 给定一棵无根树,如果它有n个节点,节点编号从1到n, 求随意两点之间的距离( ...

  8. uestc 94(区间更新)

    题意:有一个字符串全部由'('和')'组成.然后有三种操作,query a b输出区间[a,b]字符串的括号序列是否合法.reverse a b把区间[a,b]字符串里全部'('替换成')',而且把全 ...

  9. HBase源代码分析之HRegion上MemStore的flsuh流程（二）

    继上篇<HBase源代码分析之HRegion上MemStore的flsuh流程(一)>之后.我们继续分析下HRegion上MemStore flush的核心方法internalFlushc ...

  10. thinkphp5项目--企业单车网站（四）

    thinkphp5项目--企业单车网站(四) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...