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代码。这个属性...
用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div
IE8中的JavaScript点击事件(onclick)不兼容问题，是指在旧版浏览器Internet Explorer 8中，使用JavaScript设置的点击事件处理程序无法正常工作的情况。这种情况在使用JavaScript生成的页面元素如分页按钮时尤为常见...
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head>...
网页制作过程中，JavaScript 的 onclick 事件处理程序是实现用户交互的关键技术之一。下面将详细介绍给定文件中提及的40条最常用的 JavaScript onclick 语句，帮助网页开发者更好地理解和运用这些代码片段。 ### 1....
这种方式常见于`<a>`、`<input>`等标签中，通过事件属性如`onclick`、`onmousedown`等来触发JavaScript函数。 **示例1：** ```html <a href="javascript:document.write('Hello World!')">Click ``` - **解释：** ...
JavaScript中的`onclick`事件是网页交互中非常常见的一种事件处理机制，它允许开发者在用户对某个元素进行鼠标点击时执行特定的JavaScript代码。这个事件主要应用于HTML元素，如按钮、链接、图片等，使得网页具备...
`onclick`是HTML元素的一个属性，可以接受一个JavaScript函数作为值。当用户点击该元素时，浏览器会调用这个函数。例如，我们可以为表格的每一行的`<tr>`元素设置`onclick`事件，像这样： ```html <tr onclick=...
在 HTML 中调用 JavaScript 函数而不使用 onclick 是前端开发中的一种高级技巧，它可以提供更灵活的事件处理方式，使得代码更加整洁和易于维护。本文主要介绍了如何通过其他方法调用 JavaScript 函数，尤其是在不...
在上面的示例代码中，我们使用 Thymeleaf 的变量表达式来生成 onclick 事件处理函数，例如 `th:onclick="'javascript:check('+${corp.id}+',2)'"`。这个事件处理函数将在点击按钮时被触发，并将 corp.id 和 status ...
select id=”city” onchange=”[removed]test();”></select>中获取[removed]test();。 小菜想通过事件中的信息，确定下一级的菜单，但是这个貌似很简单的问题，却让小菜纠结了一番。...
<a href="" onclick="javascript: return del();">删除 ``` 在实际开发中，有时候需要更灵活的处理。比如，当删除操作关联到某个链接或按钮时，我们可以直接在该元素的`onclick`事件处理器中调用`del()`函数，并...
接下来，要实现“onclick”事件，我们需要在JavaScript中添加监听器。通常，我们使用`addEventListener`方法为元素绑定点击事件，然后在事件处理函数中实现页面滚动。例如： ```javascript document.getElementById...
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
`onclick`属性则允许我们在用户点击这些元素时执行特定的JavaScript代码。下面将详细介绍在给定文件中的各个`<input>`按钮以及它们绑定的`onclick`事件的功能与用途。 #### 1. Web 浏览器操作 - **`document.all....
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
JavaScript简介及基础语法介绍 JavaScript是客户端脚本语言，是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。它认为文档和显示文档的浏览器都是由不同的对象组成的集合，这些对象具有一定的属性，...
用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用JavaScript实现仿Windows关机效果
根据提供的示例代码，我们可以看到如何通过JavaScript为按钮添加`onclick`事件，从而实现点击按钮后打开新窗口的功能。具体步骤如下： 1. **HTML结构**：创建一个包含按钮的HTML文档。 2. **JavaScript代码**：为...