javascript里的onclick事件失败了! 怎么这么点小事也出错?? 我心里有些沮丧.
问题是这样的,
一个页面有两个button,这两个button分别触发去后台取数据的操作,也就是上下翻页.由于取数据的function是单独写好的,
仅仅以传参来区分是上页的数据还是下页的数据.
对这个取数据function的调用是通过给两个button注册onclick事件来触发的.模拟代码如下:
<script>
function getDataForPage(pageIndex,resultNumber){
//.........
}
function registClickEvent(){
var buttons = ducoment.getElementsByClassName("ajaxController");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = function(){
if(i == 0){// 如果是第一个button, 让它去取"上一页"的数据
getDataForPage(...,...);//
}else{// 第二个button, 取"下一页"数据.
getDataForPage(...,...);
}
}
}
}
</script>
<body>
<input type="button" class = "ajaxController" value="上一页"/>
<input type="button" class = "ajaxController" value="下一页"/>
</body>
<script>
registClickEvent();
</script>
为什么不在"上一页""下一页"两个button上直接通过onclick来注明而非要跑到后面再以script的方式来补注呢?
class为ajaxController的两个button是以javascript操作HTML里DOM的方式生成的,当然也可以在新建一个button时就给它注上onclick事件,原因是操作DOM的代码很长,若直接写onclick事件,对维护不利.于是写了一个集中的registClickEvent方法来注册了.
这是一个题外话, 回到正题上来.
实话说代码写成这样,现在看来有些"恐怖"! onclick事件里怎么能这样写呢?这是事后这样想, 不过当时也不知是活多还是别的什么原因,真真切切地这样写了.
为什么会这样呢? 现在把一些所得整理一下.
简单是说就是onclick事件的执行方法里不能引用外面的变量. 在模拟代码里,也就是说registClickEvent方法中的"
if(i == 0)
"是有问题的, 因为这个i是onclick执行方法外定义的.找到原因也就好改了.
举一反三下, 出问题不要紧,出问题能改,若能"杀一儆百"并发现新大陆就更难能可贵啦, 呵呵, 这样一想,还真感谢那些成语.
有了这个念头后, Java里内部匿名类传参用final的情景出现了. 当以内部匿名类的方式来"注册"一些"事件"时,
匿名内部类里方法要用外部类(准确来说是外部那个方法)的变量可以,
但那个变量一定是final的.当时第一次接触这个"规则"里觉得有些怪怪的.为什么呢?
内部类方法用就用吧,还要用一个final的变量条件还挺高!有
内部匿名类与final的问题,当时学时有了怀疑后,也查过很多资料,
不过也没一个很清晰的解答.后来工作后极少碰到这样的问题,再加上IDE的支持万一自己有些疏忽的话,它也有了提醒.这样一来也就没机会多想.现在再结合
JavaScript里的问题,有了一个正面的交锋, 虽说现在还没能从"细胞"层面上来理解,但还是一个很大的收获嘛:
方法调用栈,变量存储,一个类的生命周期... 这些概念一起碰撞有了突破.
这也是从JavaScript里的onclick事件引发的对Java final的思考.
分享到：
相关推荐
本文将详细介绍JavaScript中一种常见的事件处理用法——onclick(this)。 首先，我们需要理解什么是onclick事件处理器。在HTML中，onclick是一个事件属性，用于指定当元素被点击时将调用的JavaScript代码。这个属性...
IE8中的JavaScript点击事件(onclick)不兼容问题，是指在旧版浏览器Internet Explorer 8中，使用JavaScript设置的点击事件处理程序无法正常工作的情况。这种情况在使用JavaScript生成的页面元素如分页按钮时尤为常见...
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head>...
JavaScript是目前广泛使用的一种网页脚本语言，它的核心能力之一就是操作用户的交互行为，如点击（click）、悬停（hover）等，而onclick事件是其中最基础且常用的一种。它允许我们定义当用户点击某个元素时所要执行...
JavaScript中select元素的option子项上绑定onclick事件，在不同浏览器间的兼容性问题一直是个常见的难题。特别地，IE浏览器对于这一特性支持并不友好，这导致开发人员在开发涉及跨浏览器兼容的Web应用时，不得不寻找...
关于动态改变JavaScript中onclick事件触发的函数代码的知识点，我们将从JavaScript事件处理机制、onclick事件、以及如何动态改变事件绑定的函数等方面进行详细解释。 首先，JavaScript是一种基于事件的编程语言。在...
select id=”city” onchange=”[removed]test();”></select>中获取[removed]test();。 小菜想通过事件中的信息，确定下一级的菜单，但是这个貌似很简单的问题，却让小菜纠结了一番。...
打印预览" onclick="javascript:printpreview();"> 关闭" onclick="javascript:window.close();"> ``` 在上面的代码中，我们使用了 ExecWB() 函数来实现打印、打印预览和页面设置的功能。ExecWB() 函数可以执行多种...
本文将详细介绍JavaScript中的一些常见事件，包括onClick、onChange、onSelect、onFocus以及onLoad事件。 1. onClick事件 onClick事件是最常用的事件之一，它在用户点击元素（通常是按钮或链接）时触发。在HTML中，...
接下来，要实现“onclick”事件，我们需要在JavaScript中添加监听器。通常，我们使用`addEventListener`方法为元素绑定点击事件，然后在事件处理函数中实现页面滚动。例如： ```javascript document.getElementById...
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
在网页开发中，JavaScript 是一种常用的脚本语言，用于实现页面的交互效果。"onclick" 事件是JavaScript中的一种事件处理函数，它会在用户点击一个元素时触发指定的代码。在这个场景中，我们讨论的是如何利用 ...
通过`addEventListener`或`onclick`等事件处理器，开发者可以编写响应用户行为的代码。 4. **AJAX**: 异步JavaScript和XML（AJAX）使得无需刷新页面就能与服务器交换数据并更新部分网页内容。`XMLHttpRequest`对象...
网页编程是构建动态交互式网站的关键技术之一，其中JavaScript扮演着至关重要的角色。在这个实例代码集合中，我们可以通过分析每个文件来深入理解JavaScript在网页开发中的应用，以及它与HTML的紧密协作。以下是对...
用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用JavaScript实现仿Windows关机效果
<button onclick="togglePlay()">播放/暂停 function togglePlay() { if (myVideo.paused) { myVideo.play(); } else { myVideo.pause(); } } ``` 在提供的"player"文件中，可能包含了实现以上功能的...
JavaScript，作为全球最广泛使用的编程语言之一，是创建交互式网页和动态应用的关键技术。它是一种轻量级的脚本语言，主要运行在浏览器环境中，但也适用于服务器端（如Node.js）和其他平台。"JavaScript经典实例"这...
定义无参数的JavaScript函数，onClick单击事件调用JavaScript函数