DOM(中）

最新推荐文章于 2023-02-20 21:59:41 发布
最新推荐文章于 2023-02-20 21:59:41 发布
阅读量283 收藏
点赞数
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47406138/article/details/108456805
版权

高级事件

- 注册事件（绑定事件）

  • 传统注册方式
     //传统方式
        var btns = document.querySelector('button');
        btns.onclick = function () {
            alert(22);
        }
  • 方法监听注册方式（ie9之前不支持，用attachEvent()代替）

eventTarget.addEventListener(type,listener[,useCapture ]

  var btns = document.querySelector('button');
        btns.addEventListener('click', function () {
            alert(22);
        })

- 删除事件（解绑事件）

  • 传统解绑事件

当鼠标点击第一个div时，弹出‘22’，同时解绑这个命令。

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        //传统方式
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
            alert(22);
            divs[0].onclick = null;
        }
  • 方法监听解绑事件
 //监听方式
        var divs = document.querySelectorAll('div');
        divs[0].addEventListener('click', fn);  //这里的fn不需要加小括号
        function fn() {
            alert(22);
            divs[0].removeEventListener('click', fn)
        }

DOM事件流

- 三个阶段：捕获阶段-----当前目标阶段----冒泡阶段

在这里插入图片描述

  • 注意点

1.JS代码中只能执行捕获或冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段。
3. addEventListener第三个参数时true，表示在事件捕获阶段调用事件处理程序,为false时，表示冒泡阶段。。
4.开发中更常用事件冒泡
5.有些事件是没有冒泡的：onblur onfocus onmouseenter onmouseleave

  <div class="father">
        <div class="son">儿子</div>
    </div>
    <script>
        // 给儿子添加冒泡事件
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert(22);
        }, false)

        // 给父亲添加冒泡事件,点击'儿子'时，会弹出两次，点击 '父亲'会弹出一次
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert(22);
        }, false)
    </script>

事件对象

event是一个事件对象，写到侦听函数的小括号里面。简写为’e’即可。

  <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e);
        })
    </script>

在ie6,7,8的兼容性写法⬇

 console.log(window.event);

兼容性写法

 div.addEventListener('click', function (e) {
            e = e || window.event;
            console.log(e);
        })

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

e.target返回的是触发事件的对象
this返回的是绑定事件的对象

- 触发对象和绑定对象都是son

   <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid transparent;
            background-color: pink;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-left: 54px;
            margin-top: 54px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function (e) {
            console.log(e.target); //触发事件对象
            console.log(this); //绑定事件对象
        })

- 当点击son时，触发对象是son绑定对象是father /当点击father时，触发事件对象和绑定事件的对象都是father

   var father = document.querySelector('.father');
        father.addEventListener('click', function (e) {
            console.log(e.target); //触发事件对象
            console.log(this); //绑定事件对象
        })
  • e.type

返回事情类型 如click

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        function fn(e) {
            console.log(e.type); //返回值是click
        }
    </script>
  • e.preventDefault()—阻止默认行为
    <a href="#">百度</a>
    <script>
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault(); //这里的括号里面不写参数
        })
    </script>
  • 阻止事件冒泡
    在这里插入图片描述

事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：只操作了一次DOM,提高了程序的性能。

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //不给每一个li注册事件，而是给父元素ul,
        //当点击li时，冒泡原理会影响到ul
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function () {
            alert(22);
        })
    </script>

常见鼠标事件

  • 禁止选中文字
  document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
  • 禁止右键菜单
    <p> hao a u</p>
    <script>
        // 禁止右键菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })

鼠标事件对象

鼠标相对于页面可视区的位置

 //相对于页面可视区的位置
        document.addEventListener('click', function (e) {
            console.log(e.clientX);
            console.log(e.clientY);
        })

相对于文档页面的坐标

    //相对于文档页面的位置
        document.addEventListener('click', function (e) {
            console.log(e.pageX);
            console.log(e.pageY);
        })

相对于电脑屏幕的坐标（不常用）

 <script>
        //相对于电脑屏幕的坐标
        document.addEventListener('click', function (e) {
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

案例：跟随鼠标移动的天使

分析：1.图片在页面中不占位置，所以用绝对定位
2.将鼠标在页面中的位置赋给图片
3.注意：图片定位记得加’px’

   <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="icon_/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            //千万不要忘记给left 和 top添加px单位
            pic.style.top = y + 'px';
            pic.style.left = x + 'px';
        })
    </script>

