首页技术onclick在js中的用法 js中如何监听click事件

onclick在js中的用法 js中如何监听click事件

编程之家2026-06-131193次浏览

大家好,关于onclick在js中的用法很多朋友都还不太明白,今天小编就来为大家分享关于js中如何监听click事件的知识,希望对各位有所帮助!

onclick在js中的用法 js中如何监听click事件

JS return 用法

首先要说明的一点,JS术语前端程序,php属于后端程序,前端程序和后端程序要交货,必须通过“请求”操作来进行。js代码里可以通过Ajax或者表单来提交给后端的php程序。如果你使用JQuery的话可以使用

$.get("123.php?pos="+"{'x':"+e.screenX+",'y':"+screenY+"}")

来进行Ajax提交。因为你的函数为事件绑定的函数,所以在触发事件以外的其他地方使用时,这个函数是获取不到其参数event的。要提交到php程序的话需要把提交请求的代码放到时间的函数里面。你的函数得改为:

function getMousePos(event){

var e= event|| window.event;

$.get("123.php?pos="+"{'x':"+e.screenX+",'y':"+screenY+"}");

onclick在js中的用法 js中如何监听click事件

return true;

}

123.php中可以使用json_decode来对传入的pos参数进行解析即可。

另:建议不要在鼠标移动事件里绑定getMousePos这个函数,因为你稍稍移动一下鼠标,就要对php程序进行一次请求,这样会造成对后端程序服务的大量访问。

总体上来说,return一般是用在函数中的用来向解析器表达退出函数并返回调用函数空间的命令。

在JS这个专门用于web的程序设计语言来讲,其使用环境最为广泛的就是在浏览器环境下使用。W3C规定了一些供JS程序和页面代码进行交互的接口,如浏览器级别的BOM(BrowserObjectModel,浏览器对象模型)和DOM(Document Object Model,文档对象模型)。通过这些接口,JS程序就可以畅快淋漓地和页面进行开心的“交谈”和“合作”了。

onclick在js中的用法 js中如何监听click事件

在函数中,表示返回:

1)退出函数空间。

functiona(){

varaa=0;

return;

varbb=0;

}

解析:函数执行到return就返回了调用函数的空间,返回值为undefined,后面的代码将不会被执行,即var bb=0是不会被执行的。当然,这种情况下不写return也是可以的,因为没有返回任何值。

2)退出函数空间并返回函数计算结果。

functionb(){

varaa=0;

aa=aa+1;

returnaa;

}

解析:b函数别调用后返回了内部的变量aa经过计算过后的值,即1。此时调用函数b(),就会返回一个值1,可以使用变量赋值的形式获取函数的返回值,如cc=b(),就将b函数的计算结果赋值给了cc这个变脸;

3)函数返回的综合使用。

//根据得分折算出用“优、良、中、差”表示的成绩

fucntionzhesuan(vardefen){

if(defen<60){return"差";}

if(defen<80){return"中";}

if(defen<90){return"良";}

if(defen<=100){return"优";}

return;

varjieguo="return使用实例";

}

解析:zhesuan函数通过传入的得分参数defen来折算出“优、良、中、差”表示的成绩。正常情况下,我们通过显示折算算法的直接代码化,需要进行多重判定才能达到效果:

60分以下为差

60至79分为中

80至89分为良

90以上为优

转换为程序代码就要分别写if…else if....else if代码:

