`
ootabc
  • 浏览: 110587 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

JavaScript动态的为元素添加事件

    博客分类:
  • js
阅读更多
而在js脚本中也可以动态为这个元素添加事件:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例:
 document.getElementById("btn").onclick = method1;
 document.getElementById("btn").onclick = method2;
 document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行
写成这样:
 var btn1Obj = document.getElementById("btn1"); 
 //object.attachEvent(event,function);
 btn1Obj.attachEvent("onclick",method1);
 btn1Obj.attachEvent("onclick",method2);
 btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener
 var btn1Obj = document.getElementById("btn1");
 //element.addEventListener(type,listener,useCapture);
 btn1Obj.addEventListener("click",method1,false);
 btn1Obj.addEventListener("click",method2,false);
 btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3
 var el = EDITFORM_DOCUMENT.body; 
 //先取得对象,EDITFORM_DOCUMENT实为一个iframe
  if (el.addEventListener){
  el.addEventListener('click', KindDisableMenu, false);
  } else if (el.attachEvent){
//适用用IE浏览器
  el.attachEvent('onclick', KindDisableMenu);
 }
 2. 
  if (window.addEventListener) {
  window.addEventListener('load', _uCO, false);
  } else if (window.attachEvent) {
//适用用IE浏览器
  window.attachEvent('onload', _uCO);
 }



    /**
     * 给组件添加事件
      * @param {} node
     * @param {} event_type
     * @param {} listener_method
     */
    function addEvent(node,event_type,listener_method){
    	if(window.addEventListener){
             node.addEventListener(event_type,new Function(listener_method), false);
		}else{ 
             node.attachEvent('on'+event_type,new Function(listener_method));
		}
	}
分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    8. 总结:通过使用jQuery的事件委托技术,开发者可以有效地为动态生成的元素添加事件处理器。这种方式不仅节省了资源,还提高了代码的效率和可维护性。在实际开发中,这种方法被广泛应用于各种需要动态内容更新的...

    javaScript动态添加Li元素的实例

    最后,使用appendChild方法将新创建的li元素添加到ul元素的子节点列表的末尾。 addSpan函数负责创建span元素并设置其内容,而addDelBtn函数则负责创建一个按钮并为其设置事件监听器。按钮的事件监听器通过设置...

    javascript动态添加事件.pdf

    JavaScript 动态添加事件是网页开发中常见的需求,主要用于实现交互功能。在不同的浏览器中,实现方式略有差异,主要涉及到IE浏览器与非IE浏览器的兼容性问题。以下是关于JavaScript动态添加事件的一些关键知识点: ...

    JavaScript dom操作 添加和替换元素 示例代码

    JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...

    vue动态渲染svg、添加点击事件的实现

    - Vue不推荐直接使用原生的`addEventListener`或`onclick`属性来为动态生成的元素添加事件监听器,因为这样做会绕过Vue的事件机制,导致事件监听器不会自动绑定到Vue实例上。 - 另一个需要注意的地方是,不能直接...

    动态添加删除表单元素

    同时,还可以为元素添加事件监听器,比如`element.addEventListener('keyup', function() {...})`,以便在用户输入时执行特定操作。 3. 插入到DOM:最后,使用`appendChild()`或`insertBefore()`方法将新元素添加到...

    javascript下给元素添加事件的方法与代码

    javascript下给元素添加事件的方法与代码

    JavaScript动态添加删除表格行

    JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**: 要动态添加一行,首先需要获取到表格的引用,通常是通过`document.getElementById`或`document....

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

    // 使用事件委托给动态创建的元素添加点击事件 $(document).on('click', 'li.aaa', function() { console.log('ddd'); }); ``` 在这个例子中,我们使用了jQuery的`on`方法来实现事件委托。`'click'`是事件类型,`'...

    JS动态添加删除HTML元素(实例)

    动态添加删除 HTML 元素是前端开发中常见的需求之一,今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先,让我们了解一下 HTML 文档对象模型(DOM),它是 HTML 文档的树形结构表示,...

    js动态的添加元素例如表格1

    最后,我们使用 appendChild 方法将新创建的元素添加到表格中。 在使用 JavaScript 动态添加元素时,需要注意以下几点: * 由于 innerHTML 属性会将元素的整个内容重新解析,所以使用这个属性时需要小心,以免影响...

    向元素中动态添加option

    这篇博客“向元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下,实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言,它可以操作HTML元素,包括添加、...

    javascript实现的动态添加表单元素input,button等(appendChild)

    然后,我们可以使用`appendChild`方法将新创建的元素添加到已存在的DOM节点的子元素列表中。假设我们有一个ID为`add`的`div`元素,我们可以这样操作: ```javascript var TemO = document.getElementById("add"); ...

    JS实现为动态创建的元素添加事件操作示例

    本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考,具体如下: html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点 ...

    JavaScript动态生成控件赋事件

    在网页中,我们经常需要动态生成控件并为其赋予事件,这在JavaScript中是一项基本但至关重要的技能。这篇博客文章可能详细阐述了如何通过JavaScript实现这一功能。 动态生成控件通常涉及到DOM(Document Object ...

    Javascript 动态添加表单实例

    例如,可以使用`addEventListener`为表单元素添加`change`、`focus`或`blur`事件,以实时响应用户操作。同时,可以使用`FormData`对象来获取表单数据,以便于发送到服务器进行处理。对于验证,可以使用`pattern`属性...

    JavaScript实现动态添加、移除元素或属性的方法分析

    本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...

    利用javascript向网页中动态添加文件上传框

    然后,我们需要将这个新创建的元素添加到网页的某个位置。这可以通过`appendChild()`或`insertBefore()`等方法完成。假设我们希望将其添加到id为`container`的元素后面: ```javascript // 获取目标容器元素 var ...

    jquery动态添加元素事件失效问题解决方法

    `on()`方法允许我们为当前及未来动态添加的元素绑定事件,这样就解决了事件失效的问题。以下是使用`on()`的基本语法: ```javascript $(staticParentElement).on(eventName, dynamicChildSelector, function(event)...

    JavaScript动态添加大事之大事托付_.docx

    // 使用事件委托给动态创建的元素添加click事件 $(document).on('click', 'li.aaa', function() { console.log('ddd'); }); ``` 在这个例子中,`$.ajax`用于模拟动态创建`<li>`元素,并将其添加到`body`元素中。...

Global site tag (gtag.js) - Google Analytics