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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
js仿淘宝放大镜效果
Dec 28 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获得用户ip地址的比较不错的方法
2014/02/08 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP数组操作类实例
2015/07/11 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
django 简单实现登录验证给你
2019/11/06 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
酒店营销策划方案
2014/02/07 职场文书
运动会班级口号
2014/06/09 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis