JavaScript事件

事件

定义：

        JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

原理：

        当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

JavaScript常用事件：

一.窗口事件
1.失去焦点事件：onblur

/*  当窗口失去焦点时 */
    window.onblur = function () {
        console.log('窗口失去了焦点！');
    }

2.获得焦点事件：onfocus

/*  当窗口获得焦点时 */
    window.onfocus = function () {
        console.log('窗口获得了焦点！');
    }

3.onload 加载完成后事件

/* 窗口加载完成后*/
    window.onload =function () {
        console.log("窗口加载完成！")
    }

4.onresize  窗口大小改变事件

/*  窗口大小改变时 事件 */
    window.onresize = function () {
        console.log("窗口大小正在发送改变");
    }

5.表单事件

onchange 内容改变事件

userCode.onchange = function () {
        console.log(userCode.value);
    }

oninput 当文本框内容改变时  ，立即将改变内容 输出在控制台

userCode.oninput = function () {
        console.log(userCode.value);
    }

获取表单 未能提交时

userCode.oninvalid = function () {
        console.log("请您完成表单的内容!");
    }

当文本框内容被选中时

 userCode.onselect = function () {
        // this
        console.log("您已经选择了文本框!");
    }

二.键盘事件

键盘按下事件

window.onkeydown = function (event) {
           /!* 解决兼容问题 *!/
           event = event || window.event;
           console.log("键盘按下了" + event.keyCode);
           if (event.keyCode == 13) {
               console.log('按下了回车');
           }

onkeyup： 当松开按键时 触发

window.onkeyup = function (event) {

        event = event || window.event;

        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }

键盘 按下并松开时

window.onkeypress = function (event) {
        event = event || window.event;
        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }

三.鼠标事件

鼠标单击事件

window.onclick = function () {
        console.log("鼠标单击事件");
    }

鼠标双击事件

window.ondblclick = function () {
        console.log("鼠标双击事件");
    }

当鼠标按钮按下运行时

window.onmousedown = function () {
        console.log("当鼠标按钮按下运行时");
    }

当鼠标按钮运行时

window.onmouseup = function () {
        console.log("当鼠标按钮运行时");
    }

onmouseover 当鼠标移入时  不能阻止冒泡

function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
    }

onmouseout : 当鼠标移出时  不能阻止冒泡

function divMouseout() {
        console.log("当鼠标移出了当前的DIV");
    }

onmouseenter ： 可以阻止事件冒泡
onmouseleave ： 可以阻止事件冒泡
当鼠标的滚轮运行时

<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseenter="divMouseenter()"
         onmouseleave="divMouseleave()"
         style="width: 100px;height: 100px;background: pink">
    </div>
</div>

<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

<script>
    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }

</script>