标签：function console log Js 学习 window day11 事件 arguments

事件

概述：

事件是一个流程，就是一个监听（预备）一个触发（当前内容执行了（进行处理）用户在页面上操作（监听这个操作），然后我们要调用函数来处理（进行处理）。

监听过程--触发过程--处理过程 这个流程就是完整的一个事件

事件的模式

内联模式

<div onclick="方法名（）"></div>

脚本模式

document.queryselector('div').onclick = function(){
//操作

}//他也会被解析

内联里面调用的方法的this会指向window（传递this）脚本模式的this会指向当前的调用者。

事件的分类：

鼠标事件（鼠标触发的mouse开头都是鼠标事件）

click单击事件

dblclick双击事件

mouseover鼠标移进（自己及里面的都能触发）

mousemove鼠标移动事件

mouseout鼠标移出

mouseenter鼠标移进（只会是自己可以触发）

mouseseleave鼠标鼠标移出

mousedown鼠标按下

mouseup鼠标弹起

键盘事件(键盘触发key开头的都是键盘事件)

keyup弹起

keydown按下

keypress字符键按下

// 除非是输入框，不然是不能调用键盘事件 都是window
    window.onkeydown = function(){
        console.log('键盘按下');
    }
    window.onkeyup = function(){
        console.log('键盘弹起');
    }
    window.onkeypress = function(){
        console.log('字符键按下');
    }

HTML事件（系统事件 被动触发的）

load加载

close关闭

change输入框的value值发送表示

select只有输入框才能触发（选择里面的内容）

focus获取焦点

blur失去焦点

reset重置

submit提交

scroll滚动条滚动

// load 窗口的加载 图片的加载等等
    window.onload = function(){
        console.log('窗口加载');
    }
    window.onunload = function(){
        console.log('窗口卸载');
    }
    window.onclose = function(){
        console.log('窗口关闭');
    }
    var input = document.querySelector('input')
    input.onchange = function(){
        console.log('value值发生变化了');
    }
    input.onselect = function(){//禁止复制粘贴
        console.log('当前内容被选择');
    }
    input.onfocus = function(){
        console.log('获取焦点');
    }
    input.onblur = function(){
        console.log('失去焦点');
    }
    // form表单的事件 onsubmit提交的时候触发 onreset 重置的时候触发
    document.querySelector('form').submit = function(){
        console.log('表单提交');
    }
    document.querySelector('form').onreset = function(){
        console.log('表单重置');
    }
    window.onscroll = function(){
        console.log('滚动条滚动');
    }

事件的组成

触发者.on+对应的事件名 = 处理的函数 对应的事件组成

触发者一般来说是对应的元素对象

事件名 就是上述分类的事件名

处理函数是由自己定义的函数（hanlder）（这个函数是事件驱动执行）

event（事件源）

触发者.on+对应的事件名 = 处理的函数 对应的事件组成

• 处理函数 是一个function作为一个function他具备一个argument（参数数组）
• 因为arguments[0]是获取的第一个参数 那么我在对应的处理函数里面写一个参数 这个参数就是对应的arguments[0]
• arguments[0]返回的对象是一个event类型的对象，这个对象同时又是全局的对象，所以他归属于window，可以写成window.event 或者省略对应的window（event）

// e是形参 相当于第一个形参 常见的写法 这个形参的名字叫 e 或者 event
    window.onkeydown = function(){
        console.log(e);//这个就是arguments[0] event类型对象
        // 他设计了一个event对象 他是一个全局的变量 window.event
        // ie为了兼容 我们会写出兼容写法
        e = e || event
        console.log(a.altKey);
        console.log(a.key);
    }

属性

坐标相关的属性

// 打印完 看到arguments具备一个参数 是一个对象（pointer）
        console.log(arguments);
        console.log(arguments[0]);
        console.log(arguments[0].x);//鼠标x坐标 （不包含不可视区域
        console.log(arguments[0].y);//鼠标y坐标页面上
        console.log(arguments[0].pageX);//得到鼠标在页面上的x坐标 （包含不可视区域
        console.log(arguments[0].pageY);// 得到鼠标在页面上的y坐标 （包含不可视区域）
        console.log(arguments[0].layerX);//默认是得到鼠标基于页面的x坐标
        console.log(arguments[0].layerY);//默认是得到鼠标基于页面的y坐标 当你添加定位以后他是基于定位元素的坐标
        console.log(arguments[0].clientX);//得到鼠标在可视区域内x的坐标（不包含不可视区域
        console.log(arguments[0].clientY);// 得到鼠标在可视区域内的y坐标 （不包含不可视区域）
        // 当前点击元素内的坐标
        console.log(arguments[0].offsetX);//得到鼠标在偏移元素内容的x坐标 （当前添加事件的元素里面的坐标 不包含border）
        console.log(arguments[0].offsetY);//得到鼠标在偏移元素内容的坐标 （当前添加事件的元素里面的坐标 不包含border
        // 屏幕坐标
        console.log(arguments[0].screenX);
        console.log(arguments[0].screenY);

