JS---event事件

目录

学习内容：

一、UI事件(不一定与用户操作有关的事件)

二、鼠标事件

三、键盘事件

四、表单事件

五、阻止冒泡

六、阻止默认

七、事件冒泡、事件捕获

八、事件类型:

九、添加滚轮事件：

十、localStorage   sessionStorage  cookie

十一、闭包  

十二、事件委托：

---

学习内容：

一、UI事件(不一定与用户操作有关的事件)

  1.load 当页面完全加载后在window上触发，图片也可以触发load事件

  2.resize 当窗口大小变化时在window上触发

  3.scroll 当用户滚动带滚动条的元素中的内容时，在该元素上面触发

二、鼠标事件

     1.事件类型：

      onclick (单击)

      ondblclick (双击)

      oncontextmenu(右键菜单)

      onmouseover(移入)

      onmouseout(移出)

      onmouseenter(移入)

      onmouseleave(移出)

      onmousedown(按下)

      onmouseup(抬起)

      onmousemove(移动)

2.坐标位置：

     1)screenX 在屏幕中的x坐标

     2)screenY 在屏幕中的y坐标

     3)相对于body:

        (1)clientX 表示事件发生时鼠标指针在视口中的水平坐标(不包含滚动距离)

        (2)clientY 在视口中的垂直距离

        (3)IE没有一下俩个属性:

               pageY 在页面中的y坐标

               pageX 在页面中的x坐标（包含滚动距离）

3.获取点击目标的坐标(有兼容性)：

 offsetY  offsetX

4.事件对象:

 例子：

鼠标按下事件：

         当前点击点的坐标(x1,y1)

         当前d的偏移量 l1,t1

d.onmousedown = function (e) {

        var x1 = e.clientX;

        var y1 = e.clientY;

        var l1 = this.offsetLeft;

        var t1 = this.offsetTop;


        鼠标移动事件：

          当前指针的坐标(x2,y2)

          计算当前的left和top值

          l2=l1+(x2-x1)

        window.onmousemove = function (e) {

            var l2 = l1 + e.clientX - x1;

            var t2 = t1 + e.clientY - y1;

            d.style.left = l2 + 'px';

            d.style.top = t2 + 'px';

        }

}


鼠标抬起事件：

    d.onmouseup=function(){

        window.onmousemove=function(){


        }

}

三、键盘事件

 1.keydown 当用户按下键盘说的字符键时触发，按住不动将重复触发

      Keyup 当用户释放键盘上的键时触发

      event.keyCode键码

2.keypress 当用户按下键盘上的字符键时触发，按住不动将重复触发

    event.charCode 键码

3.shiftkey、altkey、ctrllkey

四、表单事件

  1.focus 元素获得焦点时触发

  2.blur 元素失去焦点时触发

  3.Submit( ) 提交表单

  4.change当input、textarea元素value值改变且失去焦点时、select元素选项时触发

  5.input当input、textarea 元素value 值改变同步触发事件，

     select 元素选项卡改变时触发

  6.change于input时间的区别：

     change 内容被修改并且失去焦点

     Input 内容被修改

五、阻止冒泡

  1.fn stopPropagation( ) 非IE

Eg:  

 阻止冒泡：

        document.querySelector("button").onclick=function(e){

        e.stopPropagation();

        console.log("button");

}

  2.pro cancelBubble=true  IE

六、阻止默认

  1.fn preventDefault( )  非IE

Eg:

阻止默认

            window.oncontextmenu=function(e){

                 e.preventDafault();

            }

2.pro returnValue=true  IE

七、事件冒泡、事件捕获

      事件冒泡：同类型事件，子级向父级传递

      事件捕获：同类型事件，父级向子级传递

八、事件类型:

 Over out与enter leave的区别：

     建议使用enter 与leave

         over与out 在指针进入自己标签时会触发

     事件对象：

         当前事件所有的信息

九、添加滚轮事件：

1.el.addEventListener(type, function (e) {

        var isDown = false;

        if (isFireFox) {

            // HF  与非HF的兼容

            isDown = e.detail < 0;

        } else {

            //非HF

            // wheelDelta 向上滑动是小于0的

            isDown = e.wheelDelta > 0

        }

        callback(isDown);

    }, isCap);

}

2.el元素  

3.callpack  回调元素

4.isCap  是否捕获

     *****滚轮代码例子：

var nowScale = 1.0;  //当前的缩放倍数

     var maxScale = 3.0;  //最大的缩放倍数

     var minScale = 0.25;  //最小的缩放倍数

       规定： 向上滑动 放大 向下滑动 缩小

    myWheel(img, function () {

        if (isDown) {

            //缩小

            nowScale -= 0.05;

            nowScale = nowScale < minScale ? minScale : nowScale;

        } else {

            //放大

            nowScale += 0.05;

            nowScale = nowScale < maxScale ? minScale : nowScale;

        }

        img.style.transform = `scale(${nowScale})`;

}, false);

十、localStorage   sessionStorage  cookie

      localStorage： 本地存储

      sessionStorage： 会话存储

1.数据管理方式不同、区别：

       localStorage 数据存储在本地，没有过期时间，需要手动删除  存储量大

       sessionStorage 数据依赖浏览器，当页面关闭或者退出浏览器时清空数据 存储量大

       cookie 可以为数据设置过期时间  存储量小,可以与后台共用

2. 清空所有数据

       localStorage.clear()   //只能存储基本数据类型 

3.什么是JSON？

     JSON是一种特殊格式的字符串，可以与数组、对象进行转换，常用于前后端数据交互、文件配置说明

十一、闭包  

重点：

          函数内实现另一个函数

          局部变量数据持久化

          造成一定的内存压力

十二、事件委托：

       把事件添加给标签的父元素

      通过事件对象e.target来实现具体的操作

  Eg:  document.body.οnclick=function(e){

          console.log(e.target.innerHTML);

    }