Web AP—事件高级

这篇具有很好参考价值的文章主要介绍了Web AP—事件高级。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

事件高级

代码下载

注册事件

给元素添加事件,称为注册事件或者绑定事件,注册事件有两种方式:

  • 传统方式(on 开头的事件 onclick;注册事件具有唯一性,同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数)
  • 方法监听注册方式(w3c 标准 推荐方式;IE9 之前的 IE 不支持此方法,可使用 attachEvent() 代替; 同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行)
addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。该方法接收三个参数:

  • type:事件类型字符串,比如 click 、mouseover ,注意这里不要带 on。
  • listener:事件处理函数,事件发生时,会调用该监听函数。
  • useCapture:可选参数,是一个布尔值,默认是 false。后面进一步阐述。
attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触 发指定的事件时,指定的回调函数就会被执行,IE8 及早期版本支持。该方法接收两个参数:

  • eventNameWithOn:事件类型字符串,比如 onclick 、onmouseover ,这里要带 on。
  • callback: 事件处理函数,当目标触发事件时回调函数被调用。
        let bts = document.querySelectorAll('button');
        bts[0].onclick = function() {
            alert('a');
        };
        bts[0].onclick = function() {
            alert('b');
        };
        bts[1].addEventListener('click', function() {
            alert('a');
        });
        bts[1].addEventListener('click', function() {
            alert('b');
        });
        bts[2].attachEvent('onClick', function() {
            alert('a');
        });
        bts[2].attachEvent('onClick', function() {
            alert('b');
        });

注册事件兼容性解决方案,原则是首先照顾大多数浏览器,再处理特殊浏览器:

function addEventListener(element, eventName, fn) { 
    // 判断当前浏览器是否支持 addEventListener 方法
    if (element.addEventListener) {
        element.addEventListener(eventName, fn); // 第三个参数 默认是false 
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn); 
    } else {
        // 相当于 element.onclick = fn; 
        element['on' + eventName] = fn;
    }
}

删除事件(解绑事件)

删除事件的方式:

  1. 传统注册方式
    eventTarget.onclick = null;

  2. 方法监听注册方式

  • eventTarget.removeEventListener(type, listener[, useCapture]);
  • eventTarget.detachEvent(eventNameWithOn, callback);
        let remove = document.querySelector('.remove');
        bts = remove.querySelectorAll('button');
        bts[0].onclick = function() {
            alert('a');
            this.onclick = null;
        };
        function remove1() {
            alert('a');
            bts[1].removeEventListener('click', remove1);
        }
        bts[1].addEventListener('click', remove1, false);
        function remove2() {
            alert('a');
            bts[2].detachEvent('onclick', remove2);
        }
        bts[2].attachEvent('onclick', remove2);

删除事件兼容性解决方案:

        function removeEventListener(element, eventName, func) {
            if (element.removeEventListener) {
                element.removeEventListener(eventName, func);
            } else if (element.detachEvent) {
                element.detachEvent('on' + eventName, func);
            } else {
                element['on' + eventName] = null;
            }
        }
        function add() {
            alert('a');
            removeEventListener(this, 'click', add);
        }
        addEventListener(bts[3], 'click', add)

DOM 事件流

html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。当单击一个div时,同时也单击了div的父元素,甚至整个页面。那么是先执行父元素的单击事件,还是先执行div的单击事件?

  • IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。
  • Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。

最终,w3c 采用折中的方式,制定了统一的标准 —–— 先捕获再冒泡。现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。

事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。 比如给一个div 注册了点击事件:
DOM 事件流分为3个阶段:1. 捕获阶段,2. 当前目标阶段,3. 冒泡阶段

  • 事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。
  • 事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程。

向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过 程相当于事件冒泡。

  1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
  2. onclick 和 attachEvent 只能得到冒泡阶段。
  3. addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
  4. 实际开发中很少使用事件捕获,更关注事件冒泡。
  5. 有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave
  6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,后面讲解。
        let son = document.querySelector('.son');
        let father = document.querySelector('.father');
        son.addEventListener('click', function() {
            alert('son');
        });
        father.addEventListener('click', function() {
            alert('father');
        });
        document.addEventListener('click', function() {
            alert('document');
        });

事件对象

eventTarget.onclick = function(event) {} 
eventTarget.addEventListener('click', function(event) {}) 

event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解为事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。比如:

  1. 谁绑定了这个事件。
  2. 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
  3. 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。

事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。所以,在事件处理函数中声明1个形参用来接收事件对象。event 是个形参,系统设定为事件对象,不需要传递实参过去。当注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。

事件对象本身的获取存在兼容问题:

  1. 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
  2. 在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。

