JavaScriptDay006(事件)

事件

事件是文档或者浏览器窗口中发生的，特定的交互瞬间

绑定事件的三种方法

在元素上使用事件属性来绑定事件
先获取元素再绑定事件
使用事件监听器来绑定事件

<script>
    //绑定事件的第一种方式：在元素上使用事件属性来绑定事件
    function show(){
        // alert('我是绑定事件的第一种方式');
    }

    //绑定事件的第二种方式：先获取元素再绑定事件
    var btnEle = document.querySelector('button');
    btnEle.ondblclick=function(){
        alert('我是绑定事件的第二种方式');
    }

    //绑定事件的第三种方式：使用事件监听器来绑定事件
    btnEle.addEventListener('mouseover',function(){
        alert('我是绑定事件的第三种方式');
    })
</script>

鼠标事件

由鼠标或类似用户动作触发的事件

点击按钮改变div的样式：

<script>
    //获取按钮button并给它添加点击事件
    var btnEle = document.querySelector('button');
    btnEle.onclick=function(){
        //获取div元素
        var divEle = document.querySelector('div');
        divEle.style.backgroundColor = '#f00';
        divEle.style.borderRadius='25px';
        divEle.style.border='2px solid bule';
    }
</script>

 鼠标在div上移动随机改变背景颜色

<script>
    //第一步：获取div元素
    var divEle = document.querySelector('div');
    //第二步：给获取的div元素绑定鼠标移动事件
    divEle.onmousemove=function(){
        //输入随机获取的整数
        // var num = parseInt(Math.random()*100);
        // console.log(num);

        //现在步输出随机数，随机改变div的背景颜色
        /*
        修改div元素的背景颜色不难，难的是如何获取一个随机的6位的十六进制数

        分析：
            直接通过parseInt(Math.random()*10)，只能获取到0-9这是个数字
            但是表示颜色的十六进制除了0-9这10个数字，还有a-f这五个字母。所以直接通过parseInt(Math.random()*10)不行

            那就直接吧0-9和a-f准备好
            接下来可以从数组中随机的去除6个数字，进行组合，形成颜色的十六进制表示法
        */
       var nums=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F',];
       //循环6次，从nums数组中取出数据，进行组合，形成“#XXXXXX"的形式
       var colorStr = '#';
       for(var i=0;i<6;i++){
        var index =parseInt(Math.random()*16)
        colorStr+=nums[index];
       }
       console.log(colorStr);
       divEle.style.backgroundColor =colorStr;
    }
    console.log(divEle);
</script>

鼠标移入移出事件

<script>
    //鼠标移入灰色div中，红色div显示，鼠标移出div，红色隐藏
    var topDivEle = document.querySelector('.top');
    //绑定移入事件
    //获取红色div
    var buttomDivEle = document.querySelector('.buttom');
    topDivEle.onmouseover = function () {

        buttomDivEle.style.display = 'block';
    }
    topDivEle.onmouseout = function () {
        buttomDivEle.style.display = 'none';
    }
</script>

表单事件

由 HTML 表单内的动作触发的事件

 注意：表单重置事件不支持input标签，支持form标签

<script>
    //第一步：获取元素
    var inputEle = document.querySelector('input');
    //第二步：添加事件
    inputEle.onfocus = function(){
        console.log("输入框获得了焦点");
    }

    inputEle.onblur = function(){
        console.log('输入框失去了焦点');
    }
</script>

事件对象

当 HTML 中发生事件时，该事件属于某个事件对象，例如，鼠标单击事件属于 MouseEvent 对象。

Event 对象

所有事件对象均基于 Event 对象，并继承其所有属性和方法。

在写的时候可以使用e来代替事件

var dEle = document.querySelector('p');
    dEle.onclick = function(e){
        console.dir(e);
    }

键盘事件

键盘事件就是对键盘操作触发的事件

 键盘事件的事件次序：onkeydown onkeypress onkeyup

<script>
    //第一步：获取input标签
    var inputEle = document.querySelector('input');

    //给获取的的标签添加键盘事件
    inputEle.onkeydown=function(){
        console.log('键盘被按下');
    }
    //给获取的元素添加键盘释放事件
    inputEle.onkeyup=function(){
        console.log('键盘被释放');
    }
</script>

UI事件
    UI（User Interface，用户界面）事件
    指的是那些不一定与用户操作有关的事件

window.onload=function(){
 alert("页面加载完成");
}
function reSizeFn(){
 alert("您改变了浏览器窗口大小！");
}
var myDiv=document.getElementById("myDiv");
myDiv.onscroll=function(){
 alert("您滚动了div！");
}