JavaScript第五天(创建元素、dom核心总结、事件操作、dom事件流(捕获、冒泡)、e.target、阻止冒泡、事件委托、鼠标(键盘)事件对象、window)

创建元素的三种方式

    
    



点击
abc

• 拼接效率测试

• 数组拼接

• createElement

DOM的核心总结

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

• 创建

  

• 增加

  

• 删

  

• 改

  

• 查

  

• 属性操作

  

事件操作(重点)

注册事件

事件监听

    
    


传统注册事件
方法监听注册事件

删除事件

    
    
    


1
2
3

DOM事件流

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

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

image

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

    
    
    



    
son盒子

事件对象

什么是事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：

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

事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参用来接收事件对象。

    
    
    


123

事件对象的属性和方法

e.target 和 this 的区别

• this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
• e.target 是事件触发的元素。

常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
    这时候this指向的是父元素，因为它是绑定事件的元素对象，
    而target指向的是子元素，因为他是触发事件的那个具体元素对象。

    
    
    


123

    
1
    
2
    
3

阻止默认行为

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

    
    


123
百度

    

阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处。
把事情委托给别人，代为处理。
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

事件委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

事件委托的作用

• 我们只操作了一次 DOM ，提高了程序的性能。
• 动态新创建的子元素，也拥有事件。

    
点我点我快点我！
    
点我点我快点我！
    
点我点我快点我！
    
点我点我快点我！
    
点我点我快点我！

常用鼠标事件

HTML防止别人分享案例

尊敬的腾讯会员，此乃九阳神功秘籍，不能给别人分享

鼠标事件对象

案例：跟随鼠标的天使

键盘事件

模拟京东按键输入内容

模拟京东快递单号查询

    
    
    



    
123
    

BOM

• BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
• BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
• BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

BOM的构成

顶级对象window

window对象的常见事件

window对象的常见事件

    
    
    


点击

调整窗口大小事件