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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
js评分组件使用详解
2017/06/06 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
jQuery实现增删改查
2020/12/22 jQuery
python3编码问题汇总
2016/09/06 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
几个Shell Script面试题
2014/04/18 面试题
小学优秀班干部事迹材料
2014/05/25 职场文书
学校党员对照检查材料
2014/08/28 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
五年级上册复习计划
2015/01/19 职场文书
2015年工程部工作总结
2015/04/30 职场文书
小学推普周活动总结
2015/05/07 职场文书
家长会后的感想
2015/08/11 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers
解决MySQL报“too many connections“错误
2022/04/19 MySQL