JavaScript 三种不同位置代码的写法
更新时间：2009年10月25日 20:23:00 作者：
客户端脚本JavaScript在写法上其实有很多种方法，它们的放置位置也非常之多。
下面列举在三种不同的地方写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("通过在函数中触发事件");
}
总结：三种写法方式实现的效果是完全一样的，应该说三种方式都是常用的，而且各有优缺点。。。。
第一种是最常见的，代码如下
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("通过在函数中触发事件");
}
总结：三种写法方式实现的效果是完全一样的，应该说三种方式都是常用的，而且各有优缺点。。。。
相关文章
这篇文章主要介绍了使用async await 封装 axios的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本文主要介绍了原生javascript上传图片带进度条的实例详解。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了Javascript动画的实现原理浅析,本文用两个实例来解释Javascript动画的实现原理,需要的朋友可以参考下2015-03-03
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下2015-10-10
JavaScript中三种for循环语句的使用总结（for、for...in、for...of）
这篇文章主要给大家介绍了关于JavaScript中三种for循环语句的使用的相关资料,For循环用在需要重复执行的某些代码,本文介绍的三种for循环分别包括for、for...in、for...of,需要的朋友可以参考下2021-06-06
下面小编就为大家带来一篇弹出遮罩层后禁止滚动效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
这篇文章主要为大家介绍了TypeScript类型系统自定义数据类型教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
JavaScript的for循环中嵌套一个点击事件的问题解决
本文主要介绍了JavaScript的for循环中嵌套一个点击事件点击一次弹出多个相同的值的解决方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript设计模式之原型模式详情,原型的这种设计模式，是一种比较简单的设计模式，由于初始化都做一些重复性的东西，造成的性能消2022-06-06
这篇文章主要介绍了JavaScript交换两个变量方法实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
最新评论