javaScript事件基础 - 编程耽误的厨子

　　事件基础

1.事件简介

1.1事件是可以被JavaScript监听到的行为，简单理解就是触发--响应机制

1.2事件的三要素：事件源、事件类型、事件处理程序

<body>
    <button id="btn">详情</button>
<script> 
    // 1事件源:获取id为btn的对象
    var btn=document.getElementById('btn')
    //2事件类型：如何触发 是什么事件比如说鼠标点击事件(onclick)
    //3事件处理程序：通过一个函数赋值的方式
    btn.onclick=function(){
    alert('详情信息');
  }
  </script>
</body>

1.3改变元素的内容

<body>
    <button id="btn">显示当前系统时间</button>
    <div id="divtime">某个时间</div>
<script> 
    //获取元素
    var  btn= document.getElementById('btn')
    var  divtime=  document.getElementById('divtime')
    //绑定事件
    btn.onclick=function(){
      divtime.innerText=getDate();
    }
    function getDate(){
      var date=new Date();
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var dates=date.getDate();
      var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
      var day=date.getDay();
      return '今天是:'+year+'年'+month+'月'+dates+'日'+arr[day];
    }
  </script>
</body>

1.4表单元素的属性操作

<body>
   <button>按钮</button>
    <input type="text" value="请输入内容">
    
<script>  
    //获取元素
   var btn= document.querySelector('button');
    var input= document.querySelector('input');
    //绑定事件
    btn.onclick=function(){
      input.value='被点击了';
      //如果需要某个表单被禁用了 不能点击了 disabled
      // btn.disabled=true;
      //  也可以使用this
      this.disabled=true;
    }

      </script>

1.5样式属性操作可以通过js修改元素的大小、颜色和样式

  <style>
      div{
        width: 200px;
        height: 400px;
        background-color: red;

      }
  </style>
</head> 
  <div>文本</div>
<script>
   var divtest=document.querySelector('div');
   divtest.onclick=function(){
     this .style.backgroundColor='blue';
   }
</script>
  
</body>

1.6使用element.className类名样式操作（针对多个元素）

  <style>
 
      .chenage{
        background-color: orange;
        font-size: 20px;
        text-align: center;
      }
  </style>
</head> 
  <div>文本</div>
<script>
   var divtest=document.querySelector('div');
   divtest.onclick=function(){
     this.className='chenage'
   }
</script>
  
</body>

posted on 2022-04-10 14:33 编程耽误的厨子阅读(63) 评论(0) 收藏举报

刷新页面返回顶部