`
左博涯
  • 浏览: 60403 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript 动态地给元素添加事件,取代在元素上写onclick

    博客分类:
  • js
阅读更多

attachEvent和addEventListener方法的使用
一般情况下直接在元素上添加事件的写法如下:

<img id=”zh_img” src=”xxx/xx.gif” onClick=”return method1 (  );” />

 
而在js脚本中也可以动态为这个元素添加事件:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例:
 document.getElementById("btn").onclick = method1;
 document.getElementById("btn").onclick = method2;
 document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行
写成这样:
 var btn1Obj = document.getElementById("btn1");
 //object.attachEvent(event,function);
 btn1Obj.attachEvent("onclick",method1);
 btn1Obj.attachEvent("onclick",method2);
 btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener
 var btn1Obj = document.getElementById("btn1");
 //element.addEventListener(type,listener,useCapture);
 btn1Obj.addEventListener("click",method1,false);
 btn1Obj.addEventListener("click",method2,false);
 btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
使用实例:
 1.
 var el = EDITFORM_DOCUMENT.body;
 //先取得对象,EDITFORM_DOCUMENT实为一个iframe
  if (el.addEventListener){
  el.addEventListener('click', KindDisableMenu, false);
  } else if (el.attachEvent){
//适用用IE浏览器
  el.attachEvent('onclick', KindDisableMenu);
 }
 2.
  if (window.addEventListener) {
  window.addEventListener('load', _uCO, false);
  } else if (window.attachEvent) {
//适用用IE浏览器
  window.attachEvent('onload', _uCO);
 }

绑定到带参数的方法,比如说直接在元素上添加事件的写法如下:

  <img id=”zh_img” src=”xxx/xx.gif” onClick=”return opentree(id,level);” />

 
使用绑定的方法,先要封装opentree(id,level)这个函数
var newopen = function(id,level)
{
  return function()
  {
    opentree(id,level);   //该函数为外部定义的一个带参数的执行函数
  }
}
绑定时把带数也写入,写法如下:
Var x=document.getElementById(“zh_img”);  // zh_img为元素的id
x.attachEvent("onclick",newopen(id,parseInt(level)+1));
注:调用的是newopen,而不是直接调用opentree

分享到:
评论

相关推荐

    js(javascript)编写的计算器

    在JavaScript中,可以通过添加事件监听器来响应用户的点击操作,而不是直接在HTML元素上写入`onclick`。例如,可以使用`addEventListener`方法来为每个按钮绑定点击事件: ```javascript document.getElementById('...

    JavaScript-Browser

    - **通用事件处理属性**:几乎所有的DOM元素都支持事件监听器,如`onclick`、`onmouseover`等。 - **特定元素的事件处理属性**:某些元素具有特定类型的事件处理程序,例如表单元素可能具有`onsubmit`事件。 #### ...

    javascript 的Document属性和方法集合

    - `document.body.appendChild(oTag)`: 向`&lt;body&gt;`元素添加一个新的子元素。 3. **body对象** - `document.body`: 表示HTML文档的`&lt;body&gt;`元素,提供了一些与页面主体相关的属性和方法。 - `document.body....

    关于JavaScript中事件绑定的方法总结

    delegate()方法适用于为动态添加的元素绑定事件,它在父元素上设置事件监听器,减少内存消耗,但在JQuery 1.7之后也已被on()方法取代。 在选择使用哪种JQuery方法时,应考虑兼容性、代码的维护性和执行效率。对于...

    javascript 不让鼠标事件触发

    在你的例子中,当用户点击`&lt;a&gt;`标签时,事件首先在`&lt;a&gt;`标签上触发,然后依次传递给它的所有父元素,直到`&lt;div&gt;`。因此,`&lt;div&gt;`的`onclick`事件处理函数会被调用。 为了避免这种情况,你可以采用以下几种策略来...

    Jquery为DIV添加click事件的简单实例

    在本例中,我们将探讨如何使用jQuery为一个DIV元素添加click事件,并通过这个实例来深入理解其工作原理。 首先,HTML部分创建了一个带有ID "click_ms" 的链接元素,它的href属性设置为"javascript:void(0)",以防止...

    javascript 的document对象

    - `document.body.onclick`, `document.body.onmouseover`, `document.body.onmouseout`: 用于在相应事件触发时调用函数。 4. **location 子对象**: - `document.location.hash`: 获取URL中#号后面的部分,通常...

    JAVASCRIPT-DOCUMENT方法大全.pdf

    5. `document.body.appendChild(oTag)`: 将一个元素添加到`&lt;body&gt;`元素的末尾。 6. `document.body`: 访问`&lt;body&gt;`元素,可以设置其样式和属性,如`document.body.bgColor`、`document.body.link`等。 7. `document....

    DOCUMENT的对象操作

    - 这些事件处理属性(如`onactivate`, `onclick`)是JavaScript中的事件监听器,当特定的用户交互发生时,它们可以触发函数来响应这些事件。现代JavaScript推荐使用`addEventListener`方法来添加事件监听器,以实现...

    02.rar(有个html文件和js文件还有2个其他文件)

    在JavaScript文件(可能是"js")中,可能需要找到适当的事件监听器(如`onclick`)来响应用户点击关闭按钮的操作,然后执行相应的动作,例如隐藏广告元素。 对于描述中提到的“我不知道哪里加连接”,如果问题在于...

    HTC简明教程 行为样式教程

    在网页开发中,HTML Control Architecture(HTC)是一种技术,它允许开发者通过脚本语言(通常是JavaScript)为HTML元素添加自定义的行为和样式。HTC的主要目标是扩展HTML的局限性,使网页能够实现更复杂的功能,而...

    flash+js 图片变换

    4. **事件监听**:为了实现幻灯片自动播放或响应用户点击,你可以在JavaScript中添加定时器或事件监听器,如`onclick`事件,来触发图片的切换。 5. **参数传递**:如果需要传递特定的参数,如图片索引或过渡效果...

    用VBSCRIPT制作IE按钮

    通过理解这些知识点,你就能熟练地使用VBScript在IE浏览器上创建具有特定功能的自定义按钮了。不过,请注意,随着技术的发展,VBScript的使用已经逐渐被JavaScript和现代Web开发框架所取代,学习这些新技术将有助于...

    JavaScript通过attachEvent和detachEvent方法处理带参数的函数

    在JavaScript中,当使用attachEvent添加事件处理函数时,通常需要在事件处理函数中额外指定this的上下文,以确保事件对象能够正确地传递给函数。这是因为attachEvent在绑定事件时会把事件处理函数中的this上下文指向...

    仿flash播放器的网站图片轮播切换.zip

    JavaScript通过DOM可以查找、修改和添加页面元素。在轮播切换中,JavaScript会通过DOM找到图片元素并进行显示和隐藏的操作。 4. **CSS3过渡和动画**:CSS3引入了过渡(Transition)和动画(Animation)特性,可以...

    open-flash-chart2使用总结

    开发者可以根据实际需求自定义颜色、大小、样式,甚至可以添加动态效果,如鼠标悬停时的提示信息和点击事件,使报表更具交互性。 在使用open-flash-chart2的过程中,首先需要理解其基本结构。一个图表由多个元素...

    js使用小技巧

    CSS滤镜`filter`可以实现元素阴影效果,但请注意,这在现代浏览器中已被CSS3的`box-shadow`取代: ```css filter: progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=3); ``` ...

    jQuery 相关控件的事件操作分解

    对于动态添加的元素,`live` 方法(在jQuery 1.7之后已被 `on` 方法取代)可以实现事件的委托,确保即使在页面加载后新添加的元素也能响应事件。然而,由于 `live` 已经废弃,推荐使用 `on` 方法: ```javascript $...

Global site tag (gtag.js) - Google Analytics