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("通过在函数中触发事件");
}

总结：三种写法方式实现的效果是完全一样的，应该说三种方式都是常用的，而且各有优缺点。。。。

赞 (0)

相关推荐

  • JavaScript 三种不同位置代码的写法

    下面列举在三种不同的地方写JavaScript代码,实现的效果都是点击按钮button弹出alert警告框 第一种是最常见的,代码如下 html代码 <input type="button" value="按钮1" id="btn1" onclick="pop()"> js代码 function pop() { alert("在JavaScript函数处调用"); } 第二种是最简单的实现方式,

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • Javascript三种字符串连接方式及性能比较

    第一种:用连接符"+"连接字符串 str="a"; str+="b"; 这种方法相对以下两种,最便捷快速.建议100字符以下的连接使用这种连接方式. 第二种:以数组作为中介,使用jion函数进行连接 var arr=new Array(); arr.push(a); arr.push(b); var str=arr.join(""); 第三种:利用对象属性连接字符串 function stringConnect(){ this

  • JavaScript三种方法解决约瑟夫环问题的方法

    目录 概述 问题描述 循环链表 有序数组 数学递归 总结 概述 约瑟夫环问题又称约瑟夫杀人问题或丢手绢问题,是一道经典的算法问题.问题描述也有很多变式,但大体的解题思路是相同的.本篇将以循环链表.有序数组.数学递归三种方式来解决约瑟夫环问题. 问题描述 先来看一下什么是约瑟夫环问题? 在罗马人占领乔塔帕特后,39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓到,于是决定了一个自杀方式,41个人排成一个圆圈,由第1个人开始报数,每报数到第3人该人就必须自杀

  • JavaScript三种获取URL参数值的方法

    目录 前言 URLSearchParams URL 纯JS 前言 在 URL 中,查询参数字符串值通常提供有关请求的信息,例如搜索参数或正在使用的对象的 ID.如果在前端处理任何业务或请求逻辑,了解如何从 URL 中检索查询字符串值非常重要.本文分享三种从 URL 获取参数的方法. URLSearchParams 除 IE 11 之外的所有主要浏览器版本都支持该 URLSearchParams 接口.它通过解析 URL 的查询字符串并提供访问值的方法来工作. 例如: 此接口的缺点之一是您必须仅将

  • Java追加文件内容的三种方法实例代码

    整理文档,搜刮出一个Java追加文件内容的三种方法的代码,稍微整理精简一下做下分享. import Java.io.BufferedWriter; import java.io.File; import java.io.FileOutputStream; import java.io.FileWriter; import java.io.IOException; import java.io.OutputStreamWriter; import java.io.RandomAccessFile;

  • JavaScript三种绑定事件方式及相互之间的区别分析

    本文实例讲述了JavaScript三种绑定事件方式及相互之间的区别.分享给大家供大家参考,具体如下: JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件 <script> function clickone(){ alert("hello"); } </script> 2. <div i

  • javascript三种代码注释方法

    javascript语言里面的注释方法有三种. 第一种是多行注释"/**/",一般js文件开头,介绍作者,函数等信息. 复制代码 代码如下: /* *author:xxx *day:2008-08-10 */ 第二种注释方法是最常见的"//",在程序间随处可见,只能注释单行. 复制代码 代码如下: //这是一行注释,只能注释单行. //另一行注释 第三种注释不是很常见,会和html内的注释混淆,不推荐使用. 复制代码 代码如下: <!-这是一行注释,只能注释单

  • jquery交替变换颜色的三种方法 实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • Java倒计时三种实现方式代码实例

    写完js倒计时,突然想用java实现倒计时,写了三种实现方式 一:设置时长的倒计时: 二:设置时间戳的倒计时: 三:使用java.util.Timer类实现的时间戳倒计时 代码如下: package timer; import java.util.Calendar; import java.util.Date; import java.util.Timer; import java.util.TimerTask; /** * java演示倒计时 * */ public class TimeTes

随机推荐