动态添加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();
}
不带参数的事件和带参数的事件。
一、不带参数的事件:
两种方式:直接给对象添加事件,节点添加事件
例如给一个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();
}
相关文章推荐
- JavaScript 核心知识点总结-2
- 2208: [Jsoi2010]连通数
- JSON.parse()和JSON.stringify()
- 高效自动化工具之在线json
- Extjs4.2 自定义window panel 标题
- js基础篇——原型与原型链的详细理解
- js基础篇——原型与原型链的详细理解
- 以JavaScript来实现WordPress中的二级导航菜单的方法
- javascript alert,confirm,prompt弹框用法
- 10023---JavaScript--DOM事件
- javascript之事件对象
- jvm之jstat
- Javascript之事件处理
- JSP的九大内置对象和四个作用域
- js中的数据类型
- JavaScript核心知识点总结
- jsp页面上date转换成string与string转换成date类型
- 18个常用的JavaScript代码
- js跨域请求实现
- 10022---JavaScript--DOM HTML与CSS