常见键盘事件

onkeydown(鼠标按下时触发）
onkeypress(按下时触发，但是它不识别功能键）
onkeyup（按键被松开时触发）
以上是执行顺序。

键盘事件对象

   document.addEventListener('keypress', function (e) {
            console.log(e);
            console.log(e.keyCode);
        })

分别为按下a和A的键值
在这里插入图片描述

案例：模拟京东按键输入内容

   <input type="text" name="" id="">
    <script>
        var search = document.querySelector('input');
        //keyup鼠标弹起时触发，字就不会出现在文本框里了
        document.addEventListener('keyup', function (e) {
            if (e.keyCode === 83) {
                //让当前文本框获得光标
                search.focus();
            }
        }) 
    </script>

案例：模拟查询快递单号

1.快递单号输入内容时，上面的大号盒子显示，里面的字体更大
2.给输入框绑定键盘事件
3.将快递单号里的值获取过来给上面的盒子，作为它的innerHTML.
4.如果快递单号里面的内容为空，则隐藏上面的大号盒子

 * {
            margin: 0;
            padding: 0;
        }

        .search {
            position: relative;
            width: 178px;
            height: 50px;
            margin: 100px;
        }

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

        /* 在上面的盒子里加一个小三角，用绝对定位来做 */
        .con::before {
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            top: 28px;
            left: 18px;
            /* 这里的边框要调大一点，否则显示不出来 */
            border: 8px solid transparent;
            border-top-color: #fff;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入您的快递单号" id="jd">
    </div>
    <script>
        var input = document.querySelector('input');
        var con = document.querySelector('.con');
        //键盘按下时，输入框里面没有文字，盒子就隐藏
        input.addEventListener('keyup', function () {
            if (this.value == '') {
                con.style.display = 'none';
                //否则就显示大盒子，同时取值给大盒子
            } else {
                con.style.display = 'block';
                con.innerHTML = this.value;
            }
        })

        //当输入框失去焦点时，上面的大盒子就隐藏起来
        input.addEventListener('blur', function () {
            con.style.display = 'none';
        })
        //当得到焦点，且里面的值不为空时，大盒子显示
        input.addEventListener('focus', function () {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>
有一只僵尸在你的草坪上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
freeswitch实现监听_Freeswitch监听功能--单向监听
weixin_39689819的博客
12-19 1142
标签：1.监听函数：eavesdroplua脚本中调用监听：local cmd = "originate loopback/3333 &eavesdrop("..uuid..")"api:executeString(cmd)2、监听变量设置参考C代码：mod_dptools.c875行const char *require_group = switch_channel_get_var...
DOM（一）
weixin_62343228的博客
03-01 145
Web API简介、DOM简介、获取元素、事件基础和操作元素
为body标签和document.body都添加点击事件后仅Firefox弹出了两次
01-19
这是 菜菜 刚刚发现的 给body标签和document.body都添加点击事件后仅Firefox之弹出了两次 HTML BODY [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 1，给body标签添加了onclick事件，弹出1 2，给document.body添加了onclick事件，弹出body 点击页面红色区域 IE6/7/8/9/Safari/Chrome/Opera : 不弹任何消息 Firefox : 弹出1 点击页面黄色区域 IE6/7/8/9/Safari/Chrome/Opera : 弹出body Firefox : 弹出body，再弹1
一个demo学会c#
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-02 8723
学习了c#4.5高级编程这本书，自己喜欢边学边总结边写demo，所以写了这篇文章，包含了大部分的c#编程知识。让你一个demo掌握c#编程，如果有问题可以留言。 此demo主要包括五个文件：Students.cs和Moniter.cs文件，包含了自定义空间、空间函数、空间变量、空间自定义类；Interface1.cs文件和Interface2.cs文件为接口文件;index.cs文件为主程序运算。
FreeSwtich的监听功能
至虛極，守靜篤
10-26 2816
FreeSwitch提供了一个APP实现通道的监听功能，它的名字是：eavesdrop。如果要持续监听某个用户，那么要用mod_spy里实现。 用法 Usage eavesdrop [<uuid>|all] 相关通道变量 <actionapplication="set"data="eavesdrop_require_group=<groupID>"/> <actionapplication="set"data="ea...
c#事件详解
weixin_42117570的博客
02-20 4392
学习资源来自刘铁锰视频
DOM（下）
Yannick_H的博客
06-10 252
目录一、DOM1.排他思想示例1：鼠标点击时改变按钮的背景色示例2：鼠标经过时改变表格行的背景色2.获取元素属性的值3.设置属性的值4.移出属性5.H5中对标签自定义属性的名称约定6.H5中设置自定义属性的值7.H5中获取自定义属性的值二、DOM的节点1.什么是节点？2.节点的属性(1)节点类型：nodeType(2)节点名称：nodeName(3)节点的值：nodeValue3.节点的层级4.节点的获取(1)获取父级结点：元素名.parentNode(2)获取子节点(3)获取兄弟节点示例：下拉菜单，当鼠标
DOM中文手册
04-08
DOM中文参考手册，开发学习都可以用，推荐下载，请多多支持
vue-dom-hints:Vue devtool，用于在DOM中标识Vue组件及其SFC路径
05-01
:light_bulb: 提示提示 通过__vue__属性在DOM中添加开发提示的Vue开发__vue__ 即时识别DOM中的所有Vue组件及其在代码库中的位置 :person_raising_hand: 为什么？ :glowing_star: 与浏览器无关的最小替代品！ :woman_...
DOM中文文档
02-08
1. **节点（Node）**：在DOM中，文档的每一个部分都被表示为一个节点。例如，HTML元素是元素节点，文本是文本节点，属性是属性节点。所有这些节点共同构成了一个树状结构，称为DOM树。 2. **文档根节点（Document ...
dom-particles:DOM中的粒子效果
05-03
粒子 一个小的JS库，可在DOM中提供粒子样式的效果，而无需利用或其他技术。快速开始在页面的<head>中包含此[removed]标记： [removed][removed] 然后<body>中的某个位置包含以下脚本： [removed] const ...
freeswitch实现监听、三方通话的两种方法
热门推荐
大头菜馅馒头
01-04 1万+
首先是使用freeswitch自带的监听和三方通话的功能， 模块：mod_dptools: eavesdrop       mod_dptools: three_way 使用方法是针对已经建立通话的双方的其中之一的UUID，发送命令或者配置拨号计划来使用，例如： 已经通话的双方UUID是： 9d385df2-e8ce-4c06-a8d9-ab04477a5d27、91b54a88-5
JavaScript如何绑定点击事件
L00H07Y02的博客
05-05 1131
1.使用 onclick 属性 <body> <button onclick="clickevent">按钮</button> </body> <script type="text/javascript"> function clickevent { console.log('事件属性', event) } </script> 2.dom0级事件处理 onclick 方法 <body&g
C#学习（11）事件
WWWWWangXO的博客
02-24 264
初步了解事件 定义：单词Event，译为“事件” 《牛津字典》中的解释是“a thing that happens,especially something important” 通顺的解释就是“能够发生的什么事情” 角色：使对象或类具备通知能力的成员 （原文）An event is a member that enables an object or class to provide noti...
delegate使用方法C#（Demo）
cfqq1989的博客
10-21 2063
老鸟路线。
c# 多线程入门demo
keep innocent
02-16 1681
在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔，本篇继续介绍其中界面部分的一些使用知识，包括控件的赋值、取值、清空，以及相关的使用。 我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等
python写dnf脚本怎么过检测_DNF脚本会被检测到吗？
weixin_39848970的博客
12-14 1万+
谢邀，这么和你说，即使你不用脚本有时也会被检测制裁，就凭官方宁可错杀一千也不放过一个的态度，用脚本一定会有被检测的风险，就看你的运气了。不过如果你问的是被检测的概率，那要看你的脚本会不会动游戏的核心代码，如果动了，那一定会被检测，除非你的技术足够好，可以绕过检测(很少)，所以这种脚本被检测的概率最高。当然，有一种脚本是不会动游戏的核心代码，最简单的就是按键精灵脚本了，作为各大游戏搬砖专用的软件，因...
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
js向dom中添加元素
07-15
可以使用JavaScript向DOM中添加元素的方法有几种，以下是其中一种常见的方法： 1. 使用createElement和appendChild方法： ```javascript // 创建一个新的元素 var newElement = document.createElement('div'); //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值