JAVAscript 事件高级

最新推荐文章于 2024-06-03 09:15:36 发布

周周_加油

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量103

点赞数 3

分类专栏：前端分享文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_46703611/article/details/128720656

版权

前端分享专栏收录该内容

14 篇文章 1 订阅

订阅专栏

注册事件

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件

注册事件有俩种方式：传统方式和方法监听注册事件

注册事件传统方式：

利用on开头的事件onclick

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数

最后注册的处理函数将被覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式

addEvent listener （）它是一个方法

IE9之前的IE不支持此方法可使用attachEvent（）

特点：同一个元素同一个事件可以注册多个监听器函数

事件侦听注册事件

里面的事件类型是字符串，必须加引号。而且不带on

同一个元素同一个事件可以添加多个侦听器（事件处理程序）

注册事件兼容性解决方案

function addEventListenner(element ,evenName,fn){

//判断当前浏览器是否支持 addEventListener方法

if（elment.addEventListenner){

element.addEventListener(evenName,fn);

}else if(element.addachEvent){

element.attachEvent('on'+eventName,fn);

}else{

//相对于element.onclck=fn;

element['on'+eventNome]=fn;

}

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器。

DOM的事件流

事件流是从页面中接受事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是dom事件流

dom事件分为3个阶段

捕获阶段

当前目标阶段

冒泡阶段

注意：js代码中只能执行捕获或者其中一个阶段

onclick和attachEvent 只能得到冒泡阶段

addEventListenter（type，listener【，usecapure】）第三个参数如果是true表示在事件捕获阶段调用事件处理程序：如果false不写默认就是false，表示在事件冒泡阶段调用事件处理程序。

4，实际开发中我们很少使用事件捕获，我们更关注事件冒泡

5，有些事件是没有冒泡的比如onblur onfocus onmouseenter onmouseleve

事件冒泡有时候会带来麻烦有时候又会很巧妙的帮助我们做有些事情。

事件对象

div.onclick = function (event){}

event就是一个事件对象，写到我们侦听函数里面的小括号里面

事件对象的常见属性和方法

e.target 返回触发事件的对象

e.sreElement 返回触发事件的对象非标准ie678使用

e.type 返回事件类型比如cilik mouse over 不带on

e.canceVubble 该属性阻止冒泡非标准 ie678使用

e.returnValue 该属性阻止默认事件默认行为非标准

e.prevenDefault() 该方法阻止默认事件标准比如不让链接跳转

e.stopPropagation() 阻止冒泡标准

重点阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收然后逐级向上传播到DOM最顶层

有好处也有坏处也有兼容性问题在低浏览器

我们使用的是 e.canceBubble=ture； //非标准cancle取消bubble泡泡

京东快递单号案例

 <style>
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }

        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }

        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入你的快递单号" class="jd">
    </div>

    <script>
        var con = document.querySelector('.con');
        var jd = document.querySelector('.jd');
        jd.addEventListener('keyup', function () {
            if (this.value == '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
                con.innerHTML = this.value;
            }
        })

        //当我们获得焦点，就这个con盒子
        jd.addEventListener('blur', function () {
            con.style.display = 'none';
        })
        jd.addEventListener('focus', function () {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>

京东搜索框当我们输入s时光标定位到搜索框

   <input type="text">
    <script>
        //核心思路  检测用户是否按下s建，如果按下s建就把光标拿过来
        //使用键盘事件对象的key  判断用户是否按下sjian
        //搜索框获得焦点：使用JS里面的focus（）方法
        var input = document.querySelector('input');
        document.addEventListener('keyup', function (e) {
            if (e.key === 's') {
                input.focus();
            }
        })
    </script>

图片跟随鼠标箭头

    <img src="1.gif" alt="">


    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;

            pic.style.left = x + 'px';
            pic.style.top = y + 'px';
        })
    </script>

周周_加油

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JAVAscript 事件高级

addEventListenter（type，listener【，usecapure】）第三个参数如果是true表示在事件捕获阶段调用事件处理程序：如果false不写默认就是false，表示在事件冒泡阶段调用事件处理程序。e.prevenDefault() 该方法阻止默认事件标准比如不让链接跳转。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是dom事件流。e.sreElement 返回触发事件的对象非标准ie678使用。//相对于element.onclck=fn;
复制链接

扫一扫