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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
react-router中的属性详解
Jun 01 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
详解tween.js的使用教程
Sep 14 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
php桥接模式应用案例分析
2019/10/23 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
全面了解python字符串和字典
2016/07/07 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
会计毕业自我鉴定
2014/02/05 职场文书
人事专员工作职责
2014/02/22 职场文书
村级换届选举方案
2014/05/10 职场文书
毕业设计致谢语
2015/05/14 职场文书
爱国教育主题班会
2015/08/14 职场文书
vue动态绑定style样式
2022/04/20 Vue.js
Redis唯一ID生成器的实现
2022/07/07 Redis