只要“||”前面为false, 不管“||”后面是true 还是 false,都返回 “||” 后面的值。只要“||”前面为true, 不管“||”后面是true 还是 false,都返回 “||” 前面的值。
解决: e = e || window.event;

        let e = document.querySelector('.event');
        e.onclick = function(event) {
            console.log(event);
            console.log(window.event);
            console.log(event || window.event);
        };
事件对象的常见属性和方法
事件对象属性方法 说明
e.target 返回触发事件的对象 标准
e.srcElement 返回触发事件的对象 非标准 ie6-8使用
e.type 返回事件的类型 比如dlick mouseover 不带on
e.cancelBubble 该属性阻止冒泡 非标准 ie6-8使用
e.returnValue 该属性阻止默认事件(默认行为) 非标准 ie6-8使用 比如不让链接跳转
e.preventDefault() 该方法阻止默认事件(默认行为) 标准 比如不让链接跳转
e.stopPropagation() 阻止冒泡 标准

e.target 和 this 的区别:

  • this 是事件绑定的元素, 这个函数的调用者(绑定这个事件的元素)
  • e.target 是事件触发的元素(比如点击的元素)。
    通常情况下terget 和 this是一致的,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),这时候this指向的是父元素,因为它是绑定事件的元素对象,而target指向的是子元素,因为他是触发事件的那个具体元素对象。
        let t = document.querySelector('.target');
        t.onclick = function(e) {
            console.log(e.target);
            console.log(this);
        };
阻止默认行为

html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。

        let baidu = document.querySelector('.baidu');
        baidu.addEventListener('click', function(e) {
            e.preventDefault(); //  dom 标准写法
        });
        baidu.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue = false;
            // 可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
        }
阻止事件冒泡

阻止事件冒泡的两种方式,事件冒泡开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要灵活掌握。
阻止事件冒泡

  • 标准写法:利用事件对象里面的 stopPropagation()方法 e.stopPropagation()
  • 非标准写法:IE 6-8 利用事件对象 cancelBubble 属性 e.cancelBubble = true;
        let b = document.querySelector('.big');
        let s = document.querySelector('.small');
        b.addEventListener('click', function() {
            alert('big');
        });
        s.addEventListener('click', function(e) {
            alert('small');
            e.stopPropagation();
        });

阻止事件冒泡的兼容性解决方案:

if (e && e.stopPropagation) { 
    e.stopPropagation();
} else {
    window.event.cancelBubble = true;
}

事件委托(代理、委派)

程序中有如此场景:

<ul> 
    <li>知否知否,应该有弹框在手</li> 
    <li>知否知否,应该有弹框在手</li> 
    <li>知否知否,应该有弹框在手</li> 
    <li>知否知否,应该有弹框在手</li> 
    <li>知否知否,应该有弹框在手</li>
</ul>

点击每个 li 都会弹出对话框,以前需要给每个 li 注册事件,是非常辛苦的,而且访问 DOM 的次数越多,这就 会延长整个页面的交互就绪时间。

事件委托也称为事件代理, 在 jQuery 里面称为事件委派。不是为每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。以上案例:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。

事件委托的作用:只操作了一次 DOM ,提高了程序的性能。

        let d = document.querySelector('.delegate');
        d.addEventListener('click', function(e) {
            e.target.style.backgroundColor = 'pink';
        })

常用的鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

1.禁止鼠标右键菜单,contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) { 
    e.preventDefault();
})

2.禁止鼠标选中(selectstart 开始选中)

document.addEventListener('selectstart', function(e) { 
    e.preventDefault();
})

示例,禁止文本复制:

        let uncopy = document.querySelector('.uncopy');
        uncopy.addEventListener('contentmenu', function(e) {
            e.preventDefault();
        });
        uncopy.addEventListener('selectstart', function(e) {
            e.preventDefault();
        });
鼠标事件对象

event对象代表事件的状态,跟事件相关的一系列信息的集合。主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的×坐标
e clienty 返回鼠标相对于浏览器窗口可视区的丫坐标
e.pageX 返回鼠标相对于文档页面的X坐标 1E9+ 支持
e.pageY 返回鼠标相对于文档页面的丫 坐标 1E9+ 支持
e screenX 返回鼠标相对于电脑屏幕的×坐标
e.screeny 返回鼠标相对于电脑屏幕的丫坐标
        let mouse = document.querySelector('.mouse');
        mouse.addEventListener('click', function(e) {
            console.log(e.clientX);
            console.log(e.clientY);
            console.log(e.pageX);
            console.log(e.pageY);
            console.log(e.screenX);
            console.log(e.screenY);
        });

鼠标跟随示例:

        let img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            img.style.left = e.pageX - 40 + 'px';
            img.style.top = e.pageY - 50 + 'px';
        });

常用键盘事件

事件除了使用鼠标触发,还可以使用键盘触发。注意是给文档 document 添加键盘事件。输入框也能添加键盘事件,但是只能在获得焦点后响应。

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时并弹起时触发
注意:
  1. 如果使用addEventlistener 不需要加on
  2. onkeypress和前面2个的区别是,它不识别功能键,比如左右箭头,shift 等。
  3. 三个事件的执行顺序是:keydown – keypress – keyup
        document.addEventListener('keydown', function(e) {
            console.log('keydown' + e.keyCode);
        });
        document.addEventListener('keypress', function(e) {
            console.log('keypress' + e.keyCode);
        });
        document.addEventListener('keyup', function(e) {
            console.log('keyup' + e.keyCode);
        });
键盘事件对象
键盘事件对象 说明
keyCode 返回改键的ASCII值

注意:

  • onkeydown 和 onkeyup不区分字母大小写,onkeypress 区分字母大小写。
  • 在实际开发中,更多的使用keydown和keyup, 它能识别所有的键(包括功能键)。
  • keypress 不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCI值。

案例——模拟京东快递单号查询文章来源地址https://www.toymoban.com/news/detail-654008.html

  1. 按下 s 键, 光标就定位到搜索框(文本框获得焦点)。
  2. 在文本框中输入内容时,文本框上面自动显示大字号的内容。
        let con = document.querySelector('.con');
        let jd = document.querySelector('.jd');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 83) {
                jd.focus();
            }
        });
        jd.addEventListener('keyup', function(e) {
            if (this.value === '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
                con.innerHTML = this.value;
            }
        });
        jd.addEventListener('focus', function(e) {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        });
        jd.addEventListener('blur', function(e) {
            con.style.display = 'none';
        });

到了这里,关于Web AP—事件高级的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(58)
  • web前端Javascript—7道关于前端的面试题

    本文主要是web前端Javascript—的面试题,附上相关问题以及解决答案,希望对大家web前端Javascript闭包的学习有所帮助。 每个JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中,你很可能会被问到的问题 以下是 7 个有关 JavaScript的面试题,比较有挑战性。不要查看答案

    2024年02月03日
    浏览(101)
  • web前端javaScript笔记——(11)DOM

    属性                                     此事件发生在何时 onabort 图像的加载被中断。 onblur                                   元素失去焦点。 anchange                                 域的内容被改变 onclick  当用户点击某

    2024年01月19日
    浏览(60)
  • 高级web前端开发工程师的职责说明(合集)

      高级web前端开发工程师的职责说明1 职责: 1、根据需求文档,完成PC端、移动端页面及交互的开发,并保证兼容性和确保产品具有优质的用户体验; 2、熟练使用 HTML 、 CSS 、 JS 、 Ajax 等技术,能解决各种浏览器兼容性问题,完成页面架构和布局; 3、熟练编写结构良好,语义

    2024年02月14日
    浏览(45)
  • 2023年web前端开发之JavaScript进阶(一)

    接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习 作用域 、变量提升、 闭包 等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法, 降低代码的冗余度 。 理解作用域对程序

    2024年02月03日
    浏览(57)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(64)
  • Javascript 、Vue —— 禁止鼠标右键点击事件!

    工作中碰见了奇葩的需求(见多了,也就不奇葩了哈哈)—— 用户让加上鼠标右键点击事件 1、oncontextmenu 事件 定义 : oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。 HTML :  JavaScript :  JavaScript 中, 使用 addEventListener() 方法:   注意:  Internet Explorer 8 及更早

    2024年02月07日
    浏览(51)
  • 19个Web前端交互式3D JavaScript框架和库

    JavaScript (JS) 是一种轻量级的解释(或即时编译)编程语言,是世界上最流行的编程语言。JavaScript 是一种基于原型的多范式、单线程的动态语言,支持面向对象、命令式和声明式(例如函数式编程)风格。JavaScript 几乎可以做任何事情,更可以在包括物联网在内的多个平台

    2024年02月22日
    浏览(48)
  • Web前端大作业制作个人网页(html+css+javascript)

    🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。 ⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页

    2024年02月10日
    浏览(58)
  • Web前端 ---- 【vue】vue 组件传值(props、全局事件总线、消息的订阅与发布)

    目录 前言 父子组件 父传子 子传父 全局事件总线 什么叫全局事件总线 如何创建全局事件总线 如何在组件上获取到这个全局vc对象 最常用的创建全局事件总线 兄弟组件 消息订阅与发布 安装 使用 爷孙组件 在上篇文章我们介绍了父子组件之间的传值通信,本文将介绍不仅限

    2024年02月05日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包