button的onclick时间

本文介绍了一系列实用的网页操作与编辑技巧,包括打开、保存网页,刷新页面,前后导航,编辑文本内容等,帮助读者更好地管理和使用网页资源。
01 <input onclick="document.all.WebBrowser.ExecWB(1,1)" type="button" value="打开" name="Button1"> 


02 <input onclick="document.all.WebBrowser.ExecWB(4,1)" type="button" value="另存为" name="Button2"> 


03 <input onclick="document.all.WebBrowser.ExecWB(10,1)" type="button" value="属性" name="Button3"> 


04 <input onclick="document.all.WebBrowser.ExecWB(6,1)" type="button" value="打印" name="Button"> 


05 <input onclick="document.all.WebBrowser.ExecWB(8,1)" type="button" value="页面设置" name="Button4"> 


06 <input onclick="window.location.reload()" type="button" value="刷新" name="refresh"> 


07 <input onClick="window.external.ImportExportFavorites(true,'');" type="button" value="导入收藏夹" name="Button5"> 


08 <input onClick="window.external.ImportExportFavorites(false,'');" type="button" value="导出收藏夹" name="Button32"> 


09 <input onClick="window.external.AddFavorite(location.href, document.title)" type="button" value="加入收夹"name="Button22"> 


10 <input onClick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type="button" value="整理收藏夹" name="Submit2"> 


11 <input onclick='window.location="view-source:" + window.location.href' type="button" value="查看源文件" name="Button7"> 


12 <input onClick="window.external.ShowBrowserUI('LanguageDialog', null)" type="button" value="语言设置" name="Button6"> 


13 <input onClick="document.execCommand('Cut')" type="button" value="剪切"> 


14 <input onClick="document.execCommand('Copy')" type="button" value="拷贝"> 


15 <input onClick="document.execCommand('Paste')" type="button" value="粘贴"> 


16 <input onClick="document.execCommand('Undo')" type="button" value="撤消"> 


17 <input onClick="document.execCommand('Delete')" type="button" value="删除"> 


18 <input onClick="document.execCommand('Bold')" type="button" value="黑体"> 


19 <input onClick="document.execCommand('Italic')" type="button" value="斜体"> 


20 <input onClick="document.execCommand('Underline')" type="button" value="下划线"> 


21 <input onClick="document.execCommand('stop')" type="button" value="停止"> 


22 <input onClick="document.execCommand('SaveAs')" type="button" value="保存"> 


23 <input onClick="document.execCommand('Saveas',false,'c:\\Autorun.inf')" type="button" value="另存为"> 


24 <input onClick="document.execCommand('FontName',false,fn)" type="button" value="字体"> 


25 <input onClick="document.execCommand('FontSize',false,fs)" type="button" value="字体大小"> 


26 <input onClick="document.execCommand('refresh',false,0)" type="button" value="刷新"> 


27 <input onclick="window.location.reload()" type="button" value="刷新"> 


28 <input onclick="history.go(1)" type="button" value="前进"> 


29 <input onclick="history.go(-1)" type="button" value="后退"> 


30 <input onclick="history.forward()" type="button" value="前进"> 


31 <input onclick="history.back()" type="button" value="后退"> 


32 <input type="button" value="弹出固定窗口" onClick="javascript:window.open('#','','scrollbars=yes,width=600,height=200')" > 


33 <input type="button" value="没有提示关闭" onclick="window.opener=null;window.close();" /> 


34 <input type="button" value="点击进入另一页面" onclick="window.location.href=''" /> 


35 <input type="button" value="返回上一页" onclick="javascript:history.go(-1);" />
### HTML 中 button 元素的点击事件处理方式 在 HTML 中,`<button>` 元素的点击事件可以通过多种方式进行处理。以下是几种常见的方法及其详细说明: #### 1. **使用 `onclick` 属性** 这是最简单的绑定点击事件的方式之一。可以直接在 `<button>` 标签中通过 `onclick` 属性定义 JavaScript 函数。 ```html <button onclick="handleClick()">点击我</button> <script> function handleClick() { alert("按钮被点击了!"); } </script> ``` 这种方式适合简单的场景,但在复杂的应用中可能会导致代码难以维护[^1]。 #### 2. **通过 JavaScript 动态绑定事件** 为了提高代码的可读性和分离逻辑与结构,推荐使用 JavaScript 动态绑定事件监听器的方法。这种方法利用 `addEventListener` 方法来注册事件处理器。 ```html <button id="myButton">点击我</button> <script> window.onload = function() { var button = document.getElementById("myButton"); button.addEventListener("click", function(event) { alert("动态绑定的点击事件触发:" + event.type); }); }; </script> ``` 这里的关键在于 `addEventListener` 方法能够更灵活地管理多个事件处理器,并且不会覆盖已有的事件处理器[^4]。 #### 3. **结合表单提交行为** 如果 `<button>` 是位于一个表单内的,则它的默认行为可能是提交表单。在这种情况下,可能需要阻止默认的行为以便执行其他操作。 ```html <form id="myForm"> <button type="submit">提交表单</button> </form> <script> document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单提交 alert("表单提交已被阻止并执行自定义逻辑"); }); </script> ``` 这种技术对于控制表单交互非常有用,尤其是在 AJAX 提交或其他异步请求的情况下[^1]。 #### 4. **传递额外参数给事件处理器** 有时我们需要向事件处理器传递一些额外的数据或者上下文信息。这可以通过闭包或者其他机制实现。 ```html <button data-id="101" id="customButton">点击我</button> <script> var button = document.getElementById("customButton"); button.addEventListener("click", function(event) { var buttonId = event.target.getAttribute("data-id"); alert("按钮ID为:" + buttonId); }); </script> ``` 在这个例子中,我们通过 `getAttribute` 获取了按钮上的自定义属性值,并将其作为附加信息传入事件处理器[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值