美文网首页吃饭用的前端
WebsAPI(四)——事件监听

WebsAPI(四)——事件监听

作者: CNLISIYIII | 来源:发表于2019-04-10 15:18 被阅读0次

    在同一个文件中,代码会预解析并且提升。

    若加载多个文件时,后续的文件默认会等待上一个文件加载完并执行后,才会继续预解析并执行。

    若一定要把先使用的程序文件放在后面的话,可以给它的script标签加上async属性。


    (一)事件监听

    1.事件监听注册事件

    语法:事件源.addEventListener('事件类型',事件处理程序,是否捕获);

    代码举栗:

    <body>

        <button>点击</button>

        <div>

            内容

        </div>

        <script>

            var btn = document.querySelector('button');

            var div = document.querySelector('div');

            btn.addEventListener('click',function(){

                div.style.width = '300px';

                div.style.height = '300px';

                div.style.background = 'red';

            });

            btn.addEventListener('click',function(){

                div.style.color = 'gold';

                div.style.fontSize = '50px';

            })

        </script>

    </body>

    事件监听注册事件属于叠加事件,后一个不会覆盖前面相同的事件。

    传统注册事件属于覆盖事件,事件源.事件类型 = 事件处理程序。会让后面的事件覆盖前面相同的事件。

    若考虑以后的事件扩展,选择事件监听;若不需要扩展,选择传统方式。

    事件监听是标准的(官方认可的),但是有兼容问题。(移动端使用较多)

    传统方式是非标准的,但是没有兼容问题。(PC端使用较多)

    2.事件监听移除事件

    传统移除事件,把原来的事件重新赋值为null

    btn.onclick = null;

    语法:事件源.removeEventListener('事件类型',事件处理程序的名称);

    代码举栗:

    <body>

        <button>点击</button>

        <div>

            内容

        </div>

        <script>

            var btn = document.querySelector('button');

            var div = document.querySelector('div');

            var fn1 = function() { 

                div.style.width = '300px';

                div.style.height = '300px';

                div.style.background = 'red';

            };

            var fn2 = function() { 

                div.style.color = 'gold';

                div.style.fontSize = '50px';

            }

            btn.addEventListener('click',fn1); //fn1不要加小括号()

            btn.addEventListener('click',fn2);

            // 移除fn2

            btn.removeEventListener('click',fn2);

        </script>

    </body>

    (二)时间流

    事件触发后的一个流程。有三个阶段:捕获阶段、目标阶段、冒泡阶段。(先捕获,到达目标,再冒泡)

    事件监听注册 事件源.addEventListener('事件类型',事件处理程序,是否捕获);中的第三个元素:

    1.事件捕获

    true为捕获,从最外层document往内捕获事件,直到捕获到目标为止。

    默认为false不捕获,支持事件冒泡,从点击的目标开始,向外层冒泡直到没有为止。

    不管是true还是false,冒泡阶段或捕获阶段也都会进行,但是不会展示出来。传输过程一定会经历三个阶段。

    2.事件冒泡

    传统方式注册事件:默认启用事件冒泡

    事件冒泡传输过程:从目标阶段(最先点击的元素)到最外层元素(即document)。

    (三)事件对象

    在事件触发后或在事件处理程序中,(函数体)所获取并操作的对象。

    1.获取事件对象

    语法:事件源.事件类型 = function(e){}

    形参e(可以是任意字母)就是事件对象。执行函数(即事件触发后)的时候,浏览器会把事件对象交给形参e。

    代码举栗:

    <script>

            document.onclick = function() {

                //浏览器会默认给事件对象一些属性

                console.log(e);

                //从对象中拿东西。X坐标和Y坐标

                console.log(e.clientX,e.clientY);

            }

    </script>

    2.鼠标事件对象相关属性

    1)鼠标事件类型:

    - onclick

    - onmouseenter

    - onmouseleave

    - onmousemove 鼠标移动事件

    - onmousedown 鼠标按键按下事件

    - onmouseup  鼠标按钮弹起事件

    2)鼠标事件对象相关属性:(获取鼠标位置)

    代码举栗:

    <body>

        <div></div>

        <script>

            var div = document.querySelector('div');

            div.onclick = function(e) {

                console.log('相对于浏览器当前可视页面的位置:', e.clientX, e.clientY);

                console.log('相对于浏览器整个页面的位置:', e.pageX, e.pageY);

                console.log('相对于当前元素的位置:', e.offsetX, e.offsetY);

            };

        </script>

    </body>

    3.拖拽案例

    <body>

        <div></div>

        <script>

            var login = document.querySelector('.login');

            var tip = document.querySelector('.tip');

            tip.onmousedown = function(e) {

                var x = e.offsetX;

                var y = e.offsetY;

                document.onmousemove = function (e) {

                    login.style.left = e.clientX - x + 'px';

                    login.style.top = e.clientY - y + 'px';

                }

            };

            tip.onmouseup = function() {

                document.onmousemove = null; //解绑

            }

        </script>

    </body>

    4.键盘事件相关属性

    1)键盘事件类型

    - onkeydown    键盘按下事件

    - onkeyup      键盘弹起事件

    一般给document绑定键盘事件。

    2)键盘事件对象:(区分键盘按下了哪个键)

    - 事件对象.keyCode    获取键盘按键对应的键码值

    - 事件对象.altKey      表示alt键是否按下,返回布尔值。

    - 事件对象.shiftKey    表示shift键是否按下,返回布尔值。

    - 事件对象.ctrlKey    表示ctrl键是否按下,返回布尔值。(true按下,false没有按下)

    代码举栗:

    <script>

            document.onkeydown = function(e) {

                // console.log(e.keyCode); //获得键码值

                var num = e.keyCode;

                if(e.ctrlKey && e.keyCode==67) { //ctrlKey默认为ture

                    alert('请登陆!');

                }

            };

    </script>

    相关文章

      网友评论

        本文标题:WebsAPI(四)——事件监听

        本文链接:https://www.haomeiwen.com/subject/ubnniqtx.html