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 相关文章推荐
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JavaScript 巧学巧用
May 23 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
常见的python正则用法实例讲解
2016/06/21 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
python opencv实现图像配准与比较
2021/02/09 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
介绍一下gcc特性
2015/10/31 面试题
买房子个人收入证明
2014/01/16 职场文书
人事专员的岗位职责
2014/03/01 职场文书
论文诚信承诺书
2014/05/23 职场文书
助残日活动总结
2014/08/27 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书