JavaScript 三种不同位置代码的写法


Posted in Javascript onOctober 25, 2009

下面列举在三种不同的地方写JavaScript代码,实现的效果都是点击按钮button弹出alert警告框

第一种是最常见的,代码如下
html代码
<input type="button" value="按钮1" id="btn1" onclick="pop()">
js代码
function pop()
{
alert("在JavaScript函数处调用");
}

第二种是最简单的实现方式,代码如下
<input type="button" value="按钮2" id="btn2" onclick="javascript:alert('直接写函数');">

第三种方式相对复杂,代码如下
html代码
<input type="button" value="按钮3" id="btn3">
js代码
var obj=document.getElementById("btn3");//以下语句一定要放在定义btn3的下面,否则编译器是不能识别btn3的。
if(window.addEventListener)// Mozilla, Netscape, Firefox等浏览器
{
obj.addEventListener("click",fun,false);//注意这里的false
}
else //IE浏览器
{
obj.attachEvent("onclick",fun);
}
function fun()
{
alert("通过在函数中触发事件");
}

总结:三种写法方式实现的效果是完全一样的,应该说三种方式都是常用的,而且各有优缺点。。。。

Javascript 相关文章推荐
javascript验证身份证完全方法具体实现
Nov 18 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
JavaScript 事件的一些重要说明
Oct 25 #Javascript
javascript写的一个链表实现代码
Oct 25 #Javascript
JavaScript的变量作用域深入理解
Oct 25 #Javascript
理解JavaScript变量作用域更轻松
Oct 25 #Javascript
理解 JavaScript 预解析
Oct 25 #Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 #Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 #Javascript
You might like
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
解决python 无法加载downsample模型的问题
2018/10/25 Python
python print出共轭复数的方法详解
2019/06/25 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python selenium的基本使用方法分析
2019/12/21 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python实现处理mysql结果输出方式
2020/04/09 Python
python logging通过json文件配置的步骤
2020/04/27 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
人力资源管理专业应届生求职信
2013/09/28 职场文书
网上书店创业计划书
2014/01/12 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
人民教师求职自荐信
2014/03/12 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android