`
DBear
  • 浏览: 231110 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

为节点绑定事件的几种方法

阅读更多

 “绑定事件”是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()有两个参数

 

  1. 第一个是事件名称
  2. 第二个是需执行的函数;

    addEventListener()有三个参数

 

  1. 第一个是事件名称,但与IE事件不同的是,事件不带"on",比如"onsubmit"在这里应为"submit"
  2. 第二个是需执行的函数
  3. 第三个参数为布尔值,表示该事件的响应顺序(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绑定事件的方法不一样,所以需要判断浏览器类型。具体方法参见:浏览器类型判别

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    JavaScript给每一个li节点绑定点击事件的实现方法

    代码示例中还展示了另一种为li节点绑定点击事件的方法,即使用立即执行函数表达式(IIFE)。这种方法在循环中为每个li节点创建了一个独立的作用域,从而确保了绑定的事件函数内部的变量`x`能够正确地引用到循环变量`...

    WPF之TreeView绑定数据获取节点数据

    4. **处理选择事件**:为了获取用户选定的节点数据,我们可以利用`TreeViewItem`的`Selected`事件或者绑定`Command`。如果使用`Command`,我们需要创建一个`ICommand`实例,并在`ViewModel`中实现命令逻辑。 ```...

    JQuery绑定事件

    jQuery中的事件绑定主要通过以下几种方式实现: 1. **`.on()`**:这是jQuery中最通用的事件绑定方法,可以用于绑定任何类型的事件。例如: ```javascript $('#myElement').on('click', function() { console.log...

    带节点点击事件的DTree

    节点点击事件通常通过JavaScript的addEventListener或attachEvent方法来添加,事件处理函数则根据业务需求进行定制。 动态绑定数据是DTree的另一个重要特性,这意味着可以在运行时根据服务器返回的数据动态构建树...

    Vue 3.0双向绑定原理的实现方法

    2. 编译器的实现(compile),在挂载节点的子节点上找到相应的指令(如l-model),并为其添加事件监听器,以便在输入时更新数据层的数据。例如,对于l-model指令,会监听input事件,然后将输入框的值更新到数据对象...

    Jquery对新插入的节点 绑定Click事件失效的解决方法

    因此,尝试为新插入的节点绑定`click`事件可能会失效。在jQuery中,有几种方法可以解决这个问题,主要涉及`live`、`delegate`和`on`这三个函数。 1. **`live`方法**: 在旧版本的jQuery中,`live`方法是解决动态...

    TreeView .net 绑定 绑定方法为公共类

    在标题和描述中提到的“绑定方法为公共类”,意味着我们将创建一个公共类作为数据模型,该类的实例将作为`TreeView`的数据源。公共类应包含与树形结构对应的数据属性,这些属性将在`TreeView`的节点中显示。例如: ...

    动态添加控件及添加事件方法

    在VC++编程中,动态添加控件和为其添加事件处理是常见的需求,特别是在设计复杂的用户界面时。本文将深入探讨如何实现这一功能,主要关注如何动态添加CtreeCtrl控件和如何为这些动态生成的控件添加事件。 首先,...

    JavaScript绑定大事监听函数的通用方法_.docx

    本文主要介绍了 JavaScript 绑定大事监听函数的通用方法,讨论了几种常用的绑定方法,并且分析了这些方法的优缺。首先介绍了三种常用的绑定方法:传统绑定、W3C 绑定方法和 IE 绑定方法。然后,讨论了一个通用的、跨...

    05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    有几种创建ref的方式,包括使用`React.createRef()`、`useRef()`(对于函数组件)或`forwardRef()`(用于将ref传递给子组件)。 最后,让我们探讨如何在React中实现类似Vue的双向数据绑定。Vue的v-model特性使得...

    DevExpress TreeListLookUpEdit 判断有子节点时展开

    总之,要实现"DevExpress TreeListLookUpEdit 判断有子节点时展开"的功能,我们需要利用控件的事件系统和数据绑定机制,通过编程逻辑控制节点的展开和收缩行为,同时确保数据源已经正确设置和加载。这将提升用户在...

    JavaScript绑定事件监听函数的通用方法

    事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法:...

    Q693643.rar delphi Treeview的节点移动和保存节点位置

    主要涉及到以下几种操作: - `MoveTo()`方法:此方法允许我们将一个节点移动到另一个节点的指定位置。例如,如果你想将节点A移动到节点B的子节点下,可以使用`NodeA.MoveTo(NodeB, naChild)`。这里的`naChild`参数...

    节点树生成

    在IT领域,节点树是一种常见的数据结构,尤其在软件开发中用于表示层次关系或树状结构的数据。在本例中,我们关注的是Dtree节点树,它是一种特定类型的节点树,可能被用在图形用户界面(GUI)中,特别是在创建左侧树...

    TreeView无限递归绑定

    在TreeView的无限递归绑定中,我们会创建一个递归函数,该函数接收一个节点作为参数,然后遍历其所有子节点,并为每个子节点创建一个新的TreeNode,再对这些子节点进行相同的递归调用。递归的关键在于定义终止条件,...

    Js操作树节点自动折叠展开的几种方法

    在本文中,将探讨Js操作树节点自动折叠和展开的几种方法。此操作可以提高用户体验,使得信息展示更为直观清晰。 ### 方法一:使用点击事件和toggleCheck函数 在树形控件中,可以通过绑定点击事件来实现节点的自动...

    TreeView无限级别绑定

    为了在界面上正确地展示这棵树,并且支持对树中的任一节点进行操作(如展开、折叠、选中等),就需要一种机制来动态生成和更新DOM结构,确保无论树的深度如何,都能准确无地反映数据结构。 #### 应用场景 1. **...

    d3.js插件 拓扑图 动态增加、删除节点

    4. **节点和边的绘制**:使用d3.js的`selection.append()`方法创建SVG元素,如`circle`表示节点,`line`表示边,根据数据绑定它们的属性。 5. **交互功能**:动态增加和删除节点是拓扑图的重要交互特性。这可以通过...

    C#树节点的直接修改

    通过绑定数据源,设置适当的事件处理程序,可以实现节点的动态添加、删除和更新。 至于SQLDBA,树结构常用于数据库对象的管理,如表、视图、存储过程等。在C#中,你可以使用ADO.NET或者Entity Framework与SQL ...

    用递归的方法绑定xml

    当我们需要将数据库中的数据展示或存储为XML格式时,递归方法是一种有效的方式。递归是编程中的一个强大概念,它允许函数调用自身来解决复杂的问题,特别适合处理层次结构的数据,比如树形结构或XML文档。 标题"用...

Global site tag (gtag.js) - Google Analytics