通过原生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.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);
时间: 2024-08-08 01:28:21

通过原生JS实现为元素添加事件的相关文章

原生js之同级元素添加移除class

<div class="tp-bottom-content"> <div class="tp-nav"> <ul id="nav"> <li class="active"><span>快速跟进</span></li> <li ><span>跟进</span></li> <li><

给Jquery动态添加的元素添加事件

给Jquery动态添加的元素添加事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>        

[转载]给Jquery动态添加的元素添加事件

原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table> <tbody> <tr> <td

js jquery插入元素后事件会被注销

  js jquery插入元素后事件会被注销 document.body.innerHTML += <div id="dd">test</div>  //这个会注销事件 $(document.body).append(str);//使用这个 也可以绑定事件. 例子: //快捷键双击 $(".app_shortcut_item").dblclick(function () { var id = $(this).attr("id&quo

jquery为新增元素添加事件

jquery为新增元素添加事件 默认情况,你使用jquery新增一个元素 ,用class的方法无法绑定事件,需要将绑定的函数放到jquery外面 然后在绑定行内事件 这样就可以绑定了

Js为Dom元素绑定事件须知

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { alert('I was clicked!'); }); 上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败. 正确的做法是,等待元素加载完后再执行 $('a').click(); $('body').load('LearnClickBi

js 动态给元素添加、移除事件

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

给DOM元素添加事件

今天遇到一个问题:鼠标单击页面中的任意标签,弹出该标签的名称. 实现代码如下: <script type="text/javascript"> document.onclick = function(e){ var e = (e||event); var o = e["target"] || e["srcElement"]; alert(o.tagName.toLowerCase()); } </script> 即创建了一

给Jquery动态添加的元素添加事件2

jquery为动态添加元素添加事件 还有这里:http://www.cnblogs.com/dumuqiao/archive/2011/09/09/2172511.html Event names and namespaces(事件名称和命名空间) http://www.css88.com/jqapi-1.9/on/ 任何事件的名称,可以作为events 参数.jQuery将通过所有浏览器的标准JavaScript事件类型,当用户操作事件,如click,浏览器会调用handler参数的函数.此外