DOM编程系列之事件

最新推荐文章于 2024-10-09 00:58:21 发布
最新推荐文章于 2024-10-09 00:58:21 发布
阅读量95 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000016242854
版权

事件

  • 所谓事件就是是浏览器告知JavaScript程序用户的行为

事件的属性

HTML页面元素提供的事件属性

  • HTML页面元素提供的事件属性 -> 元素的属性分类之一

    • DOM提供了一系列的事件名称

示例代码:

<body>
<!--
    HTML页面元素提供的事件属性 -> 元素的属性分类之一
    * DOM提供了一系列的事件名称
 -->
<button onclick="myClick()" id="btn">按钮</button>
<script>
    function myClick(){
        console.log('你终于点中了我...');
    }
</script>
</body>

DOM对象提供的事件属性

  • DOM对象可以设置事件属性

示例代码:

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    // DOM对象的事件属性
    btn.onclick = myClick;
    function myClick(){
        console.log('你终于点中了我...');
    }
</script>
</body>

事件监听器

  • DOM对象提供的事件属性 - 无法同时为一个指定元素绑定相同事件多次
  • 事件监听器也可以设置事件属性
  • 注意: 该方法有浏览器兼容问题

示例代码:

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    // DOM对象提供的事件属性 - 无法同时为一个指定元素绑定相同事件多次
    /*btn.onclick = function(){
        console.log('xxx');
    }
    btn.onclick = function(){
        console.log('yyy');
    }*/

    /*
        为指定元素添加事件监听器
        addEventListener(eventName, callback)
        * 参数
          * eventName - 表示绑定的事件名称(注意:没有on)
          * callback - 表示事件的处理函数(回调函数)
        * 允许为相同元素绑定相同事件多次
      */
    /*btn.addEventListener('click',function(){
        console.log('xxxx...');
    });
    btn.addEventListener('click',function(){
        console.log('yyyy...');
    });*/
</script>
</body>

浏览器兼容解决方案

示例代码:

        事件监听器的浏览器兼容问题(IE 8以下版本浏览器不支持)
        attachEvent(eventName,functionName)方法
        * 参数
          * eventName - 表示事件名称(注意:必须有on)
          * functionName - 表示事件的处理函数
     */
    btn.attachEvent('onclick',function(){
        console.log('xxxx...');
    });

    // 提供浏览器兼容解决方案
    function bind(element, eventName, functionName){
        if (element.addEventListener) {
            element.addEventListener(eventName, functionName);
        } else {
            element.attachEvent('on' + eventName, functionName);
        }
    }

移除注册事件

  • removeEventListener(eventName,functionName)方法

    • 表示对已经绑定的事件进行移除

    • 参数:

      • eventName - 表示要移除的事件名称

      • functionName - 表示事件的处理函数

        • 必须是注册事件的处理函数(就是必须是同一个函数)

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script>
    /* 获取指定ID属性 */
    var btn = document.getElementById('btn');
    /* 添加鼠标点击事件 */
    function myClick() {
        console.log('一花一世界...');
    }
    /* 添加事件监听器 */
    btn.addEventListener('click',myClick);
    btn.addEventListener('click',function () {
        console.log('一笑一人生...');
    });
    /*
        移除注册事件 - removeEventListener(eventName,functionName)方法
          * 参数 :
            * eventName - 表示要移除的事件名称
            * functionName - 表示事件的处理函数
              * 必须是注册事件的处理函数(就是必须是同一个函数)
     */
    btn.removeEventListener('click',myClick);
    /*
</script>
</body>

解决浏览器兼容问题

示例代码:

        IE 8以下的版本浏览器不支持removeEventListener方法()
          * detachEvent(eventName,functionName)
            * eventName - 表示移除的事件名称(必须有on)
            * functionName - 表示事件处理函数
              * 必须是注册事件的处理函数(就是必须是同一个函数)
     */
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName,functionName);
        }else {
            element.detachEvent('on' + eventName,functionName);
        }
    }

事件对象

  • Event事件对象 - 作为所有事件对象的父级

    • MouseEvent事件对象 - 表示鼠标事件
    • KeyboardEvent事件对象 - 表示键盘事件
    • TouchEvent事件对象 - 表示触摸事件

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script>
    var btn = document.getElementById('btn');
    // 事件的处理函数中接收一个参数 - 事件对象
    btn.addEventListener('click',function (event) {
        /*
            Event事件对象 - 作为所有事件对象的父级
              * MouseEvent事件对象 - 表示鼠标事件
              * KeyboardEvent事件对象 - 表示键盘事件
              * TouchEvent事件对象 - 表示触摸事件
         */
       console.log(event);
    });
</script>
</body>

解决浏览器兼容问题

示例代码:

