• 技术文章 >Web开发 >JavaScript

    JavaScript事件有什么作用

    小妮浅浅小妮浅浅2021-09-29 10:49:36原创232

    1、页面加载时触发事件。

    2、当页面关闭时触发事件。

    3、用户点击按钮执行动作。

    4、验证用户输入内容的合法性。

    5、HTML事件发生在HTML上。

    当JavaScript用于HTML页面时,JavaScript可以触发这些事件。

    实例

     <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>事件冒泡</title>
              <style type="text/css">
                  #box1{
                      width: 300px;
                      height: 300px;
                     background-color: red;
                 }
                 #box2{
                     width: 200px;
                     height: 200px;
                     background-color: green;
                 }
                 #box3{
                     width: 100px;
                     height: 100px;
                     background-color: blue;
                 }
             </style>
         </head>
         <body>
             <div id="box1">
                 <div id="box2">
                     <div id="box3"></div>
                 </div>
             </div>
             <!-- 插入JS代码 -->
             <script type="text/javascript">
                 //获取所有的box
                 var box1=document.getElementById('box1');
                 var box2=document.getElementById('box2');
                 var box3=document.getElementById('box3');
                 //给三个box注册点击事件  建议使用数组
                 var boxs=[box1,box2,box3];
                 for(var i=0;i<boxs.length;i++){
                     boxs[i].addEventListener('click',outPut,true);
                 }
                 //点击事件函数
                 function outPut(){
                     console.log(this.id);
                 }
             </script>
         </body>
     </html>

    以上就是JavaScript事件的作用,希望对大家有所帮助。更多Javascript学习指路:Javascript

    专题推荐:javascript 事件
    品易云
    上一篇:JavaScript属性描述对象的操作 下一篇:js中load事件如何理解

    相关文章推荐

    • JavaScript全局作用域是什么• JavaScript局部作用域的分类• JavaScript作用域链的形成• JavaScript中call方法的使用• JavaScript对象原型__ proto__的介绍• Javascript如何用原型对象继承父类型• JavaScript预加载图片的操作• JavaScript原型链继承是什么• JavaScript中构造函数是什么• JavaScript创建类的方法• JavaScript代理模式的分类• JavaScript组合模式是什么• JavaScript享元模式是什么• javascript new调用构造函数• JavaScript属性描述对象的操作

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网