`

JavaScript动态的为元素添加事件

阅读更多
Javascript为元素动态的添加事件包括两种情况:
不带参数的事件和带参数的事件。

一、不带参数的事件:
两种方式:直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况:
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
    alert('Hello!World');
}
第二种情况 这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序),呵呵
   var tb = document.getElementById("NewTitle");
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('cc'), false);
        td_value.addEventListener('click', alert('cc'), false);
    } else { // IE
        td_value.attachEvent('onclick',  function(){alert('changchang');});
        td_value.attachEvent('onclick',  function(){alert('changchang');});
    }


二、带参数的事件
这里的functionName就是事件处理函数,如果是带参数的那该怎么办,
有人说是这样:
element.onclick=function(sb){
        alert(sb);
    }
是不是上面的那种写法呢?答案是不正确的。
解决方法:匿名函数:
    element.onclick=function() {
        functionName(param);
    };
这样就巧妙的通过匿名方法实现了!
分享到:
评论

相关推荐

    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...

    layui动态绑定事件的方法

    在前端开发中,动态绑定事件是一项非常重要的技术,尤其是在处理动态创建的DOM元素时。...通过上述方法,即使是动态添加到页面上的元素,也能确保事件能够正确地绑定和触发,从而为用户带来良好的交互体验。

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

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

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

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

Global site tag (gtag.js) - Google Analytics