// IE 8以下版本浏览器提供的添加事件监听器方法 - 事件对象是作为window对象属性出现
    btn.attachEvent('onclick',function () {
        console.log(window.event);
    });
    function bind(element, eventName, functionName){
        if (element.addEventListener) {
            element.addEventListener(eventName, functionName);
        } else {
            element.attachEvent('on' + eventName, function(){
                functionName.call(element);
            });
        }
    }

    bind(btn,'click',function(event){
        var e = event || window.event;
    });

    /*btn.onclick = function(event){
        console.log(event);
    }*/

    function myClick(event){
        console.log(event);
    }

阻止默认行为

  • return false; - return语句

    • 作用 - 当前函数是事件的处理函数时，阻止默认行为

    • 注意 - return语句之后的逻辑代码不会被执行

      • 编写在函数体的最后面
    • 只有在DOM对象的事件属性中具有阻止默认行为的功能

示例代码:

<a href="#">链接</a>
<script>
    var aElement = document.getElementsByTagName('a')[0];

    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默认行为
    });*/

    aElement.onclick = function(event){
        // event.preventDefault();// 阻止默认行为
        /*
            return false; - return语句
            * 作用 - 当前函数是事件的处理函数时，阻止默认行为
            * 注意 - return语句之后的逻辑代码不会被执行
              * 编写在函数体的最后面
            * 只有在DOM对象的事件属性中具有阻止默认行为的功能
         */
        return false;
    }

    aElement.attachEvent('onclick',function(event){
        var e = event || window.event;
        e.returnValue = false;// 阻止默认行为
    });

</script>
</body>

获取鼠标坐标值

  • pageX和pageY

    • 鼠标坐标值相对于当前HTML页面

  • clientX和clientY

    • 表示获取鼠标在可视窗口中的位置

  • screenX和screenY

    • 表示获取鼠标在显示器屏幕中的位置

示例代码:

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        // 鼠标坐标值相对于当前HTML页面
        console.log(event.pageX, event.pageY);
        // 鼠标坐标值相对于当前可视区域
        console.log(event.clientX, event.clientY);
        // 鼠标坐标值相对于当前屏幕的
        console.log(event.screenX, event.screenY);
        // 鼠标坐标值只能获取，不能设置
    });

</script>
</body>

获取相对于定位父元素的鼠标坐标值

  • offsetX和offsetY

    • 表示获取鼠标相对于在父元素中的位置

示例代码:

    <style>
        #d1 {
            width: 400px;
            height: 400px;
            border: 1px solid black;

            margin-top: 300px;
            margin-left: 300px;
        }

    </style>
</head>
<body>
<div id="d1"></div>
<script>
    // 相对于指定元素的鼠标坐标值
    var div = document.getElementById('d1');
    div.addEventListener('click',function(event){
        console.log(event.offsetX, event.offsetY);
    });

</script>
</body>

事件委托

  • 就是为所有相同父级的子级元素绑定事件

示例代码:

<body>
<div id="container">
    <button id="btn1">按钮</button>
    <button id="btn2">按钮</button>
    <button id="btn3">按钮</button>
</div>
<script>
    /*var btn1 = document.getElementById('btn1');
    btn1.addEventListener('click',function(){
        console.log('这是一个按钮');
    });
    var btn2 = document.getElementById('btn2');
    btn2.addEventListener('click',function(){
        console.log('这是一个按钮');
    });
    var btn3 = document.getElementById('btn3');
    btn3.addEventListener('click',function(){
        console.log('这是一个按钮');
    });*/

    // 不将事件绑定给指定元素，而是绑定给共同的父级/祖先元素
    var container = document.getElementById('container');
    container.addEventListener('click',function(event){
        var target = event.target;// 触发事件的目标元素
        if (target.nodeName === 'BUTTON') {
            console.log('这是一个按钮');
        }
    });
