【JavaScript】注册事件

举报
执久呀 发表于 2022/02/18 12:09:07 2022/02/18
【摘要】 ​目录 js中创建类和对象？null、undefined、NaN的区别等同和全等运算符 js常用事件 回调函数的概念回调函数的特点：注册事件的两种方式： 常用的写法：代码的执行顺序load事件解决： 通过prototype可以给一个类动态的扩展函数和属性 <script type="text/javascript"> Product=function(pno,pname,price...

​


目录


 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();

​

 js中创建类和对象？

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);//传入多个参数只会取前两个

null、undefined、NaN的区别

<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常用事件

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...");
}
}

方式②：是使用纯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事件页面全部元素加载完毕才发生

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"/>


​

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入