六、事件高级(注册事件的三种方式、解绑事件、DOM事件流、事件对象及其属性和方法、事件委托、新的两个鼠标事件、鼠标对象的坐标属性、常见的键盘事件、键盘事件的常用属性keyCode)

目录

 

六、事件高级 

6.1 注册事件(绑定事件)

1)概述 

2)addEventListener 事件监听方式 

3)attachEvent事件监听方式(了解)

4)用三种方式注册事件,体会它们的不同之处 

6.2 删除事件(解绑事件)

6.3 DOM事件流 

6.4 事件对象 (重点)

1)什么是事件对象 

2)事件对象的使用语法 

3)事件对象的常用属性和方法 

        (1)返回对象(属性)

        (2)返回事件类型(属性)

        (3)阻止事件默认事件/行为(方法、属性)

        (4)阻止事件冒泡 (方法、属性)♥

6.5 事件委托(代理、委派)♥

6.6 鼠标事件——防止页面copy文字 

6.7 鼠标事件的坐标属性 

案例-跟随鼠标的天使 

6.8 常用的键盘事件 

6.9 键盘事件对象的keyCode属性 

 案例1:模拟京东按s键输入内容 

 案例2:模拟京东快递单号查询  


复习一下事件基础的内容:也是DOM 重点核心内容

        关于dom操作,我们主要针对于元素的操作。

        主要学了元素的创建、增、删、改、查、以及元素属性操作、事件操作

1)元素的创建 

        ① document.write('<标签名>内容</标签名>');

        ② innerHTML='<标签名>内容</标签名>';

        ③ document.creatElement('标签名');  

注意:三种都要赋值给变量装起来

2)元素的增 

        ①父元素.appendChild(子元素)   // 在后面添加

        ②父元素.insertBefore(子元素,位置);// 在前面追加

注意:通常是和document.creatElement('标签名'); 配合使用 ,先创建子节点,再把子节点添加到父节点中

3)元素的删 

        父元素.removeChild(子元素); 

4)元素的改 

 

5)元素的查 

6)属性操作 

7)事件操作 

 给元素注册事件, 采取 事件源.事件类型 = 事件处理程序

六、事件高级 

6.1 注册事件(绑定事件)

1)概述 

2)addEventListener 事件监听方式 

3)attachEvent事件监听方式(了解)

4)用三种方式注册事件,体会它们的不同之处 

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件                     (第二推荐使用)
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('hao a u');               //由于唯一性,只能执行后面一个事件处理程序
        }

        // 2. 事件侦听注册事件 addEventListener    (推荐使用)
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 与传统方法不同的是:这种方式同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
        btns[1].addEventListener('click', function () {
            alert(22);
        }) // 重点学习addEventListener()函数的两个参数
        btns[1].addEventListener('click', function () {
            alert(33);
        })

        // 3. attachEvent ie9以前的版本支持 (不推荐,因为是非标准的)了解即可 
        // 有两个参数,事件必须加on,回调函数和上面一样
        btns[2].attachEvent('onclick', function () {
            alert(11);
        })
    </script>
</body>

</html>

效果:

6.2 删除事件(解绑事件)

        当我们点击一定次数的按钮后,可以通过disable的方式,禁用按钮,但其他元素没有这个属性来控制点击的次数,这时候就可以给点击事件解绑。

没有给div元素删除点击事件前:可以无限次地点击

注意

        用传统方式删除事件,是用 事件源.事件=null的形式。

        用监听方式删除事件时,不能用匿名函数。

代码:(删除事件过后,只能点击一次)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天一定要早睡

你的鼓励,我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值