1.事件绑定

  1. element.event = function(){
  2.             //执行代码
  3.         }
  5. 只能对单个对象执行事件，不能对集合执行事件

2.通过事件更改元素内容和样式

  1. innerHTML
  2. element.style.cssStyle=value;

3.用户和界面做交互

element.eventName = function(){
//执行代码
}

  1. <button id="btn">btn</button>
  2.     <script>
  3.         var btn = document.getElementById("btn");
  4.         btn.onclick = function(){
  5.             console.log("hello world");
  6.         }
  7.     </script>

4.innerHTML可以改变元素的内容

  1. <button id="btn">btn</button>
  2.     <script>
  3.         var btn = document.getElementById("btn");
  4.         btn.onclick = function(){
  5.             // this指向正在执行事件的当前的对象
  6.             console.log(this)
  7.             this.innerHTML = "change"
  8.         }
  9.     </script>

5.改变css的语法

  1. element.style.cssname<br />background-color backgroundColor<br />        font-size  fontSize
  1. <style>
  2.         button{
  3.             background-color: orange;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <button id="app">发送验证码</button>
  9.     <script>
  10.         var app = document.getElementById("app");
  11.         app.onclick = function(){
  12.             this.innerHTML = "60";
  13.             this.style.backgroudColor = "#999";
  14.             this.style.color = "pink";
  15.             this.style.fontSize = "40px";
  16.         }
  17.     </script>

6.点击元素隐藏

只能对单个对象执行事件，不能对集合执行事件

  1. <ul>
  2.         <li>html</li>
  3.         <li>css</li>
  4.         <li>js</li>
  5.     </ul>
  6.     <script>
  7.         var lis = document.getElementsByTagName("li");
  8.         // 只能对单个对象执行事件，不能对集合执行事件
  9.         for(var i = 0; i<lis.length;i++){
  10.             lis[i].onclick = function(){
  11.                 console.log(this);
  12.                 this.style.display = "none";
  13.             }
  14.         }
  15.     </script>

7.input

获取焦点/遗失焦点

  1. <input type="text" id="test">
  2.     <script>
  3.         var test = document.getElementById("test");
  4.         test.onfocus = function(){
  5.             this.style.backgroundColor = "red";
  6.         }
  7.         test.onblur = function(){
  8.             this.style.backgroundColor = "#fff";
  9.         }
  10.     </script>

8.鼠标移动 onmouse

  1. <p id="p">hello world</p>
  2.     <script>
  3.         var p = document.getElementById("p");
  4.         p.onmouseover = function(){            //鼠标放上去变红
  5.             this.style.backgroundColor = "red";
  6.         }
  7.         p.onmouseout = function(){            //鼠标移开变黄
  8.             this.style.backgroundColor ="yellow";
  9.         }
  10.     </script>

9.window.onload 页面加载完毕之后触发

二、事件 - 图1

10.window.onresize 窗口大小发生改变的时候触发

  1. <script>
  2.         window.onresize = function(){
  3.             console.log("窗口改变了");
  4.         }
  5.     </script>

11.window.scrollY 获取滚动条距离顶部的高度

导航条

  1. <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         #nav{
  7.             height: 50px;
  8.             background-color: red;
  9.             position: fixed;
  10.             width: 100%;
  11.             opacity: 0;
  12.         }
  13.         body{
  14.             height: 2000px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="nav"></div>
  20.     <script>
  21.         var nav = document.getElementById("nav");
  22.         window.onscroll = function(){
  23.             var scrollTop = window.scrollY;
  24.           //当滚动条滚动到距离顶部200px的时候导航条显示
  25.             if(scrollTop>200){
  26.                 nav.style.opacity = 1;
  27.             }else{
  28.                 nav.style.opacity = 0;
  29.             }
  30.             console.log(scrollTop);
  31.         }
  32.     </script>
  1. <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         #nav{
  7.             height: 50px;
  8.             background-color: red;
  9.             position: fixed;
  10.             width: 100%;
  11.             opacity: 0;
  12.         }
  13.         body{
  14.             height: 2000px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="nav"></div>
  20.     <script>
  21.         //当滚动条滚动到距离顶部200px的时候，导航条完全显示
  22.         var nav = document.getElementById("nav");
  23.         //1、对窗口执行监听
  24.         window.onscroll = function(){
  25.             //2、获取滚动条的高度
  26.            var scrollTop = document.documentElement.scrollTop;
  27.            //3、得到透明度
  28.            if(opacity>1){
  29.                opacity=1;
  30.            }
  31.            var opacity = scrollTop/200;
  32.            nav.style.opacity = opacity;
  33.            console.log(opacity);
  34.         }
  35.     </script>

12.rem 相对于根元素（html）的font-size而言的

二、事件 - 图2

12.1.适配方案

  1. <script>
  2.         var html = document.getElementsByTagName("html")[0];
  3.         var ww = window.innerWidth;   //获取设备宽度
  4.         var rem = ww/10;        //得到rem单位
  5.         html.style.fontSize = rem+"px";
  6.         window.onresize = function(){
  7.             var ww = window.innerWidth;    //获取窗口的宽度
  8.             html.style.fontSize = ww/10+"px";
  9.         }
  10.     </script>

13.onchange 只有输入框内容发生改变的时候才会触发

  1. <input type="text" id="input">
  2.     <script>
  3.         var input = document.getElementById("input");
  4.         input.onchange = function(){
  5.             console.log("hello");
  6.         }
  7.     </script>

14.键盘按下松开

  1. <input type="text" id="app">
  2.     <script>
  3.         //按住
  4.         var app = document.getElementById("app");
  5.         app.onkeypress=function(event){
  6.             console.log(event);
  7.         }
  8.     </script>
  11. <input type="text" id="app">
  12.     <script>
  13.         //在键盘键松开时
  14.         var app = document.getElementById("app");
  15.         app.onkeyup = function (event) {
  16.             console.log(event);
  17.         }
  18.     </script>

15.内联事件

  1. <!-- 内联事件 -->
  2.     <button onclick="go()">btn</button>
  3.     <script>
  4.         function go(){
  5.             console.log("hello world");
  6.         }
  7.     </script>

16.获取自定义属性的值 event.target.dataset

  1. <!-- 自定义属性     data-aid="aa"  前面加上data-->
  2.     <div id="test" data-aid="12133">div</div>
  3.     <script>
  4.         var test = document.getElementById("test");
  5.         test.onclick = function(event){
  6.             //获取自定义属性的值event.target.dataset
  7.             console.log(event.target.dataset);
  8.         }
  9.     </script>

17.定时器

  1. <script>
  2.         // window的方法
  3.         //间隔一定的时间触发，并且只会触发一次
  4.         setTimeout(function(){
  5.             console.log("hello")
  6.         },1000)  //1000毫秒
  7.         //间隔一定的时间重复触发
  8.         setInterval(function() {
  9.             console.log("world");
  10.         },2000)
  11.     </script>

17.1清除定时器 clearInterval

clearTimeout setTimeout
clearInterval setInterval

  1. <button id="clear">清除定时器</button>
  2.     <script>
  3.        var timer= setInterval(function () {
  4.                 console.log("world");
  5.             }, 2000)
  6.             console.log(timer);
  7.             var clear = document.getElementById("clear");
  8.             clear.onclick = function(){
  9.                 clearInterval(timer);
  10.             }
  11.     </script>

17.2重复触发 setInterval

三秒计时器

  1. <button id="btn">3</button>
  2.     <script>
  3.         var num = 3;
  4.         var btn = document.getElementById("btn");
  5.         var timer = setInterval(function(){   //每间隔一秒触发
  6.             num--;
  7.             console.log(num);
  8.             if(num>=0){
  9.                 btn.innerHTML = num;  //修改num数字
  10.             }else{
  11.                 clearTimeout(timer)  //清除定时器
  12.             }
  13.         },1000)
  14.     </script>

17.3单个触发 setTimeout

  1. <button id="btn">3</button>
  2.     <script>
  3.         var btn = document.getElementById("btn");
  4.         var num = 3;
  5.         function go(){
  6.             setTimeout(function(){
  7.                 num--;
  8.                 if(num >=0){
  9.                     btn.innerHTML = num;
  10.                     go();
  11.                 }
  13.             },1000)
  14.         }
  15.         go();
  16.     </script>