JS基础之DOM事件的简单介绍及相关操作

js dom 事件

1.什么是事件(发生的一件事情)

    事件处理:发生某个事情后，你的反响(你的处理方式)

    问题:网页事件发生，如果想对网页对应的事件发生后，做一些处理.

    解决方案:对事件进行绑定(指事件绑定处理程序–函数),将事件和对应事件处理进行关联

2.如何绑定事件(js)

    2.1传统绑定事件方法

        方法1：

            btnLogin.οnclick=function(){}

        示例：

            let btnLogin = document.getElementByld("'btnLogin");//方法1:

            btnLogin.onclick = function()(

           

            };

        方法2：

            btnLogin.onclick = test;//此处不加括号，只做关联

           

            function test(){

                alert("登录成功");

            }

        取消绑定：

            节点.事件属性= null;

    2.2现代绑定DOM2事件

        1.注意:

            新添加的一些事件，如touch(触摸)事件, DOMContentLoaded(dom内容加载完成)事件必须使用现代方式添加。

        2.现代绑定 区分浏览器

            dom: 谷歌 火狐 IE edge

            非dom: IE老版本(IE8 及以下)

        3.语法：

            绑定事件：

                节点.addEventListener("事件名",事件处理程序,事件流);

                // 事件名不带on，如click

                // 事件流为Boolean值，为false（默认）时为冒泡，为true时为捕获；

                例：

                    btnLogin.addEventListener("click", test);

           

                    function test(){

                        alert("登录成功");

                    }

            取消绑定事件：

                节点.removeEventListener("事件名",事件处理程序);

                // 匿名函数不能被移除

        IE浏览器：

            绑定：

                节点.attachEvent("事件名", 事件处理, 是否冒泡);

            取消绑定:

                节点.detachEvent(事件名,事件处理程序)

    注:使用什么绑定事件，就要使用对应的方法取消事件

   

3.传统绑定和现代绑定的优缺点

    传统绑定：

        兼容性高，不能绑定多个事件处理程序,有些新添加的事件不能绑定

   

    现代的特点:

        兼容性低，可以添加多个事件处理程序，所有事件都可以进行绑定

4.事件流

    会发生的事件，执行的顺序，称之为事件流。

    分为：

        1、冒泡事件流：从精确到模糊，从里到外；

        2、捕获事件流：从模糊到精确，从外到里；

        3、DOM事件流：捕获阶段，目标阶段，冒泡阶段；

 

5.事件对象(存储事件相关的信息)

    //arguments存储，函数调用时传递参数列表

    dom: arguments[0] -> 获取传入函数的第一个参数

   

    非dom: window.event

    兼容性写法: var e = arguments[0] || window.event;

   

    事件对象中的属性与方法:

        type: 事件类型

                                        DOM                    IE            

        事件源，触发事件的对象          target               srcElement

        阻止默认行为(链接跳转)      preventDefault()      returnValue=true

        阻止事件冒泡               stopPropagation()     cancelBubble=true

6.事件类型

    分为三类

    鼠标事件：

        onclick :鼠标按下并抬起

        onmousedown :鼠标按下

        onmouseup :鼠标抬起

        onmouseover :鼠标移入

        onmouseout :鼠标移出

            和hover的区别: hover移出后又会变为原来的样子，如果不想变为原来的样子，就可以用移入移出来做

        ondblclick :鼠标双击

        onmousemove :鼠标移动

    键盘事件：

        onkeydown :键盘按下(所有键)

        onkeyup :键盘弹起

        onkeypress :键盘按下并抬起，只能监听非功能按键，比如ctrl就是功能键

    浏览器事件：

        onfocus :获取焦点input框

        onblur :失去焦点input

        onchange: 改变事件

        onselect: 选中

        onscroll: 滚动事件

        onresize: 窗口大小改变

        onload: 加载完成

        oninput: 输入框输入内容时

        onsubmit: 提交

        onreset: 重置