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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python单例模式的两种实现方法
2017/08/14 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python压包的概念及实例详解
2021/02/17 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
大学生个人求职信范文
2013/09/21 职场文书
客户经理岗位职责
2013/12/08 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
PHP实现两种排课方式
2021/06/26 PHP
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