js 绑定带参数的事件以及手动触发事件

 更新时间:2010年04月27日 14:31:56   作者:  
js 绑定带参数的事件以及手动触发事件,需要的朋友可以参考下。
1.html代码
复制代码 代码如下:

<div>
<div id="tab">
<h2>标题一</h2>
<h2>标题二</h2>
<h2>标题三</h2>
<h2>标题四</h2>
div>
<dl id="tabcon">
<dd>内容一</dd>
<dd>内容二</dd>
<dd>内容三</dd>
<dd>内容四</dd>
</dl>
<div>

2 .js部分
复制代码 代码如下:

<script type="text/javascript" defer="defer">
var tab = document.getElementById("tab").getElementsByTagName("h2");
function swap(n) {
return function() {
for(var i=0; i<tab.length; i++) {
document.getElementById("tabcon" + i).style.display = "none";
document.getElementById("tab" + i).className = "";
}
document.getElementById("tabcon" + n).style.display = "block";
document.getElementById("tab" + n).className = "focus";
}
}

for(var i=0; i<tab.length; i++) {
tab[i].setAttribute("id", "tab" + i);
if(window.addEventListener) {
tab[i].addEventListener("mouseover", swap(i), false);
} else if(window.attachEvent) {
tab[i].attachEvent("onmouseover", swap(i));
}
}

var tabcon = document.getElementById("tabcon").getElementsByTagName("dd");
for(i=0; i<tabcon.length; i++) {
tabcon[i].setAttribute("id", "tabcon" + i);
}

if(document.createEvent) {
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( 'mouseover', true, false);
tab[0].dispatchEvent(evObj);
} else if( document.createEventObject) {
tab[0].fireEvent('onmouseover');
}
</script>

相关文章

  • 微信小程序冒泡事件及其阻止方法实例分析

    微信小程序冒泡事件及其阻止方法实例分析

    这篇文章主要介绍了微信小程序冒泡事件及其阻止方法,结合实例形式分析了事件分类、冒泡及相应阻止操作方法,需要的朋友可以参考下
    2018-12-12
  • vue3+Pinia+TypeScript 实现封装轮播图组件

    vue3+Pinia+TypeScript 实现封装轮播图组件

    这篇文章主要介绍了vue3+Pinia+TypeScript 实现封装轮播图组件,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-07-07
  • JS控制GIF图片的停止与显示

    JS控制GIF图片的停止与显示

    这篇文章主要为大家详细介绍了JS控制GIF图片的停止与显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 一起来了解JavaScript的变量作用域

    一起来了解JavaScript的变量作用域

    这篇文章主要为大家详细介绍了JavaScript变量作用域,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 小程序登录之支付宝授权的实现示例

    小程序登录之支付宝授权的实现示例

    这篇文章主要介绍了小程序登录之支付宝授权的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 使用JavaScript操作Visual Viewport的方法示例

    使用JavaScript操作Visual Viewport的方法示例

    在现代前端开发中,视口(viewport)是一个非常重要的概念,它决定了用户在浏览网页时所看到的内容,JavaScript 提供了一个强大的接口 —— Visual Viewport API,让开发者可以更灵活地控制和获取视口的信息,本文将详细介绍如何使用 Visual Viewport API
    2024-09-09
  • JavaScript常用对象的方法和属性小结

    JavaScript常用对象的方法和属性小结

    JavaScript是基于对象的语言。我们知道,对象是由一组数据(JavaScript中称之为属性)和施加在这组数据上的方法组成的。JavaScript中还有一些不属于任何对象的系统函数
    2012-01-01
  • JavaScript 事件的一些重要说明

    JavaScript 事件的一些重要说明

    关于JavaScript中事件的一些重要说明,需要的朋友可以参考下。
    2009-10-10
  • 动态修改DOM 里面的 id 属性的弊端分析

    动态修改DOM 里面的 id 属性的弊端分析

    我不知道是否有什么标准规定不允许修改id属性,或者不建议修改id属性,总之IE对此支持不佳。
    2008-09-09
  • Bootstrap学习笔记之js组件(4)

    Bootstrap学习笔记之js组件(4)

    这篇文章主要为大家详细介绍了Bootstrap学习笔记之js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06

最新评论