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 深拷贝函数
Dec 04 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
jquery插件实现图片悬浮
Apr 16 jQuery
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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
jquery map方法使用示例
2014/04/23 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Ubuntu下安装PyV8
2016/03/13 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python 实现try重新执行
2019/12/21 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python中logger日志模块详解
2020/08/04 Python
办公室文秘岗位职责
2013/11/15 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
学前班教学反思
2016/02/24 职场文书
导游词之上海豫园
2019/10/24 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB