脚本宝典收集整理的这篇文章主要介绍了【JavaScript】注册事件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
js中创建类和对象?
null、undefined、NaN的区别
等同和全等运算符
js常用事件
回调函数的概念
回调函数的特点:
注册事件的两种方式:
常用的写法:
代码的执行顺序
load事件解决:
通过prototype可以给一个类动态的扩展函数和属性
<script type="text/javascript">
Product=function(pno,pname,price){
//属性
this.pno=pno;
this.pname=pname;
this.price=price;
//函数
this.getPrice=function(){
return this.price;
}
}
var kong=new Product(100,"🍅",5);
var pri=kong.getPrice();
alert(pri);
</script>
//可以通过prototype这个属性来给类动态扩展属性和函数
Product.prototype.getName=function(){
return this.pname;
}
//调用后期动态扩展后的函数
var chao=kong.getName();
alert(chao);
也可以通过prototype给String类动态扩展属性和函数
String.prototype.hello=function(){
alert("hello 🍉")
}
//调用扩展后的函数
"abc".hello();
User=function(uname,uno){
this.uname=uname;
this.uno=nuo;
}
//创建对象(下列都可以)
var u1=new User();
var u2=new User("张三","1");
var u3=new User("李四","1",3);//传入多个参数只会取前两个
<script type="text/javascript">
// null NaN undefined 数据类型不一致。
alert(typeof null); // "object"
alert(typeof NaN);//"number"
alert(typeof undefined);// "undefined"
// null和undefined可以等同.
alert(null==NaN);// false
alert(null==undefined);// true
alert(undefined==NaN);// false
</script>
在JS当中有两个比较特殊的运算符
(等同运算符"==":只判断值是否相等)(全等运算符"===":既判断值是否相等,又判断数据类型是否相等)
alert(null===NaN);// false
alert(null===undefined);// false
alert(undefined===NaN);// false
小demo:
alert(1==true);//true,值等同所以为true,boolean()函数将1转换为true
alert(1===true);//false,值等同但数据类型不同所以为false
JS中的事件:blur失去焦点 focus获得焦点
click鼠标单击 dblclick鼠标双击
keydown键盘按下 keyup键盘弹起
mousedown鼠标按下 mouseover鼠标经过 mousemove鼠标移动 mouseout鼠标离开 mouseup鼠标弹起
reset表单重置 submit表单提交
change下拉列表选中项改变,或文本框内容改变 select文本被选定 load页面加载完毕(整个html页面中所有元素全部加载完成后发生)
任何一个事件都会对应一个事件句柄,事件句柄就是在事件前添加on。
onXXX这个事件句柄出现在标签属性位置上。(事件句柄以属性的形式存在)
下面代码的含义是:将sayHello函数注册到按钮上,等待click事件发生后,该函数被浏览器调用我们称这个函数为回调函数。
如:
function sayHello(){
alert("hello");
}
<input type="button" value="按钮" onclick="sayHello();"/>
当点击这个按钮时,会弹出hello
sayHello()被称为为回调函数
自己把这个函数写出来,但是这个函数不是自己调用的,而是有其他程序调用这样的函数被称为回调函数。
java中也有回调函数的机制:
//java中也有回调函数机制:
public class MyClass{
public static void main(Stringl] args){
//主动调用run()方法,站在这个角度看run()方法叫做正向调用。
run();
}
//站在run方法的编写者角度来看这个方法,他把run方法叫做回调函数。
public static void run(){
System.out.println("run...");
}
}
方式①:前面提到的直接将onclick写入标签中:
<input type="button" value="按钮" onclick="sayHello();"/>
方式②:是使用纯js代码完成事件的注册。
函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调
一般步骤:
<input type="button" value="按钮1" id="mybtn" />
<script type="text/javascript">
function doSome(){
alert("do some!");
}
//第一步:先获取这个按钮对象(document是全部小写,内置对象,可以直接用。document就代表整个HTML页面)
var btnObj =document.getElementById("mybtn");
//第二步:给按钮对象的onclick属性赋值
btnObj.onclick=doSome;// 注意:千万别加小括号btnObj.onclick=doSome();这是错误的写法
//这行代码的含义是将回调函数doSome注册到click事件上,
<input type="button" value="按钮2" onclick="sayHello()"/>
var mybtn1=document.getElementById("mybtn1");
mybtn1.onclick = function(){// 这个凶函没有名字,叫做匿名函数,这个匿名函故也是一个回调函故。
alert("test....");//这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用。
<input type="button" value="按钮3" id="mybtn2" />
<script type="text/javasvript">
document.getElementById("mybtn2").onclick =function(){
alert("🐅虎虎生威");
</script>
错误示例:
//把input按钮放到script下面则getElementById访问不到id事件,因为是自上而下执行
<script type="text/javasvript">
document.getElementById("mybtn2").onclick =function(){//返回null,因为程序到这里id还没加载到内存
alert("🐅虎虎生威");
</script>
<input type="button" value="按钮3" id="mybtn2" />
这时我们可以采用load事件
load事件页面全部元素加载完毕才发生
写法①:
<body onload="ready()">
<script type="text/javascript">
function ready(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("hello javascript");
}
}
</script>
<input type="button" value="按钮" id="btn" />
</body>
写法② :
<script type="text/javascript">
window.onload=read;
function ready(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("hello javascript");
}
}
</script>
<input type="button" value="按钮" id="btn" />
常用写法③:
<script type="text/javascript">
window.onload =function(){//页面打开就注册
document.getElementById("btn").onclick=function(){//页面加载完就注册
alert("hello javascript");
}
}
</script>
<input type="button" value="按钮1" id="btn" />
详细分析:
这是两个回调函数的结合,外层回调函数在页面加载完成后执行,内层在点击事件发生后执行。
外层起名叫a函数,内层叫b函数
页面加载的过程中,将a函数注册给了load事件页面加载完毕之后load事件发生了,此时执行回调函数a回调函数a执行的过程中,把b函数注册给了id="btn"的click事件当id="btn"的节点发生click事件之后,b函数被调用并执行。
运行结果:
小text:
点击将文本框变成复选框
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
var mytext=document.getElementById("mytext");
//一个节点对象只要有的都可以"."
mytext.type="checkbox";
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="点击将文本框变为复选框" id="btn"/>
以上是脚本宝典为你收集整理的【JavaScript】注册事件全部内容,希望文章能够帮你解决【JavaScript】注册事件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。