JS实现一个按钮的方法
js中handler方法
js中handler方法handler方法是JavaScript中常用的一种函数，它常用于处理事件或请求。
在JavaScript中，事件是用户与网页或应用程序交互时发生的动作，例如点击按钮、鼠标悬停或键盘按下等。
而请求是客户端向服务器发送的数据请求，例如获取数据、提交表单或发送AJAX请求等。
handler方法的作用是在事件或请求发生时执行特定的代码逻辑。
它接收事件对象或请求参数作为输入，并根据需求进行相应的处理。
handler方法可以用来改变页面的状态、更新数据、发送请求或执行其他业务逻辑。
在编写handler方法时，首先需要确定要处理的事件或请求类型。
例如，在处理点击事件时，可以使用onclick属性绑定一个handler方法，当用户点击元素时，该方法将被触发。
类似地，可以使用onsubmit属性在表单提交时调用handler方法。
在编写handler方法的代码逻辑时，需要考虑以下几个方面：1. 获取事件对象或请求参数：根据事件类型或请求方式，可以通过event对象或参数来获取相关信息。
例如，通过event.target可以获取触发事件的元素，通过event.preventDefault可以阻止事件的默认行为。
2. 处理业务逻辑：根据需求，可以在handler方法中执行各种业务逻辑。
例如，可以根据用户的选择展示不同的页面内容，或者根据请求参数发送不同的请求。
3. 更新页面状态或数据：在处理事件或请求时，可能需要更新页面的状态或数据。
可以通过修改DOM元素的属性或内容来实现页面的动态更新，或者通过发送AJAX请求获取最新的数据。
4. 错误处理：在handler方法中，需要考虑可能出现的错误情况，并进行相应的处理。
可以使用try-catch语句来捕获错误，并根据具体情况进行处理，例如显示错误提示信息或回滚操作。
下面是一个简单的示例，演示了如何编写一个handler方法来处理点击事件：```javascriptfunction handleClick(event) {// 获取点击事件的目标元素const target = event.target;// 根据目标元素的不同，执行不同的逻辑if (target.classList.contains('btn')) {// 如果点击的是按钮，执行以下代码console.log('按钮被点击了');target.style.backgroundColor = 'red';}}```在上面的示例中，handleClick方法是一个handler方法，用于处理点击事件。
js绑定事件的方法
js绑定事件的方法JavaScript是一种常用的Web编程语言，是开发网页动态效果的必备工具。
在Web应用程序中，事件是非常重要的，比如按下按钮、移动鼠标、键盘输入等，都会触发一个事件。
在JavaScript中，我们可以通过绑定事件来捕获事件并进行相关操作。
在本文中，我们将介绍JavaScript中绑定事件的常用方法。
一、HTML的事件处理属性最早的JavaScript事件处理方法是在HTML标签上通过事件处理属性来定义事件处理函数。
在HTML中定义一个按钮，并为其指定一个单击事件处理函数：```html<button onclick="myFunction()">单击按钮</button><script>function myFunction() {alert("Hello World!");}</script>```在上述代码中，我们使用onclick属性为按钮定义了一个单击事件处理函数myFunction()。
当用户单击按钮时，会触发myFunction()函数并显示"Hello World!"的提示框。
虽然HTML的事件处理属性用起来十分简单明了，但是当我们需要为多个元素进行事件绑定时，代码的可维护性和可读性却会变得非常差。
我们通常不建议使用HTML的事件处理属性来处理JavaScript事件。
二、DOM 0级事件处理程序（元素级事件处理）DOM0级事件处理程序是通过JavaScript的一些方法来绑定事件的。
每个HTML元素都有一些事件属性，例如onclick、onmouseover、onmouseout等等。
我们可以通过设置这些属性为一个函数的方式来为元素绑定一个事件处理程序：在上述代码中，我们首先获取了ID为myBtn的按钮元素，然后设置它的onclick属性为一个匿名函数，当用户单击按钮时，会触发该匿名函数中的代码。
js中调用元素的onclick方法
js中调用元素的onclick方法【最新版4篇】目录（篇1）1.背景介绍2.JavaScript 中的事件处理3.onclick 方法的定义和用途4.在 JavaScript 中调用 onclick 方法的实例5.总结正文（篇1）1.背景介绍在网页开发中，交互性是非常重要的一个方面。
为了实现网页元素的交互，HTML 提供了一系列的事件，如点击事件（onclick）。
而 JavaScript 则负责处理这些事件，使得网页元素能够对用户的操作做出相应的响应。
2.JavaScript 中的事件处理JavaScript 中的事件处理机制允许我们在特定的条件下对网页元素执行特定的操作。
这种机制基于事件监听器，它允许我们在元素上添加事件处理程序。
当事件发生时，浏览器会调用与该事件相关联的事件处理程序。
3.onclick 方法的定义和用途onclick 方法是 HTML 中的一种事件处理方法，用于处理元素的点击事件。
当用户点击某个元素时，onclick 方法就会被调用。
onclick 方法的定义如下：```function onclick(event) {// 在这里编写处理点击事件的代码}```4.在 JavaScript 中调用 onclick 方法的实例下面是一个简单的示例，展示了如何在 JavaScript 中调用 onclick 方法：```html<!DOCTYPE html><html><head><title>JavaScript 中调用 onclick 方法示例</title><script>function handleClick() {alert("元素被点击了！");}function init() {var button = document.getElementById("myButton");button.onclick = handleClick;}window.onload = init;</script></head><body><button id="myButton">点击我</button></body></html>```在这个示例中，我们首先定义了一个名为 handleClick 的函数，该函数会在元素被点击时弹出一个警告框。
jsclick函数
jsclick函数
jsclick函数是JavaScript中的一个函数，它可以模拟用户在浏览器中的点击事件。
在Web应用程序中，我们经常需要模拟用户的点击操作，比如说点击按钮、链接等。
而jsclick函数可以帮助我们完成这些操作，从而实现自动化测试、自动化操作等功能。
使用jsclick函数非常简单，只需要传入需要点击的元素的ID 或者class名称，就可以执行点击操作。
比如说，我们可以这样调用jsclick函数：jsclick('button1')，其中button1是要点击的按钮的ID。
除了简单的点击操作，jsclick函数还支持一些高级的功能，比如说模拟鼠标移动、拖拽等操作。
这些功能可以帮助我们更加精细地模拟用户的操作，从而进行更加全面的测试和操作。
总之，jsclick函数是JavaScript中非常实用的一个函数，它可以帮助我们实现自动化操作和测试，提高开发效率和质量。
- 1 -。
js模拟点击事件
公司项目想要实现一种功能：单击一个按钮或超链接，然后会出现其他的超链接，这时要让其中的一个超链接被单击，以显示一个初始页面。
（公司页面使用了frameset）很显然，之后的超链接单击事件需要通过JavaScript来触发。
一开始，我想到了用jQuery的click()事件来触发超链接的单击事件（与trigger("click")一样的效果）。
结果发现不如人意。
实例如下：效果图IE:FireFox:Html代码<h3>请单击”Click Me"。
测试提交按钮与超链接是否也被单击了。
</h3><button id="btn">Click Me</button><form action="#"><input type="text"name="userName"value="徐新华-polaris" readonly/><input id="submit"type="submit"value="别点击此按钮提交"onclick="alert('触发了提交按钮的单击事件！');"/></form><a id="aLink"href="" onclick = "alert('触发了超链接的单击事件！');">代码触发超链接</a>Javascript代码$(function(){$("#btn").click(function(){$("#submit").click();$("#aLink").click();});});当单击：Click Me按钮时，先后弹出提交按钮被单击、超链接被单击的对话框，这表明两者的单击事件都被触发了。
html onclick的js用法
HTML onclick的JS用法HTML onclick是一种用于在用户点击页面元素时触发JavaScript代码的方法。
通过onclick事件，我们可以实现对页面元素的交互操作，例如点击按钮时弹出提示框、改变元素的样式、发送网络请求等。
本文将详细介绍HTML onclick的使用方法，包括以下内容：1.onclick的基本语法和用法2.在HTML元素上使用onclick3.在JavaScript函数中使用onclick4.传递参数给onclick函数5.防止事件冒泡6.使用事件委托1. onclick的基本语法和用法在HTML中，我们可以通过在元素上添加onclick属性来指定点击事件的处理函数。
基本语法如下：<element onclick="JavaScript代码"></element>其中，element可以是HTML中的任何元素，例如按钮（<button>）、链接（<a>）、图片（<img>）等。
JavaScript代码是我们希望在点击事件中执行的JavaScript代码。
例如，下面的代码演示了一个简单的按钮，点击按钮时会弹出一个提示框：<button onclick="alert('Hello, onclick!')">Click me</button>2. 在HTML元素上使用onclick我们可以在HTML元素的属性中直接使用onclick来定义点击事件的处理函数。
下面是一些常见的示例：2.1 在按钮上使用onclick<button onclick="myFunction()">Click me</button><script>function myFunction() {alert('Hello, onclick!');}</script>2.2 在链接上使用onclick<a href="#" onclick="myFunction()">Click me</a><script>function myFunction() {alert('Hello, onclick!');}</script>2.3 在图片上使用onclick<img src="example.jpg" onclick="myFunction()"><script>function myFunction() {alert('Hello, onclick!');}</script>3. 在JavaScript函数中使用onclick除了直接在HTML元素上使用onclick，我们还可以在JavaScript函数中使用onclick来动态添加点击事件。
onclick在js中的用法
onclick在js中的用法onclick是一个常用的JavaScript事件，它可以在用户点击某个元素时触发一些代码的执行。
onclick事件可以用于按钮、链接、图片等多种元素，实现不同的功能。
本文将介绍onclick事件的基本语法、属性和方法，以及一些常见的应用场景和示例代码。
onclick事件的基本语法onclick事件可以通过两种方式绑定到元素上：HTML属性和JavaScript代码。
HTML属性HTML属性的方式是在元素的标签中添加一个onclick属性，属性值是要执行的JavaScript代码。
例如：<button onclick="alert('Hello')">点击我</button>这个例子中，按钮元素有一个onclick属性，属性值是alert(‘Hello’)，这是一个JavaScript语句，用于弹出一个对话框显示Hello。
当用户点击这个按钮时，就会触发onclick事件，执行这个语句。
HTML属性的方式有一些缺点：代码可读性差，HTML和JavaScript混杂在一起，不利于维护和调试。
代码复用性差，如果多个元素需要绑定相同的onclick事件，就需要重复写相同的代码。
代码安全性差，如果属性值是从用户输入或其他不可信的来源获取的，就可能导致XSS（跨站脚本攻击）等安全问题。
因此，HTML属性的方式不推荐使用，除非是一些简单且临时的测试。
JavaScript代码JavaScript代码的方式是在JavaScript文件或标签中使用addEventListener()方法或onclick属性来为元素添加onclick事件。
例如：// 使用addEventListener()方法var btn =document.getElementById("btn"); // 获取按钮元素btn.addEventListener("click", function() { // 为按钮元素添加click事件监听器alert("Hello"); // 弹出对话框显示Hello});// 使用onclick属性var btn =document.getElementById("btn"); // 获取按钮元素btn.onclick=function() { // 为按钮元素的onclick属性赋值一个函数alert("Hello"); // 弹出对话框显示Hello};这两种方式都可以实现相同的效果，但有一些区别：addEventListener()方法可以为一个元素添加多个click事件监听器，而onclick属性只能赋值一个函数，如果多次赋值，后面的会覆盖前面的。
js按钮代码
脚本说明：把如下代码加入<body>区域中:后退前进<input type=”button” value=”后退” onClick=”history.go(-1)”><input type=”button” value=”前进” onClick=”history.go( 1 );return true;”>返回<form><input type=”button” value=”返回上一步” onClick=”history.back(-1)”></form>查看源码<input type=”button” name=”view” value=”查看源码” onClick=”window.location=”view-source:” +window.location.href”>禁止查看源码<body oncontextmenu=”return false”></body>刷新按钮一<input type=”button” value=”刷新按钮一” onClick=”ReloadButton()”><script>function ReloadButton(){location.href=”i001.htm”;}</script>刷新按钮二<input type=”button” value=”刷新按钮二” onClick=”history.go(0)”>回首页按钮<input type=”button” value=”首页” onClick=”HomeButton()”><script>function HomeButton(){location.href=;}</script>弹出警告框<input type=”button” value=”弹出警告框” onClick=”AlertButton()”><script>function AlertButton(){window.alert(”要多多光临呀！”);}</script>状态栏信息<input type=”button” value=”状态栏信息” onClick=”StatusButton()”><script>function StatusButton(){window.status=”要多多光临呀！”;}</script>背景色变换<form><input type=”button” value=”背景色变换” onClick=”BgButton()”></form><script>function BgButton(){if (document.bgColor==‟#00ffff‟){document.bgColor=‟#ffffff‟;}else{document.bgColor=‟#00ffff‟;}}</script>打开新窗口<input type=”button” value=”打开新窗口” onClick=”NewWindow()”><script>functionNewWindow(){window.open(”c01.htm”,”",”height=240,width=340,status=no,location=no,to olbar=no,directories=no,menubar=no”);}</script>窗口最小化<OBJECT id=”min” type=”application/x-oleobject” classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″><PARAM name=”Command” value=”Minimize”></OBJECT><button onClick=”min.Click()”>窗口最小化</button>全屏代码<input type=”BUTTON” name=”FullScreen” value=”全屏显示” onClick=”window.open(document.location, …butong_net‟, …fullscreen‟)”>关闭窗口<OBJECT id=closes type=”application/x-oleobject” classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″><param name=”Command” value=”Close”></object><input type=”button” value=”关闭窗口” onClick=”closes.Click();”>关闭窗口<input type=button value=关闭窗口onClick=”javascript:self.close()”>最大化<object id=big class id=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″><param name=”Command” value=”Maximize”></object><input type=button value=最大化onClick=big.Click()>关闭输入法<input style=”ime-mode:disabled” value=关闭输入法>链接按钮1<input type=”button” value=”链接按钮1″ onClick=”window.open(‟/‟, …Sample‟,…toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=y es,copyhistory=yes,width=790,height=520,left=0,top=0′)” name=”input”>链接按钮2<input type=”BUTTON” NAME=”Button” value=”链接按钮2″ onClick=”showModalDialog(‟/‟)”>链接按钮3<input type=”submit” value=”链接按钮3″onClick=”location.href=‟/‟”>警告框显示源代码<BUTTON onClick=alert(document.documentElem ent.outerHTML) style=”width:110″>警告框显示源代码</BUTTON>点击后按钮清空<input type=button value=‟打印‟ onClick=”this.style.visibility=‟hidden‟;window.print();”>打印<input type=button value=‟打印‟ onClick=”window.print();”>打印预览<OBJECT cla ssid=”CLSID:8856F961-340A-11D0-A96B-00C04FD705A2″ height=0 id=wb name=wb width=0></OBJECT><input type=button value=打印预览onclick=”wb.execwb(7,1)”>另存为<input onClick=”document.execCommand(‟saveas‟,'true‟,'常用代码.htm‟)” type=button value=另存为>点击自动复制<script>functionoCopy(obj){obj.select();js=obj.createTextRange();js.execCommand(”Copy”)}</script><input type=”text” value=”点击自动复制” onClick=”oCopy(this)” size=”11″>自动选中<input value=”自动选中” onFocus=”this.select()” onMouseOver=”this.focus()” size=”11″>打开源代码<BUTTON onClick=”document.location = …view-source:‟ + document.location” size=”7″>打开源代码</BUTTON>新窗口延迟打开<input type=button value=新窗口延迟打开onClick=javascript:setTimeout(”window.open(‟/‟)”,10000)>实现选中文本框里的前一半的内容<input type=”text” value=”选中文本框里的前一半的内容” size=30 onmouseover=”this.select();tR=document.selection.createRange();tR.moveEnd(‟characte r‟,-8);tR.select();”><input type=”text” value=”选中部分内容，非IE可以用这个” size=30 o nmouseover=”this.selectionStart=this.value.length-4;this.selectionEnd=this.value.length”>点击清空文字<input type=”text” name=”artist” size=14 value=”点击清空文字” onmouseover=this.focus() onfocus=this.select() onclick=”if(this.value==‟点击清空文字‟)this.value=””>点击清空文字<input name=name size=11 value=点击清空文字onMouseOver=this.focus() onblur=”if (this.value ==”) this.value=‟点击清空文字‟” onFocus=this.select() onClick=”if (this.value==‟点击清空文字‟) this.value=””>等于标题(title):<input type=”text” value=”" id=”aa” size=”20″><script>document.getElementById(”aa”).value=document.title;</script>检测IE是否脱机<input type=”button” value=”测试” onclick=”alert(window.navigator.onLine)”>11种刷新按钮的方法<input type=button value=刷新onClick=”history.go(0)”><input type=button value=刷新onClick=”location.reload()”><input type=button value=刷新onClick=”location=location”><input type=button value=刷新onClick=”location.assign(location)”><input type=button value=刷新onClick=”document.execCommand(‟Refresh‟)”><input type=button value=刷新onClick=”window.navigate(location)”><input type=button value=刷新onClick=”location.replace(location)”><input type=button value=刷新onClick=”window.open(‟自身的文件‟,'_self‟)”><input type=button value=刷新onClick=document.all.WebBrowser.ExecWB(22,1)><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT><form action=”自身的文件”><input type=submit value=刷新></form><a id=a1 href=”自身的文件”></a><input t ype=button value=刷新onClick=”a1.click()”>脚本说明:把如下代码加入<body>区域中：<a href=”#” onClick=document.execCommand(”open”)>打开</a><a onclick=”window.open(‟i001.htm‟,”,‟height=300,width=300,resizable=no,location=net‟);” href=”">打开指定大小网页</a<a href=”#” onClick=location.replace(”view-source:”+location)>使用记事本编辑</a><a href=”#” onClick=document.execCommand(”saveAs”)>另存为</a><a href=”#” onClick=document.execCommand(”print”)>打印</a><a href=”javascript:window.print();”>打印</a><a href=mailto:429752806@>发送E-mail</a><a href=”#” onClick=document.execCommand(”selectAll”)>全选</a><a href=”#” onClick=location.reload()>刷新1</a><a href=”#” onClick=history.go(0)>刷新2</a><a href=”#” onClick=location.replace(”view-sour ce:”+location)>查看源文件</a><a href=”#” onClick=window.open(document.location,”url”,”fullscreen”)>全屏显示</a><a href=”#” onClick=window.external.showBrowserUI(”PrivacySettings”,null)>internet选项</a><a href=”#” oncontextmenu=”window.open(this.href);return false;”>单击右键将在新窗口中打开</a><a href=”#” onClick=history.go(1)>前进1</a><a href=”#” onClick=history.forward()>前进2</a><a href=”#” onClick=history.go(-1)>后退1</a><a href=”#” onClick=history.back()>后退2</a><a href=”#” onClick=window.external.showBrowserUI(”OrganizeFavorites”,null)>整理收藏夹</a><SPAN onClick=”window.external.addFavorite(‟/‟,'网页特效站点‟)” style=”CURSOR: hand” title=网页特效站点>加入收藏</SPAN><a href=”#” onClick=”window.external.addFavorite(‟/‟,'网页特效站点‟)”>添加到收藏夹</A><a href=”javascript:window.external.AddFavorite(‟/‟, …网页特效站点‟)”>点击加入收藏夹</a><a href=”#” onmouseover=”window.external.addFavorite(‟/‟,'网页特效站点‟)” target=”_self” >鼠标感应收藏本站</a><a href=”#”onmouseover=”this.style.behavior=‟url(#default#homepage)‟;this.setHomePage(‟http://w /js/‟);” target=”_self”>鼠标感应设为首页</a><a href=”javascript:window.close()”>关闭窗口</a><a href=”#” onClick=window.close();return false)>关闭窗口</a><a href=”#” onClick=setTimeout(window.close(),3000)>3秒关闭本窗口</a><script>function shutwin(){window.close();return;}</script><a href=”javascript:shutwin();”>关闭本窗口</a><SPAN onClick=”var strHref=wi ndow.location.href;this.style.behavior=‟url(#default#homepage)‟;this.setHomeP age(‟/‟);” style=”CURSOR: hand”>设为首页</SPAN>等于标题栏:<script>document.write(document.title);</script><a href=”javascript:void(0);” onClick=‟window.e xternal.AddFavorite(location.href, document.title);‟>收藏本页</a><a href=”javascript:window.external.AddFavorite(document.location.href, document.title)”>收藏本页</a><a href=javascript:window.external.addChannel(”typhoon.cdf”)>加入频道</a><a href=”i003.htm” onclick=”return false;” ondblclick=”window.open(‟i003.htm‟);”>双击打开链接</a><style>#close a:hover {background:url(javascript:window.opener=0;window.close());}</style><div id=close><a href=”">关闭窗口</a></div><A HREF=”javascript:void(0)” onMouseover=”alert(‟对不起,禁止选中!‟)”>链接禁止</A> <a href=”" onMouseOver=”alert(‟本站域名:/‟);return true;”>记住本站域名</a>滚动条在左侧,将<html>改为<HTML DIR=”RTL”>网页半透明<body style=”filter:Alpha(Opacity=50)”>随机选择背景色<body><script>document.body.style.background=(["red","blue","pink","navy","gray","yellow","green","pur ple"])[parseInt(Math.random()*8)];</script>框架页中不显示滚动条：<SCRIPT>self.moveTo(0,0)self.resizeTo(screen.availWidth,screen.availHeight)</SCRIPT>防止网页被框架<SCRIPT LANGUAGE=JAVASCRIPT>if (top.location !== self.location) {top.location=self.location;}</SCRIPT>永远都会带着框架<script language=”javascript”><!–if (window == top)top.location.href = “frame.htm”; //frame.htm为框架网页// –></script>窗口自动最大化<script language=”JavaScript”><!–self.moveTo(0,0)self.resizeTo(screen.availWidth,screen.availHeight)//–></script>打开窗口自动最大化<OBJECT classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″ onreadys tatechange=”if (this.readyState==4) this.Click();” VIEWASTEXT><PARAM name=”Command” value=”Maximize”></OBJECT>爽眼闪屏代码<script>var color = new Array;color[1] = “black”;color[2] = “white”;for(x = 0; x <3; x++){document.bgColor = color[x];if(x == 2){x = 0;}}</script>不能被另存为<noscript><iframe src=*.html></iframe></noscript>汉字字库调用<script>for(i=19968;i<40870;i++)document.write(String.fromCharCode(i));</script>显示现在时间的脚本<script language=vbscript>document.write now</script>显示最后修改时间的脚本<script>document.write(stModified)</script>按下F12键,直接返回首页<script>function look(){if(event.keyCode==123){document.location.href=/}}if(document.onkeydown==null){document.onkeydown=look}</script>端口检测<img src=”http://www.winliuxq/zza.jpg” onload=”alert(‟端口可用‟)” onerror=”alert(‟端口禁止‟)”…>无法最小化的窗口<body onblur=‟self.focus();‟>链接点外部css文件<style>@import url(”ie.css”);</style>内嵌式框架-网页中调用另外网页：<object type=”text/x-scriptlet” width=”600″height=”1000″ data=”/”></object>刷新改变窗口大小<OBJECT classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″ onreadystatechange=”if (this.readyState==4) this.Click();” V IEWASTEXT><PARAM name=”Command” value=”Maximize”></OBJECT>JavaScript实现网页竖虚线<script>hei=120;d1=2;d2=2;cou=Math.floor(hei/(d1+d2));document.write(‟<table cellspacing=0 cellpadding=0 width=1 height=‟+hei+‟>‟);for(i=0;i<cou;i++){document.w rite(‟<tr><td height=‟+d2+‟><tr><td height=‟+d1+‟ bgcolor=333333>‟)}</script></table>js翻页<script>document.write(”<ahref=”+location.href.replace(/\.html/g,”_2.html”)+”>2</a>”);</script>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本文实例讲述了JS实现一个按钮的方法。
分享给大家供大家参考。
具体实现方法如下：<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="edge"> <script> window.onload = function(){ var btn = new Btn(); btn.init({width:300}); bindEvent(btn,'show',function(){ alert(1); }) bindEvent(btn,'click',function(){ alert(2); }) var oBtn = document.getElementById('btn'); oBtn.onclick = function (){ fireEvent(btn,'show'); } } function Btn(){ this.btn= null; this.settings = { width:200, height:40, borderRadius:6, text :'按钮' }; } Btn.prototype.init = function (opt){ extend(this.settings,opt); this.creat(); } Btn.prototype.creat = function (){ this.btn =document.createElement('div'); document.body.appendChild(this.btn); this.btn.innerHTML = this.settings.text; this.setData(); } Btn.prototype.destory = function (){ document.body.removeChild(this.btn); } Btn.prototype.setData = function (){ this.btn.style.width = this.settings.width +'px'; this.btn.style.height = this.settings.height +'px'; this.btn.style.border ='solid #f00 '+ this.settings.borderRadius +'px'; } function extend(obj1,obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } function bindEvent(obj,events,fn){ obj.listeners = obj.listeners || {}; obj.listeners[events] = obj.listeners[events] || []; obj.listeners[events].push( fn ); if(obj.nodeType){ if(obj.addEventListener){ obj.addEventListener(events,fn,false); }else{ obj.atta chEvent('on'+events,fn); } } } function fireEvent (obj,events){ if(obj.listeners[events]){ for(var i in obj.listeners[events]){ obj.listeners[events][i](); } } } </script> </head> <body> <a id="btn" style="margin-top: 40px;" >12</a> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
更多信息请查看IT技术专栏。