JavaScript与HTML之间的交互式通过事件实现的

onclick 点击事件
onfocus 获取焦点
onblur 失去焦点
onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开
onload页面加载时触发
onchange域的内容改变时发生
onsubmit//表单中的确认按钮被点击时发生
//有事件一定有对应一个处理结果，用函数表示
onresize//浏览器的尺寸发生改变
onscroll //窗口滚动
onchange事件支持的标签input,select,textarea

onclick onmouseover onmouseout

  1.  <style>
  2.         /* div:hover{
  3.             background: #333;
  4.         } */
  5.     </style>
  6. </head>
  7. <body>
  8.     <div id="test">hello world</div>
  9.     <script>
  10.         /* 内容,样式,结构 */
  11.         var test = document.getElementById("test");
  12.         /* 
  13.         事件
  14.         onclick 点击事件
  15.         onmouseover 鼠标移到某元素之上
  16.         onmouseout 鼠标从某元素移开
  17.          */
  18.         test.onclick = function(){
  19.             /* this在事件中指向正在执行事件的当前对象 */
  20.             this.style.color = "red"
  21.             /* innerHTML */
  22.             this.innerHTML = "change"
  23.         }
  24.         /* 鼠标悬停的事件 */
  25.         test.onmouseover = function(){
  26.             this.style.backgroundColor = '#333'
  27.         }
  28.         /* 鼠标移除的事件 */
  29.         test.onmouseout  = function(){
  30.             this.style.backgroundColor = '#fff'
  31.         }
  32.     </script>
  1.              ![test.gif](https://cdn.nlark.com/yuque/0/2019/gif/446381/1567238282219-42af3eef-4ee9-445a-98e5-c71b1d093c1c.gif#align=left&display=inline&height=164&name=test.gif&originHeight=164&originWidth=276&size=36779&status=done&width=276)

onfocus onblur

  1.  <input type="text" id="input" value="good">
  2.     <script>
  3.         /* onfocus --获取焦点 
  4.         onblur --失去焦点
  5.         */
  6.         var input  = document.getElementById("input");
  7.         input.onfocus  =  function(){
  8.             this.style.backgroundColor = "red"
  9.         }
  10.         input.onblur  = function(){
  11.             this.style.background = "green"
  12.         }
  13.     </script>

test2.gif

onload onchange

  1.     <input type="text" id="input">
  2.     <script>
  3.         /* 
  4.         onload 等DOM树以及图片相关资源加载完毕,再执行函数中的代码
  5.          */
  6.         window.onload = function(){
  7.             var input = document.getElementById("input");
  8.             input.onchange = function(event){
  9.                 console.log(this.value)
  10.             }
  11.         }
  12.     </script>

test.gif

onresize

  1. <script>
  2.         window.onresize = function(){
  3.             /* window.innerWidth  获取窗口的width */
  4.             console.log(window.innerWidth)
  5.         }
  6.     </script>
  1.          ![test4.gif](https://cdn.nlark.com/yuque/0/2019/gif/446381/1567250263227-a9bf2140-6132-48a8-8196-87f64087be04.gif#align=left&display=inline&height=476&name=test4.gif&originHeight=476&originWidth=657&size=669984&status=done&width=657)

onscroll

  1. <style>
  2.         body{
  3.             height: 2000px;
  4.         }
  5.         .nav{
  6.             height: 60px;
  7.             position: fixed;
  8.             background: transparent;
  9.             left:0;
  10.             top:0;
  11.             width:100%;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="nav" id="nav">导航</div>
  17.     <script>
  18.         /* onscroll 滚动事件 */
  19.         var nav = document.getElementById("nav")
  20.         window.onscroll =  function(){
  21.             /* 获取滚动条距离顶部的高度 */
  22.             var scrollTop = document.documentElement.scrollTop;
  23.             /* 当滚动条距离顶部的高度达到300时候完全显示 */
  24.             var opacity = scrollTop/300;
  25.             if(opacity>1){
  26.                 opacity = 1
  27.             }
  28.             nav.style.opacity = opacity;
  29.             nav.style.backgroundColor = "red"
  30.         }
  31.     </script>
  1.        ![test5.gif](https://cdn.nlark.com/yuque/0/2019/gif/446381/1567250776401-0eab8450-35ad-4181-bb6b-0149db311c90.gif#align=left&display=inline&height=476&name=test5.gif&originHeight=476&originWidth=657&size=82618&status=done&width=657)