if(defen<60){

zhesuanjieguo="差";

elseif(defen>60&&defen<80){

zhesuanjieguo="中";

}

elseif(defen>=80&&defen<90){

zhesuanjieguo="良";

}

elseif(defen>90&&defen<=100){

zhesuanjieguo="优";

}

这样写代码量大,编写和阅读都容易对分段搞错。

如果这样写:

if(defen<60){zhesuanjieguo="差";}

if(defen<80){zhesuanjieguo="中";}

if(defen<90){zhesuanjieguo="良";}

if(defen<=100){zhesuanjieguo="优";}

上面的代码无论怎样执行,结果都是"优",就不能达到效果。

因为return具有停止执行后续代码并返回退出函数的作用,所以通过函数来进行折算就不需要作多重判定了,是不是很省事?

2.与DOM或者DOM结合使用

例如在点击事件中:

onClick='return add_onclick()'与 onClick='add_onclick()'

JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。

而该值决定了当前操作是否继续。

当返回的是true时,将继续操作。

当返回是false时,将中断操作。

而直接执行时(不用return)。将不会对window.event.returnvalue进行设置

所以会默认地继续执行操作

详细说明如下:

例如:

当在<a rel="external nofollow" rel="external nofollow" href="abc.htm" onclick="return add_onclick()">Open</a>中

如果函数 add_onclick()返回 true,那么页面就会打开 abc.htm

否则,(返回 false),那么页面不会跳转到 abc.htm,只会执行你的 add_onclick()函数里的内容.(add_onclick函数中控制页面转到 abc.htm除外

)

而<a rel="external nofollow" rel="external nofollow" href="abc.htm" onclick="add_onclick()">Open</a>

不管 add_onclick()返回什么值,都会在执行完 add_onclick后打开页面 abc.htm

如何用js在页面中添加元素

1.首先创建html结构,如下图所示,一个input元素,一个按钮,一个空的ul列表。

2.然后添加按钮点击事件,如下图所示,在按钮点击事件中获得input元素。

3.通过value属性我们可以获得用户在input中输入的内容,如下图所示。

4.下面我们来动态创建一个li元素,如下图所示,运用document中的createElement方法即可。

5.创建好li元素以后,下面要做的就是给其设置innerHTML内容,如下图所示。

6.接下来就是获取ul元素了,如下图所示,仍然用getElementById方法。

7.最后通过调用appendChild方法将创建的li元素添加到ul列表中,如下图所示。

javascript如何使用

1、字符串的创建

创建一个字符串有几种方法。最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量。

var myStr="Hello, String!";

我们在上面脚本创建了字符串,但本质上,它们并不是真正的字符串对象,准确地说,它们是字符串类型的值。要创建一个字符串对象,可使用如下语句:var strObj= new String("Hello, String!");

使用typeof运算符查看会发现,上面的myStr类型为string,而strObj类型为object。

如果想知道字符串的长度,使用其length属性:string.length。

得到字符串的指定位置的字符使用方法:string.charAt(index);

2、字符串的拼接

非常简单,就用一个"+"将两个字符串"相加":

var longString="One piece"+"plus one more piece.";

要将多个字符串累积为一个字符串,还可以使用"+="操作符:

var result="";

result+="My name is Anders"

result+=" and my age is 25";

要在字符串中添加换行符,需要使用转义字符"/n":

var confirmString="You did not enter a response to the last"+

"question./n/nSubmit form anyway?";

var confirmValue= confirm(confirmString);

但这种方法只能用在像警告、确认对话框之类的情况下,如果将这段文本作为HTML内容呈现,就无效了,此时用"<br>"代替它:

var htmlString="First line of string.<br>Second line of string.";

document.write(htmlString);

String对象还提供了方法concat(),它完成与"+"相同的功能:

string.concat(value1, value2,...)

不过concat()方法显然不如"+"来得直观简洁。

3、访问字符串的子串

使用substring()或slice()方法(NN4+, IE4+),下面说明它们的具体用法。

substring()的原型为: string.substring(from, to)

第一个参数from指定了子字符串在原字符串中的起始位置(基于0的索引);第二个参数to是可选的,它指定了子字符串在原字符串的结束位置(基于0的索引),一般情况下,它应比from大,如果它被省略,那么子字符串将一直到原字符串的结尾处。

如果参数from不小心比参数to大了会怎样?JavaScript会自动调解子字符串的起止位置,也就是说,substring()总是从两个参数中较小的那个开始,到较大的那个结束。不过要注意,它包含起始位置的那个字符,但不包含结束位置的那个字符。

var fullString="Every dog has his day.";

var section= fullString.substring(0, 4);// section is"Ever".

slice()的原型为: string.slice(start, end)

参数start表示子串的起始位置,如果为负数,那么可以理解为倒数第几个开始,例如-3表示从倒数第三个开始;参数end表示结束位置,与start一样,它也可以为负数,其含义也表示到倒数第几个结束。slice()的参数可以为负数,所以要比substring()更加灵活,但没那么宽容了,如果start比end要大,它将返回一个空字符串(示例略)。

还有一个方法是substr(),其原型为: string.substr(start, length)

从原型可以看出它的参数的含义,start表示起始位置,length则表示子字符串的长度。JavaScript标准不提倡使用该方法。

4、字符串的大小写转换

使用toLowerCase()和toUpperCase()方法:

var city="ShanGHai";

city= city.toLowerCase();// city is"shanghai" now.

5、判断两个字符串是否相等

先将用户的输入值全部转换为大写(或小写),然后再行比较:

var name= document.form1.txtUserName.value.toLowerCase();

if(name=="urname")

{

// statements go here.

}

JavaScript有两种相等运算符。一种是完全向后兼容的,标准的"==",如果两个操作数类型不一致,它会在某些时候自动对操作数进行类型转换,考虑下面的赋值语句:

var strA="i love you!";

var strB= new String("i love you!");

这两个变量含有相同的字符序列,但数据类型却不同,前者为string,后者为object,在使用"=="操作符时,JavaScript会尝试各种求值,以检测两者是否会在某种情况下相等。所以下面的表达式结果为true: strA== strB。

第二种操作符是"严格"的"===",它在求值时不会这么宽容,不会进行类型转换。所以表达式strA=== strB的值为false,虽然两个变量持有的值相同。

有时代码的逻辑要求你判断两个值是否不相等,这里也有两个选择:"!="和严格的"!==",它们的关系就类似于"=="和"==="。

讨论:

"=="和"!="在求值时会尽可能地寻找值的匹配性,但你可能还是想在比较前进行显式的类型转换,以"帮助"它们完成工作。比如,如果想判断一个用户的输入值(字符串)是否等于一个数字,你可以让"=="帮你完成类型转换:

if(document.form1.txtAge.value== someNumericVar){...}

也可以提前转换:

if(parseInt(document.form1.txtAge.value)== someNumericVar){...}

如果你比较习惯于强类型的编程语言(比如C#,Java等),那么这里你可以延续你的习惯(类型转换),这样也会增强程序的可读性。

有一种情况需要注意,就是计算机的区域设置。如果用"<"和">"来比较字符串,那么JavaScript把它们作为Unicode来比较,但显然,人们在浏览网页时不会把文本当作Unicode来阅读:)比如在西班牙语中,按照传统的排序,"ch"将作为一个字符排在"c"和"d"之间。localeCompare()提供了一种方式,可以帮助你使用默认区域设置下的字符排序规则。

var strings;//要排序的字符串数组,假设已经得到初始化

strings.sort(function(a,b){ return a.localeCompare(b)});//调用sort()方法进行排序

6、字符串的查找

使用string的indexOf()方法:

strObj.indexOf(subString[, startIndex])

strObj为要进行判断的字符串,subString为要在strObj查找的子字符串,startIndex是可选的,表示查找的开始位置(基于0的索引),如果startIndex省略,则从strObj开始处查找,如果startIndex小于0,则从0开始,如果startIndex大于最大索引,则从最大索引处开始。

indexOf()返回strObj中subString的开始位置,如果没有找到,则返回-1。在脚本中,可以这么使用:

if(largeString.indexOf(shortString)!=-1)

{

//如果包含,进行相应处理;

}

也许一个字符串会包含另一字符串不止一次,这时第二个参数startIndex也许会派上用场,下面这个函数演示如何求得一个字符串包含另外一个字符串的次数:

function countInstances(mainStr, subStr)

{

var count= 0;

var offset= 0;

do

{

offset= mainStr.indexOf(subStr, offset);

if(offset!=-1)

{

count++;

offset+= subStr.length;

}

}while(offset!=-1)

return count;

}

String对象有一个与indexOf()对应的方法,lastIndexOf():

strObj.lastIndexOf(substring[, startindex])

strObj为要进行判断的字符串,subString为要在strObj查找的子字符串,startIndex是可选的,表示查找的开始位置(基于0的索引),如果startIndex省略,则从strObj末尾处查找,如果startIndex小于0,则从0开始,如果startIndex大于最大索引,则从最大索引处开始。该方法自右向左查找,返回subString在strObj中最后出现的位置,如果没有找到,返回-1。

onclick在js中的用法和js中如何监听click事件的问题分享结束啦,以上的文章解决了您的问题吗?欢迎您下次再来哦!

ai自定义换脸视频,ai换脸可以换自定义视频吗ai换脸可以换自定义视频吗国内十大人工智能公司?中国的十大人工智能公司都有哪些