前端学习笔记

day22
1、事件

1.含义：

访问web页面得用户引起的一系列的操作，事件是人机交互的重要组成部分，如果用户的某个操作，需要给用户反馈，则用到事件处理函数

ele.eventName = function () {};

2.分类：

鼠标事件、html事件、键盘事件

3.鼠标事件

1）onclick 点击

var oBtn = document.querySelector("#bnt");
oBtn.onclick = function () {
     console.log("ok");}

2)ondblclik 双击

oBtn.ondblclick = function () {
         console.log("双击");
       }

3)onmouseover 鼠标移入

oBtn.onmouseover = function(){
    console.log("鼠标移入")
}

4）onmouseout 鼠标移出

oBtn.onmouseout = function(){
    console.log("鼠标移出")
}

5）onmousedown 鼠标按下（不松）

oBtn.onmousedown= function(){
    console.log("鼠标按下")
}

6）onmouseup 鼠标释放

oBtn.onmouseup=function(){
    console.log("鼠标释放")
}

7)onmousemove 鼠标移动： 只要鼠标在相应区域移动即可触发，触发次数不知。

 oBtn.onmousemove = function () {
     console.log("鼠标移动");}

4.html事件

 <input type="text" />
    <input type="button" value="ceshi" id="btn" />
    <div></div>

1）onselect 选中文本时触发

oTxt.onselect = function () {
  console.log("选中文本时触发"); };

2）onresize 窗口尺寸改变时触发

window.onresize = function () {
        console.log("尺寸改变");}

表示距离的属性clientWidth/clientHeight(不包含滚动条的尺寸，即可视区域)

 console.log(
          document.documentElement.clientWidth,
          document.documentElement.clientHeight  );

3）onscroll 滚动条滚动时触发

 window.onscroll = function () {
       console.log("滚动条滚动");}

scrollTop/scrollLeft 竖直方向滚动条滚动距离和水平方向滚动条滚动的距离  是可读可写的属性

console.log(
          document.documentElement.scrollTop,
          document.documentElement.scrollLeft）
  btn.onclick = function () {
        document.documentElement.scrollTop = 0; };

4）onfocus 获得焦点时触发

oTxt.onblur = function () {
        console.log("失去焦点时触发");      };

5）onchange 改变内容时触发

 oTxt.onchange = function () {
        console.log("内容改变且失去焦点时触发");  }; 

6）文本框键入时触发

 oTxt.oninput = function () {
        console.log("文本框有键入时触发"); }; 

7）onsubmit表单提交/onreset表单重置

2、定位 position

1)属性：static(默认)、relative(相对定位，参照物是自己)、absolute(绝对定位，参照物是带定位属性的父级元素)、fixed(固定定位，只和可视区域有关)，位置改变使用left和top

2)relative

.outer {
        position: relative;
        width:200px;
        height:200px;
        background-color: red;
        top:100px;
        left:100px;
      }

3)absolute

.inner {
        position: absolute;
        left: 10px;
        top:  10px;
        width: 10px;
        height:10px;
        background-color: blue;
      }

4)fixed

<style>
        *{
            margin: 0;
            padding: 0;
           
        }
        ul{
            list-style: none;
            position: fixed;
            right:0;
            top: 100px;
        }
        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }
        div{
            height: 600px;
            border: 1px solid #ccc;
        }  /*锚点：实现页面不同区域的跳转，使用a链接  <a href="#锚点名字"></a> <div id="锚点名字"></div> 
        */
       
     <ul>
        <li><a href="#a">京东秒杀</a></li>
        <li><a href="#b">京东秒</a></li>
        <li><a href="#c">京东</a></li>
        <li><a href="#d">京</a></li>
        <li><a href="#e">京东秒杀o</a></li>
    </ul>
    <div id="a">京东秒杀</div>
    <div id="b">京东秒</div>
    <div id="c">京东</div>
    <div id="d">京</div>
    <div id="e">京东秒杀o</div> 

3、offsetleft/offsetright  距离定位父级左边距和上边距

   #outer {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }
      #inner {
        position: relative;
        left: 20px;
        top: 75px;
        width: 100px;
        height: 100px;
        margin-left: 50px;
        background-color: blue;
      }
  console.log(inner.offsetLeft, inner.offsetTop);