JavaScript之事件操作

在执行事件操作前，首先要找打要执行事件操作的标签

var div = document.getElementById('d')

1.添加单击事件

//1.监听的事件类型  2.事件触发后执行的函数
div.addEventListener('click',function (event) {
            // event.target 触发事件的标签
            // console.log(event.target)
            console.log('监听到click事件,执行click事件函数')
        })

2.添加双击事件

        div.addEventListener('dblclick',function (ev) {
            // transition添加过渡效果
            this.style.transition = '0.8s linear'
            // console.log('监听到dblclick事件,执行dblclick事件函数')
            // this 指div   ev.target 指div
            // transform 形变  scale()缩放
            // 放大状态下双击缩小
            if(this.style.transform == 'scale(1.5) rotate(-45deg)'){
                this.style.transform = 'scale(1) rotate(0deg)'
                this.style.backgroundColor = 'cyan'
            }else{
                // 正常状态下双击变大
                this.style.transform = 'scale(1.5) rotate(-45deg)'
                this.style.backgroundColor = 'blue'
            }
        })

3.鼠标上的键按下去的时候触发

div.onmousedown = function (ev) {
            console.log(ev)
        }

4. 鼠标上的键弹起的时候触发

div.onmouseup = function (ev) {
            console.log('onmouseup鼠标键弹起来了')
        }

5.鼠标进入div的范围触发事件

div.onmouseover = function (ev) {
            console.log('鼠标进入div范围')
        }

6.鼠标离开div的范围触发事件

div.onmouseout = function (ev) {
            console.log('鼠标离开div范围')
        }

7. 鼠标移动事件

document.onmousemove = function (ev) {
            // 找到所有的小球
            spans = document.getElementsByTagName('span')
            // for 遍历小球
            for (idx in spans){
                // 取出每一个小球
                span = spans[idx]
                // 小球显示
                span.style.display = 'block'
                // 随机产生小球位置
                // -150 ~ 150
                var top = Math.random()*1000-500
                var left = Math.random()*1000-500
                // 设置小球位置
                span.style.top = ev.clientY + top + "px"
                span.style.left = ev.clientX + left + 'px'
                // 随机设置小球颜色
                // Math.floor 取整
                red_num = Math.floor(Math.random()*255)
                green_num = Math.floor(Math.random()*255)
                blue_num = Math.floor(Math.random()*255)
                // rgb(255,255,255)
                span.style.backgroundColor =
                    'rgb('+red_num+','+green_num+','+blue_num+')'
                // 随机缩放 0.2~1.2
                scale_num = Math.random()+0.2
                span.style.transform = 'scale('+scale_num+')'
            }
        }

键盘事件

1.onkeyup键盘按下去弹起

document.body.onkeyup = function (ev) {
            div.innerText = ev.key
            // 判断组合键
            // && 并且
            if (ev.key == 'q' && ev.ctrlKey && ev.altKey){
                console.log('按下了组合键 ctrl + alt + q')
                // 跳转界面
                window.location.href = 'https://www.baidu.com'
            }
        }

2.onkeydown 或者onkeypress键盘按下的时候

如果按下去不松开,会一直调用函数

document.body.onkeydown = function (ev) {
        console.log(ev)
        console.log('键盘下去了')
         }