</script>
</body>
weixin_33850890
关注
DOM编程-事件（一）
Raaabbt GO!!
07-30 247
DOM事件什么是DOM事件？当我们在网页上操作的时候，比如当我们点击一个DOM元素，在键盘上按下按键，在输入框输入内容，当页面加载完成，这些都会触发DOM事件事件流什么是事件流呢? 事件流就是DOM事件的处理执行的过程。W3C中对DOM事件流有明确的定义。 （图片来自于W3C文档https://www.w3.org/TR/uievents/#dom-event-architecture）如图，这
DOM 编程与事件
qq_34558909的博客
03-19 149
一 DOM ​ 前言: DOM(Document Object Model)是文档对象模型,是一套标准: html 和 xml都遵循这套标准! 1.1 DOM结构 1.2 获取DOM 节点的三种方式 //通过id 获取节点 document.getElementById("mydiv"); //通过名字获取节点 document.getElementsByName("input"); /...
41-【JS编程接口】DOM事件与事件委托
小峰同学的前端小屋
06-02 249
文章目录DOM事件模型W3C事件模型实现冒泡实现捕获实现先捕获、再冒泡简化代码 removeX和addXtarget与currentTarget区别一个特例 关于冒泡捕获顺序取消冒泡API不可取消冒泡的事件阻止滚动 手机和pc端自定义事件事件委托如何实现事件委托封装事件委托JS支持事件不？ DOM事件模型 分为冒泡和捕获，一个事件发生后，会在子元素和父元素之间传播（propagation），分为三个阶段： （1）捕获阶段，从window对象自上而下向目标节点传播 （2）目标阶段：真正的目标节点正在处理事情的
DOM编程-事件（五）
Raaabbt GO!!
07-30 273
焦点事件FocusEvent处理元素获得焦点和失去焦点的事件，那么什么是获得焦点，什么是失去焦点呢？ 比如有一个input输入框，当我们用鼠标点击一下，会有一个光标出现，这时就获得了焦点；当我们点击其他地方的时候光标消失，这就失去了焦点。 事件类型 是否冒泡 元素 默认事件 元素例子 blur no window、element none wi
JS中DOM元素的事件以及操作
Charminglsy的博客
05-23 622
dom的事件: js的事件前缀都带on * 键盘事件 表单事件 鼠标事件 浏览器事件 触屏事件。。。。 *onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按键事件) * onfocus(获得焦点) onblur（失去焦点） * onclick（单击） ondbclick onmouseleave(水平离开) onmouseout（离开） o...
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
此外，"JavaScript DOM编程艺术"可能还会涉及高级话题，如事件委托、动画效果、AJAX（异步JavaScript和XML）以及现代前端框架如何与DOM交互等内容。事件委托利用事件冒泡或捕获机制，只在父元素上设置一个监听器，...
《前端异步编程系列之事件发布/订阅模式》附件：eventjs模块
08-12
在JavaScript中，事件机制广泛应用于DOM操作、Web API交互以及自定义组件间通信。例如，当用户点击按钮时，DOM会触发一个点击事件，监听该事件的函数会被调用，执行相应的逻辑。 `eventjs`模块是一个简单的实现，...
Dom编程基础.pdf
09-30
事件是DOM编程中的关键部分，它们允许网页响应用户的操作。例如，`onmousedown`事件会在用户按下鼠标时触发，而`onload`事件则在页面完全加载后执行。JavaScript函数可以作为事件处理程序，当事件发生时执行相应的...
JavaScriptDOM编程艺术
11-23
《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。DOM是HTML和XML文档的结构化表示，JavaScript通过DOM API能够对网页内容进行动态操作，实现丰富的交互效果。...
js DOM编程
11-09
JavaScript DOM编程是Web开发中的核心技能之一，它允许开发者通过脚本语言操作HTML或XML文档的结构、内容和样式。DOM（文档对象模型）是一种标准的接口，将网页内容表示为一个可编程的对象树，使得JavaScript或其他...
DOM事件和一些实用笔记
weixin_34247032的博客
06-13 110
let el = document.body.querySelector("style[type='text/css'], style:not([type])");返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的<style>元素document.querySelector只返回第一个符合的对象。 **事件对象** 有时候在事...
DOM操作与事件高级
Little_monster_1的博客
08-16 383
wa
DOM事件的整理总结
CoCoManYYn的博客
12-24 470
引言 今天上课的时候有点困了，于是打开手机看看前端的零散小文章，突然看到了“事件委托”这个名词，嘤嘤嘤？ 于是我决定把找dom事件稍微梳理一下，可能不是很全面，因为有些实在是不怎么常用，我也记不太住，以后需要用的时候就去查一查，然后再补充进来吧嘿嘿嘿！！ 主要内容 首先我梳理一下我今天整理的主要内容，主要为事件冒泡、事件捕获还有事件委托。 正式开始啦 什么是事件流？ 流的概念现今的JavaScri...
H5基础知识第十二课时(事件)
yuzhaocong的博客
07-25 224
1.事件 (1)鼠标数据 click 单击事件 dbclick 双击事件 mousedown 鼠标按钮被按下 mousemove 鼠标被移动事件 mouseout 鼠标从某个元素移开 mouseover 鼠标移到某个元素上 mouseup 鼠标按键被松开 运用时前面加上on 添加事件1 添加事件2 var btn1=document.getElementBy
为一个DOM元素添加事件有几种方式，分别是什么？
MY的博客
07-31 5558
第一种，直接在html代码上设置标签的事件处理，代码示例：<!DOCTYPE html> <html> <head> </head> <body> <p id="p">点击按钮就执行displayDate()函数</p> <button id="id" onclick="displayDate()">点击</button>//在此处onclic
JavaScript绑定事件的方法[3种]
xyjikl
12-07 2340
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。 一. 在DOM元素中直接绑定 这里的DOM元素，可以理解为HTML标签。JavaSc
dom中常用事件
奋斗小强的博客
08-01 841
总结了一下dom中常用的事件
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1245
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
javascript中==和===有什么不同
最新发布
qq_48763502的博客
10-09 405
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值