按键相关的属性

鼠标相关的内容

事件触发的相关属性

键盘事件相关的内容（需要键盘来触发的事件）

// 按键的相关属性
        console.log(arguments[0].ctrlKey);
        console.log(arguments[0].altKey);
        console.log(arguments[0].shiftKey);
        // 鼠标的相关内容
        // button返回的值为number类型（0表示左键 1表示中间 2表示右键（但是不显示
        console.log(arguments[0].button);
        // 事件触发的相关属性
        console.log(arguments[0].type);//事件触发类型
        console.log(arguments[0].target);//目标对象 事件触发元素真实触发的元素
        console.log(arguments[0].currentTarget);//目标对象 表示事件触发的元素（返回当前添加事件的元素
        console.log(arguments[0].bubbles);//是否冒泡
// 键盘相关的内容（需要键盘来触发的事件
        // key属性 获取当前的按键
        // keyCode属性 获取大写的ASCII码
        // charCode属性 字符键press事件的ASCII码
    window.onkeypress = function(){
        console.log(arguments[0].key);
        console.log(arguments[0].keyCode);
        console.log(arguments[0].charCode);
    }
    //e是形参 相当于第一个形参
    window.onkeydown = function(e){
        console.log(e);//这个就是arguments[0]
        // 他设置一个event对象 他是一个全局变量 window.event 
        //ie为了兼容 我们会写成
        e = e || window.event //兼容写法
        console.log(e.key);
        console.log(e.keyCode);
        
    }
    function fn(a,b,c){
        console.log(arguments);
        console.log(arguments[0]);
        console.log(a);
    }
    fn(1,2,3)

事件流

概述:事件流指代的是事件的执行流程，多个盒子嵌套相同事件，这个时候你触发一个盒子的事件，并不会只执行一个盒子的事件的处理函数，而是全部执行。

事件流的两种模式

冒泡模式（浏览器采用的）

冒泡模式指代的是事件从里到外逐个执行

阻止事件冒泡

e.stopPropagation()函数 （*）（stop）

document.querySelector('a').onclick = function(e){
        e = e || event
        e.preventDefault()
        console.log('hello');
    }
    // 阻止表单的默认提交行为
    document.querySelector('form').onsubmit = function(e){
        e = e || event
        // e.preventDefault()
        e.preventDefault?e.preventDefault():e.returnValue = false//兼容写法
        console.log('submit');
    }
    // 对按钮无效阻止
    document.querySelector('input').onsubmit = function(e){
        e = e || event
        e.preventDefault()
        console.log('submit');
    }
    // 第三种阻止方案
    document.querySelector('a').onsubmit = function(e){
        e = e || event
        console.log('hello');
        return false//函数的结束 gc垃圾回收机制会准备回收
    }

 拖拽

思路

• 给拖拽的元素添加mousedown的事件 记录当前点击的位置
• 给对应的容器添加mousemove事件 记录每次移动的位置
• 给对应的容器添加mouseup事件 清除上述mousemove事件

代码实现：

// 获取div
    var box = document.getElementById('box')
    // 给document添加mousedown事件
    box.onmousedown = function(e){
        e = e || event
        //记录的是鼠标在div里面的位置
        // var x = e.offsetX
        // var y = e.offsetY
        // var x = e.pageX - div离页面的位置
        var x = e.pageX - box.offsetLeft
        var y = e.pageY - box.offsetTop
        document.onmousemove = function(e){
            // 记录每次的位置 在document里面的位置
            var currentX = e.pageX
            var currentY = e.pageY
            box.style.left = currentX - x + 'px'
            box.style.top = currentY - y + 'px'

        }
        document.onmouseup = function(){
            // 清除对应的mousemove事件
            document.onmousemove = null
        }
    }
    // 在mousedown里面记录按下的位置
    // 给document添加mousemove的事件

样式获取

style属性 只能获取标签内容style属性里面存在的一些样式

如果你需要获取对应的全局所以地方设置样式 我们就需要采取一些方法

getComputerStyle方法属于window的方法

var box = document.querySelector('div')
    console.log(box.style.width);
    console.log(box.style.height);
    var styleObj = window.getComputedStyle(box)
    console.log(styleObj.width);
    console.log(styleObj.height);
    console.log(styleObj.backgroundColor);
    console.log(styleObj.color);
    // IE的兼容
    // var element = box.currentStyle(box.currentStyle)
    window.getComputedStyle?window.getComputedStyle(box):box.currentStyle
    function getStyle(element,attr){
        var style = window.getComputedStyle?window.getComputedStyle(box):box.currentStyle
        return style[attr]
    }
    console.log(getStyle(box,'backgroundColor'));

 

标签：function,console,log,Js,学习,window,day11,事件,arguments
来源： https://www.cnblogs.com/liu-2001/p/16563139.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。