“绑定事件”是UI开发中最常用到的操作之一,这里介绍几种方法,供大家选择:
1、html内嵌法
顾名思义,就是在html代码里节点代码里绑定事件。如下面代码
<html>
<head>
<script type="text/javascript">
function test(){
alert("bang");
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="click me"/>
</body>
</html>
需要注意的是,onclick后面的function赋值是需要添加括号的,否则事件无法绑定和触发。
如果onclick需要连续执行多个操作,可以按如下方法绑定事件。
<html>
<head>
<script type="text/javascript">
function test(){
alert("bang");
}
function test1(){
alert("bang2");
}
</script>
</head>
<body>
<input type="button" onclick="javascript:test();test1();" value="click me"/>
</body>
</html>
其中的“JavaScript:”也可以不加,具体原因,待查。
其中关于事件参数的传递和设置请参看 window.event 的介绍。
2、动态绑定
在很多时候,我们需要动态的创建节点,然后将某个或某几个事件绑定在该新建对象上。动态绑定又包含两种方式:
1、直接为对象赋值
document.getElementById("xxx").onclick = test;
2、使用两个重要的Js函数:attachEvent 和 addEventListener。
方法1和2的区别在于,如果连续执行如果执行如下的连续方法1赋值操作,最后的结果是只有test3被绑定给了对象。
document.getElementById("xxx").onclick = test1;
document.getElementById("xxx").onclick = test2;
document.getElementById("xxx").onclick = test3;
而方法2如果采用相同的连续赋值方式,则会产生追加的效果,事件触发是的执行顺序,由下至上。
另外对于方法1,我们要注意,赋给“onclick”的值只是一个“引用“,一定不能加括号,否则事件就会被执行,而赋给onclick的就是事件执行的返回结果了。
对于方法2我们来详细了解下。两种js方法,在IE下可用attachEvent,在FF下则要用addEventListener。
attachEvent()有两个参数
- 第一个是事件名称
- 第二个是需执行的函数;
addEventListener()有三个参数
- 第一个是事件名称,但与IE事件不同的是,事件不带"on",比如"onsubmit"在这里应为"submit"
- 第二个是需执行的函数
- 第三个参数为布尔值,表示该事件的响应顺序(useCapture),userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>
js代码
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false);
}
function test1(){ alert("外层div触发") }
function test2(){ alert("内层input触发") }
如果userCapture是true则test1先触发,如果userCapture是false则test2先触发。
请看如下示例代码。
<html>
<head>
<script type="text/javascript">
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
function test(){
alert("bang");
}
function test1(){
alert("bang2");
}
function init(){
var input = document.createElement('input');
input.type = 'button';
input.value = 'click me';
addEventHandler(input,'click',test);
addEventHandler(input,'click',test1);
document.getElementById('button_container').appendChild(input);
}
</script>
</head>
<body onload="init()">
<div id="button_container"></div>
</body>
</html>
点击按钮后,事件执行的顺序是 test1-->test2。
因为IE和Firefox绑定事件的方法不一样,所以需要判断浏览器类型。具体方法参见:浏览器类型判别。
分享到:
相关推荐
代码示例中还展示了另一种为li节点绑定点击事件的方法,即使用立即执行函数表达式(IIFE)。这种方法在循环中为每个li节点创建了一个独立的作用域,从而确保了绑定的事件函数内部的变量`x`能够正确地引用到循环变量`...
4. **处理选择事件**:为了获取用户选定的节点数据,我们可以利用`TreeViewItem`的`Selected`事件或者绑定`Command`。如果使用`Command`,我们需要创建一个`ICommand`实例,并在`ViewModel`中实现命令逻辑。 ```...
jQuery中的事件绑定主要通过以下几种方式实现: 1. **`.on()`**:这是jQuery中最通用的事件绑定方法,可以用于绑定任何类型的事件。例如: ```javascript $('#myElement').on('click', function() { console.log...
节点点击事件通常通过JavaScript的addEventListener或attachEvent方法来添加,事件处理函数则根据业务需求进行定制。 动态绑定数据是DTree的另一个重要特性,这意味着可以在运行时根据服务器返回的数据动态构建树...
2. 编译器的实现(compile),在挂载节点的子节点上找到相应的指令(如l-model),并为其添加事件监听器,以便在输入时更新数据层的数据。例如,对于l-model指令,会监听input事件,然后将输入框的值更新到数据对象...
因此,尝试为新插入的节点绑定`click`事件可能会失效。在jQuery中,有几种方法可以解决这个问题,主要涉及`live`、`delegate`和`on`这三个函数。 1. **`live`方法**: 在旧版本的jQuery中,`live`方法是解决动态...
在标题和描述中提到的“绑定方法为公共类”,意味着我们将创建一个公共类作为数据模型,该类的实例将作为`TreeView`的数据源。公共类应包含与树形结构对应的数据属性,这些属性将在`TreeView`的节点中显示。例如: ...
在VC++编程中,动态添加控件和为其添加事件处理是常见的需求,特别是在设计复杂的用户界面时。本文将深入探讨如何实现这一功能,主要关注如何动态添加CtreeCtrl控件和如何为这些动态生成的控件添加事件。 首先,...
本文主要介绍了 JavaScript 绑定大事监听函数的通用方法,讨论了几种常用的绑定方法,并且分析了这些方法的优缺。首先介绍了三种常用的绑定方法:传统绑定、W3C 绑定方法和 IE 绑定方法。然后,讨论了一个通用的、跨...
有几种创建ref的方式,包括使用`React.createRef()`、`useRef()`(对于函数组件)或`forwardRef()`(用于将ref传递给子组件)。 最后,让我们探讨如何在React中实现类似Vue的双向数据绑定。Vue的v-model特性使得...
总之,要实现"DevExpress TreeListLookUpEdit 判断有子节点时展开"的功能,我们需要利用控件的事件系统和数据绑定机制,通过编程逻辑控制节点的展开和收缩行为,同时确保数据源已经正确设置和加载。这将提升用户在...
事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法:...
主要涉及到以下几种操作: - `MoveTo()`方法:此方法允许我们将一个节点移动到另一个节点的指定位置。例如,如果你想将节点A移动到节点B的子节点下,可以使用`NodeA.MoveTo(NodeB, naChild)`。这里的`naChild`参数...
在IT领域,节点树是一种常见的数据结构,尤其在软件开发中用于表示层次关系或树状结构的数据。在本例中,我们关注的是Dtree节点树,它是一种特定类型的节点树,可能被用在图形用户界面(GUI)中,特别是在创建左侧树...
在TreeView的无限递归绑定中,我们会创建一个递归函数,该函数接收一个节点作为参数,然后遍历其所有子节点,并为每个子节点创建一个新的TreeNode,再对这些子节点进行相同的递归调用。递归的关键在于定义终止条件,...
在本文中,将探讨Js操作树节点自动折叠和展开的几种方法。此操作可以提高用户体验,使得信息展示更为直观清晰。 ### 方法一:使用点击事件和toggleCheck函数 在树形控件中,可以通过绑定点击事件来实现节点的自动...
为了在界面上正确地展示这棵树,并且支持对树中的任一节点进行操作(如展开、折叠、选中等),就需要一种机制来动态生成和更新DOM结构,确保无论树的深度如何,都能准确无地反映数据结构。 #### 应用场景 1. **...
4. **节点和边的绘制**:使用d3.js的`selection.append()`方法创建SVG元素,如`circle`表示节点,`line`表示边,根据数据绑定它们的属性。 5. **交互功能**:动态增加和删除节点是拓扑图的重要交互特性。这可以通过...
通过绑定数据源,设置适当的事件处理程序,可以实现节点的动态添加、删除和更新。 至于SQLDBA,树结构常用于数据库对象的管理,如表、视图、存储过程等。在C#中,你可以使用ADO.NET或者Entity Framework与SQL ...
当我们需要将数据库中的数据展示或存储为XML格式时,递归方法是一种有效的方式。递归是编程中的一个强大概念,它允许函数调用自身来解决复杂的问题,特别适合处理层次结构的数据,比如树形结构或XML文档。 标题"用...