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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
微信小程序实现电子签名功能
Jul 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
两个开源的Php输出Excel文件类
2010/02/08 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python 去除字符串中指定字符串
2020/03/05 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
新闻学专业个人求职信写作
2014/02/04 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
三方协议书范本
2014/04/22 职场文书
2015年预算员工作总结
2015/05/14 职场文书
回复函格式及范文
2015/07/14 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle