JS-事件

事件

webAPI事件的全部总结

---

---

1.事件的组成

事件源
时间类型
处理程序

2.事件的注册

1)事件源.on事件类型 = function() {}

2)事件源.addEventListener(‘事件类型’,function() {})

3)行内式 <标签 on事件类型 = “js”></标签>

    区别:
    事件源.on事件类型 = function() {}是给属性赋值,所以一个事件类型只能使用一次
    事件源.addEventListener('事件类型',function() {}) 是调用方法,所以可以重复给同一事件类型
    注册事件

3.事件的移除

1)通过 事件源.on事件类型 = function () { } 注册

    事件源.on事件类型 = null / 事件源.on事件类型 = ''

    document.documentElement.onclick = function () {
        alert('lala')
    }

    document.documentElement.onclick = null

2)通过 事件源.addEventListener(‘事件类型’, function () { }) 注册

    事件源.removeEventListener('事件类型', 函数名)

    function fn() {
        alert('啥啥啥,这是啥')
    }
    document.documentElement.addEventListener('click', fn)
    document.documentElement.removeEventListener('click',fn)

4.事件对象参数

只能在事件中使用,形式上是一个对象,实质上是一个参数
多个字母组合驼峰命名的

1)获取鼠标位置 属性

//① e.clientX  相对于页面可视区域左上角(不管有无父盒子,有无定位 都相对于页面左上角)

        document.querySelector('.box').onmousemove = function (e) {
            console.log(e.clientX,e.client);
        }

//② e.offsetX e.offsetY 相对于当前事件源   offset抵消 

        document.querySelector('.box').onmousemove = function(e) {
            console.log(e.offsetX);
        }

//③ e.pageX e.pageY 相对于页面可视区域 包括滚动轴

        document.querySelector('.box').onmousemove = function(e) {
            console.log(e.pageX,e.pageY);
        }

// ④ e.screenX e.screenY 相对于整个屏幕

        document.querySelector('.box').onmousemove = function(e) {
            console.log(e.screenX,e.screenY);
        }

2)获取键盘按键信息 属性

		事件对象参数.key   
        事件对象参数.code
        事件对象参数.keyCode    AscII码

        document.documentElement.onkeyup = function (e) {
            console.log('e.key', e.key);
            console.log('e.code', e.code);
            console.log('e.keyCode', e.keyCode);
        }

3)阻止冒泡 方法

在嵌套关系中,子和父级都注册了同一事件,默认发生冒泡,当冒泡时 子元素执行后向上一层一层冒泡,当碰到上级dom元素有相同事件时就执行
事件流 事件流描述的是从页面中接收事件的顺序
e.stopPropagation()

 		document.querySelector('.father').onclick = function () {
            console.log(this);
        }

        document.querySelector('.box').onclick = function (e) {
            console.log(this);
            // 阻止冒泡
            e.stopPropagation()

        }

捕获 默认不发生捕获,要想发生捕获添加addEventListener第三个参数 true

		document.querySelector('.box').addEventListener('click',function () {
            console.log(this);
        },true)

        document.querySelector('.father').addEventListener('click',function () {
            console.log(this);
        },true)

当捕获时,放在子盒子上点击,也默认先执行父盒子绑定的事件

4)事件委托

将事件绑定到父盒子身上,利用冒泡,当点击子盒子时,沿着父子层级关系一层一层向上查找,找到绑定这个事件的父盒子时就执行

		document.querySelector('ul').onclick = function (e) {
            console.log(e.target.innerText);
        }

5)阻止浏览器默认行为 :如浏览器默认跳转行为 方法

e.preventDefault()

		document.querySelector('.box').ondragover = function (e) {
            console.log(123);
            e.preventDefault()

        }

        document.querySelector('.box').ondrop = function (e) {
            console.log(456);
            console.log(e.dataTransfer.files[0]);
            e.preventDefault()
        }

6)保存被拖动的数据文件(多个) 属性

e.dataTransfer.files[0]

5.各种事件

没有大写字母

1)鼠标事件

    点击
    click
    dblclick
    mousedown
    mouseup

    移动
    mousemove

    mouseenter
    mouseleave
    mouseover
    mouseout

2)键盘事件

	keydown   不区分大小写 但识别所有按键
    keyup
    keypress  功能键不识别 但是区分字母大小写

3)input标签相关事件

    1.文本框
    focus 获取焦点
    blur  失去焦点
    input  输入

    document.querySelector('input').oninput = function () {
        console.log(this.value);
    }

    2.file 上传文件
    change

	document.querySelector('input:nth-child(2)').onchange = function () {
            // 获取用户上传的文件
            let file = this.files[0];
            // 创建一个读取文件的对象
            let reader = new FileReader();
            // 通过读取对象读取文件,将用户上传的图片读取成路径
            // reader.readAsDataURL(file);
            // 读取文字内容
            reader.readAsText(file);
            // 获取读取的结果
            reader.onload = function () {
                // 将读取的图片通过img标签显示
                // img.src = this.result;
                console.log(this.result);
            }
        }

4)h5事件

拖拽事件

document.querySelector('.father').ondragover = function (e) {
            e.preventDefault()
        }

        document.querySelector('.father').ondrop = function (e) {
            // 获取拖拽文件
            let file = e.dataTransfer.files[0]
            // 获取拖拽文件名
            let fileName = file.name
            // 获取后缀名.的索引 截取后缀名
            let doc_index = fileName.lastIndexOf('.')
            let hzm = fileName.substring(doc_index)
            if (hzm == '.png' || hzm == '.jpg') {
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function () {
                    document.documentElement.style.background = `url('${this.result}')`

                }

            } else {
                alert('上传文件格式错误')
            }

            e.preventDefault()
        }

6.事件捕获和冒泡

如4.3

7.事件委托

如4.4