您的位置:首页 > Web前端 > JavaScript

动态添加JS 事件

2015-12-14 15:13 555 查看
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);

    };

这样就巧妙的通过匿名方法实现了!

 

以上是从别的地方看见的,我自己试了个这样的例子,是对按钮的执行过程中设置一定的时间无法继续点击按钮提交事件

[c-sharp]
view plaincopy

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestSample.aspx.cs" Inherits="WebSample.TestSample" %>  
  
<!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" >  
<head runat="server">  
    <title>Untitled Page</title>  
    <mce:script language="javascript" type="text/javascript"><!--  
        function timeClick()  
        {  
            var obj=document.getElementById('<%=btnTime.ClientID %>');  
            obj.style.backgroundColor="gray";  
            obj.onclick=function(){ return false;};  
            setTimeout(resetbgColor,3000);  
        }  
          
        function resetbgColor()  
        {  
            var obj=document.getElementById('<%=btnTime.ClientID %>');  
            obj.style.backgroundColor="";  
         //   $('#'+'<%=btnTime.ClientID %>').click(timeClick);  
            obj.onclick=function(){  
                timeClick();  
            };  
        }  
      
// --></mce:script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
           <asp:Button ID="btnTime" runat="server" Text="Time"   
            OnClientClick="timeClick();" onclick="btnTime_Click" />    
    </div>  
    </form>  
</body>  
</html>  

上面对面中被屏蔽的一句: //   $('#'+'<%=btnTime.ClientID %>').click(timeClick); 好像用这句的话,后台的Click事件就不会执行了,所以被弃用了

 

后台代码:

[c-sharp]
view plaincopy

private void ExportTxt()  
      {  
          string fileName = "1111";  
          Response.Clear();  
          Response.Buffer = false;  
          Response.ContentEncoding = System.Text.Encoding.UTF8;  
          Response.AppendHeader("Content-Disposition", "attachment;filename=" + Server.UrlEncode(fileName) + ".txt");  
          Response.ContentType = "text/plain";  
          this.EnableViewState = false;  
          Response.Write("abc");  
          Response.End();  
      }  
  
  
      protected void btnTime_Click(object sender, EventArgs e)  
      {  
          ExportTxt();  
      } 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: