通过原生JS实现为元素添加事件的方法

2024-04-08 09:34:22

自己写了一个为元素添加事件的方法，并封装到对象中。

说明：

id : 目标元素的ID

type: 事件的类型，注意的是不能加on

fn:事件处理程序

isBubble :规定事件流

代码：

var bindEvent = {

    'add':function(id,type,fn,isBubble){

      var dom = document.getElementById(id);
      if(!isBubble) isBubble=false;
      if(dom.addEventListenner){
        dom.addEventListenner(type,fn,isBubble);
      }else if(dom.attachEvent){
        Transit = function(){
          fn.call(dom);
        }
        dom.attachEvent('on'+type,Transit);
      }else{
        dom['on'+type] = fn;
      }
    },
    'remove':function(id,type,fn,isBubble){
      var dom = document.getElementById(id);
      if(!isBubble) isBubble=false;
      if(dom.removeEventListenner){
        dom.removeEventListenner(type,fn,isBubble)
      }else if(dom.detachEvent){
        dom.detachEvent('on'+type,Transit)
      }else{
        dom['on'+type]=null;
      }

    }

  }

调用方法：

//定义事件处理程序
 function msg(){
  alert(this.tagName)
 }

 //为目标元素绑定事件
 bindEvent.add('link','click',msg,false);

 //解除目标元素绑定的事件
 bindEvent.remove('link','click',msg,false);

以上这篇通过原生JS实现为元素添加事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

jQuery给动态添加的元素绑定事件的方法

本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况例如 <div id="testdiv"> <ul>&l
多种方法实现JS动态添加事件

方法一.setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 但是IE不支持用 setAttribute 设置某些属性,包括对象属性.集合属性.事件属性,也就是说用 setAttribute 设置 style.onclick.onmouseover 这些属性在 IE 中是行不通的.
js 动态给元素添加、移除事件的实现方法

最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下事件,写了如下两个事件一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio
通过原生JS实现为元素添加事件的方法

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.
jQuery为动态生成的select元素添加事件的方法

项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa
javascript下给元素添加事件的方法与代码

最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo
JS实现为动态创建的元素添加事件操作示例

本文实例讲述了JS实现为动态创建的元素添加事件操作.分享给大家供大家参考,具体如下: html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点具体实现可以在demo中看到 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS实现为动态创建的元素添加事件
原生JS和JQuery动态添加、删除表格行的方法

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
原生js实现class的添加和删除简单代码

实例代码: function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " "
JS脚本实现动态给标签控件添加事件的方法

本文实例讲述了JS脚本实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
JS动态给对象添加事件的简单方法

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

通过原生JS实现为元素添加事件的方法

相关推荐

随机推荐