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实现横向滑出的多级菜单效果
Oct 09 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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实现小型站点广告管理
2006/10/09 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
大学生党员自我批评
2014/02/14 职场文书
宣传活动总结范文
2014/07/01 职场文书
运动会报道稿300字
2014/10/02 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
无工作证明怎么写
2015/06/15 职场文书
英语导游欢迎词
2015/09/30 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
redis lua限流算法实现示例
2022/07/15 Redis