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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python标准库内置函数complex介绍
2014/11/25 Python
Python找出最小的K个数实例代码
2018/01/04 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python定义一个Actor任务
2020/07/29 Python
Python如何读写CSV文件
2020/08/13 Python
python 高阶函数简单介绍
2021/02/19 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
高中生班主任评语
2014/04/25 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
银行稽核岗位职责
2015/04/13 职场文书
指导老师鉴定意见
2015/06/05 职场文书
功夫熊猫观后感
2015/06/10 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS