在Javascript中我们可以利用下面的方式来给一个HTML元素添加事件:
var btn = document.getElementById("btn");
btn.onclick=function(){alert('hello!');}
当然第二行代码我们还可以修改成这样的方式:
btn.onclick=new Function("alert('hello!');"}
这种方式都会创建一个匿名的函数,如果我们把它应用于循环中,就像下面这样:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(){
var btns = document.getElementsByTagName("input");
var data = document.getElementById("data");
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){data.innerText = "onclick: " + i;};
btns[i].attachEvent("onmouseover", function(){data.innerText = "onmouseover: " + i;});
btns[i].onmouseout = new Function("data.innerText = 'onmouseout: " + i + "';");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="test()">
<input type="button" name="btn1" value="Test1"/>
<input type="button" name="btn2" value="Test2"/>
<span id="data"></span>
</BODY>
</HTML>
我们从输出结果中发现前两种方式的结果中都是2,深层原因很是疑惑,我觉得有两种解释:
1、所有创建的这种匿名函数都拥有一个引用,如果多次赋值可能会覆盖之前的事件处理属性的值;(但是button的引用是变化的啊?);
2、前面的复制只是简单的字符串赋值,对于函数也如此,当真正触发事件调用时它才解析这段代码;(不过i的作用域是什么呢?)
问题依旧,继续学习,有懂得朋友帮忙指点一下!
参考资料:
http://www.happyshow.org/content.asp?id=92
http://shiningray.cn/functional_javascript_programming.html
下面的例子让我们理解JS中的对象机制和prototype的使用。来源于http://q.sohu.com/forum/5/topic/298749
function test(){
var class1 = new Object();
class1.hello = function(name){alert("hello, " + name);};
class1.name = "lixw";
class1.hello(class1.name);
//prototype提供了扩展、改造原有对象的方法。
//例如我们可以为已知对象,包括JavaScript的核心对象Array,Number,Math,Object,Boolean
//等和自定义类添加方法或者属性。
String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g,""); }
alert("[" + " hello world ".trim() + "]");
Student.prototype.age = 22;
var stu = new Student("lixw");
alert(stu.age);
}
function Student(name){
/**
var o=new Obj();这样的语法,看起来似乎和Java/C++相当类似,但是他背后的执行过程是不同的。
首先,解释器会new一个空的Object对象。然后将这个空的Object,作为隐藏的参数传递给function Obj()。
在Obj函数中访问到的this,其实就是这个传入的空的Object 对象。
这就是所谓:“this关键字关联于执行时的作用域”的含义。
如果你想把一个函数作为“构造函数”,那么就不要在函数的最后加上return语句。
因为如果没有return语句,new算符返回的就是那个被操作过以后的this。
一旦你通过return返回了别的东西,这个this就被废弃掉了。对于函数的调用者来说,就会相当的困惑。
*/
this.name = name;
}
看看下面的例子:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Button() {
this.button = document.createElement("button");
this.button.appendChild(document.createTextNode("Press me!"));
this.button.onclick = (
function(v) {
return function() {
var val = document.getElementById("val").value; alert(val);
}
}
) (this.value);
document.getElementById("d").appendChild(this.button);
}
function init(){
var bt = new Button();
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="init()">
<input type="text" name="val"></input>
<div id="d"></div>
</BODY>
</HTML>
在这个例子中,下面的代码是关键:
this.button.onclick = (
function(v) {
return function() {
var val = document.getElementById("val").value; alert(val);
}
}
) (this.value);
我们需要注意变量的作用域。
JS中利用代码触发事件:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function rdl_doClick(e){
event.cancelBubble=false;
event.srcElement.value="我被单击了。"
}
</SCRIPT>
</HEAD>
<BODY>
<input id=oInput type=text tabindex=4 size=30 onclick="rdl_doClick();">
<br><br>
<input type=button value="模拟单击" onclick="document.all('oInput').click();">
<br>
</BODY>
</HTML>
分享到:
相关推荐
尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用...
深入研究基本的web开发概念,如文档对象模型(dom)、浏览器对象模型(bom)、事件、表单、json、错误处理和web动画。 了解高级浏览器api,如地理位置、web工作者、服务工作者、获取、原子、流、消息通道、性能时间...
这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。 开发人员借此可以使用无法立即获得的...
现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能。 技术关键点 1.左侧和上侧...
emojify.js:前端 Emoji 处理库 APlayer:前端 HTML5 音乐播放器 ECharts:前端 JavaScript 交互式图表库 MathJax:前端数学公式渲染引擎 SoundRecorder:前端 HTML5 录音库 ZeroClipboard:前端剪贴板支持 ...
借由这个框架,我们在前端也引入了插件机制,意图处理混乱的前端js代码。 3、链式SQL调用库 我们新增了“链式SQL”,以替代原先反人类的SQL调用方式。新型书写方式简单自然,一气呵成,想必能直接避免总是不得不查...
然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可 以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。 JavaScript 代码甚至...
在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler) 常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中...
如果你没有使用mediastream-volume.bundle.js或者你想要 AMD 支持,请使用mediastream-volume.bundle.js 。重要细节其工作方式是将流中的第一个音频通道替换为通过增益过滤器运行的通道。 但请注意,这会编辑您提供...
该包装概述继续阅读,了解更多血腥细节。 描述 为什么? 我的目标是编写一个大量使用JWK和JWT的服务器。 乍一看,已经存在的库似乎足够了,但是不久我意识到为了完全实现协议,我需要整个JWT,JWK,JWS,JWE(必要...
虽然我知道有些服务可以将Cards AgainstHumanity:registered:作为在线/浏览器体验提供,但我认为我还可以更正确地学习NodeJS(和原始JavaScript)以及使用Socket.IO进行Websocket处理。 而这恰恰是Cards ...
Windows 系统自带的“记事本”的查找替换功能很弱,但 EmEditor 弥补了这一点,它支持的查找替换规则更加详细实用,对查找出的结果可以突出显示,并可以批量查找替换未打开的 TXT、HTML、DOC 等格式的文件中的内容:...
1.2.4 构建细节将会决定成败 1.3 准备软件环境 1.3.1 安装XAMPP 1.3.2 准备工作文件夹 1.3.3 准备数据库 1.4 小结 第2章 SEO基础知识 2.1 SEO概述 2.1.1 链接价值 2.1.2 Google PageRank 2.1.3 可用性和...
第四章软件详细设计,在此章节,我们将再次将日记本的各个功能提出,加以详细的分析,完成系统将出现的每一个细节。通过这一部分,我们将完成日记本制作的理论部分;第五章软件编码,顾名思义,在这一章节中,我们将...
我们也希望拥有Vega的所有精确图像细节,因此我们只使用Vega并告诉它给我们图像。 Clojure捕获结果并将其吐到目标文件中。可选的Visual Rendering作为Webview组件我们仍然可以(并且可能想要)将其呈现到交互式JFX ...
内容简介回到顶部↑Tcl/Tk是第一种能通过Windows、Macintosh和Solaris等主要平台处理企业级任务的脚本语言。本书共分为55章,依次详细讲述了Tcl基础、Tcl高级特性、TK基础、TK组件、TK详解、C语言编程、各版本之间的...
W3C组织正在研究一种名为RDF(Resource Description Framework)的metadata处理方法,可以自动交换信息,W3C宣称,使用RDF配合数字签名,将使网络中存在"真实可信"的电子商务。 六.显示 单独用XMl不能显示页面,...
如果您想处理标记为Hacktoberfest的任何问题,请在问题中说出这一点,我将确保合并第一位来访者的PR。 如果您正在寻找有助于解决问题的方法,请检查那些没有标签的问题。 检查评论,如果没有人要求“ dibs”,请...
通常,当我想启动一个快速项目时,会陷入无聊的实现细节,例如使用哪个堆栈或如何处理身份验证。 这样做的目的是使用我喜欢的一些技术,并且已经实现了JWT身份验证的基础知识,从而最大程度地减少了我个人开始项目...