（五）.事件

12. 事件

一个事件的组成

触发谁的事件：事件源
触发什么事件：事件类型
触发以后做什么：事件处理函数

  var oDiv = document.querySelector('div')

  oDiv.onclick = function () {}
  // 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
  // 触发什么事件 => onclick => 这个事件类型就是 click
  // 触发之后做什么 => function () {} => 这个事件的处理函数

我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

   var oDiv = document.querySelector('div')

   oDiv.onclick = function () {
     console.log('你点击了 div')
   }

当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数

onclick中on是固定的关键字，事件类型是click事件，给box这个事件源绑定了一个click事件，（只要点击了box这个盒子，后面的事件处理函数就会执行）

13 事件的绑定方式

13-1 事件的绑定

`onxxx`

我们现在给一个注册事件都是使用 onxxx 的方式，
但是这个方式不是很好，只能给一个元素注册一个事件，
一旦写了第二个事件，那么第一个就被覆盖了

  oDiv.onclick = function () {
    console.log('我是第一个事件')
  }

  oDiv.onclick = function () {
    console.log('我是第二个事件')
  }

当你点击的时候，只会执行第二个，第一个就没有了
我们还有一种事件监听的方式去给元素绑定事件

使用 `addEventListener` 的方式添加

这个方法不兼容，在 IE 里面要使用 attachEvent

`addEventListener` : 非 IE 7 8 下使用

语法： 元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)

  oDiv.addEventListener('click', function () {
    console.log('我是第一个事件')
  }, false)

  oDiv.addEventListener('click', function () {
    console.log('我是第二个事件')
  }, false)

当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
先打印 我是第一个事件 再打印 我是第二个事件
注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick

`attachEvent` ：IE 7 8 下使用

语法： 元素.attachEvent('事件类型'，事件处理函数)

 oDiv.attachEvent('onclick', function () {
   console.log('我是第一个事件')
 })

 oDiv.attachEvent('onclick', function () {
   console.log('我是第二个事件')
 })

当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件 再打印 我是第一个事件
注意： 事件类型的时候要写 on，点击事件就行 onclick

两个方式的区别

注册事件的时候事件类型参数的书写
- addEventListener ：不用写 on
- attachEvent ：要写 on
参数个数
- addEventListener ：一般是三个常用参数
- attachEvent ：两个参数
执行顺序
- addEventListener ：顺序注册，顺序执行
- attachEvent ：顺序注册，倒叙执行
适用浏览器
- addEventListener ：非 IE 7 8 的浏览器
- attachEvent ： IE 7 8 浏览器

13-2 事件的解绑

disabled属性

14. 常见的事件

我们在写页面的时候经常用到的一些事件
大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
不需要都记住，但是大概要知道

1.浏览器事件

`load` ：页面全部资源加载完毕

`scroll` ：浏览器滚动的时候触发

2.鼠标事件

`click` ：点击事件

`dblclick` ：双击事件

`contextmenu` ：右键单击事件

`mousedown` ：鼠标左键按下事件

鼠标按下那一刻就会触发，没有反悔余地；click可以按住，不松手就不会触发，可以在外面松手取消。

`mouseup` ：鼠标左键抬起事件

`mousemove` ：鼠标移动

鼠标在它身上移动触发

`mouseover` ：鼠标移入事件（移入移出放大镜）

`mouseout` ：鼠标移出事件

在孩子身上移入移出也会触发移入孩子和移出孩子效果

`mouseenter` ：鼠标移入事件

`mouseleave` ：鼠标移出事件

在孩子身上不会执行

3.键盘事件

场景：window,document, 输入框 input

`keyup` ：键盘抬起事件

`keydown` ：键盘按下事件

`keypress` ：键盘按下再抬起事件

4.表单事件

`change` : 表单内容改变事件

change 获取焦点，失去焦点的对比里面内容不一样才会触发

`input` : 表单内容输入事件

input 内容不一样

`submit` : 表单提交事件

submit提交

`reset` : 表单重置事件

reset重置

5.触摸事件（只针对移动端）

`touchstart` ：触摸开始事件

`touchend` ：触摸结束事件

`touchmove` ：触摸移动事件

`ontouchcancel`

15. 事件对象

什么是事件对象？就是当你触发了一个事件以后，对该事件的一些描述信息
例如
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
- ...
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子，叫做 window.event，就是对事件信息的所有描述
- 比如点击事件
- 你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- 你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- ...
```
oDiv.onclick = function () {
  console.log(window.event.X轴坐标点信息)
  console.log(window.event.Y轴坐标点信息)
}
```
这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题
在 IE低版本 里面这个东西好用，但是在 高版本IE 和 Chrome 里面不好使了
我们就得用另一种方式来获取 事件对象

在每一个事件处理函数的行参位置，默认第一个就是 事件对象

oDiv.onclick = function (e) {
  // e 就是和 IE 的 window.event 一样的东西
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

综上所述，我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法

oDiv.onclick = function (e) {
  e = e || window.event
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

15-1 事件对象————鼠标事件

点击事件的光标坐标点获取

1. clientX和clientY 距离窗口

2. pageX和pageY 距离文档流

3. offsetX和offsetY 距离盒子

16. 案例

16-1鼠标跟随

16-2鼠标拖拽

方案一

方案二

17. 事件的传播

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
就像上面的图片一样
点击在红色盒子上的时候，会触发红色盒子的点击事件
也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
也是点击在了 body 上，也会触发 body 的点击事件
也是点击在了 html 上，也会触发 html 的点击事件
也是点击在了 document 上，也会触发 document 的点击事件
也是点击在了 window 上，也会触发 window 的点击事件
也就是说，页面上任何一个元素触发事件，都会一层一层最终导致 window 的相同事件触发，前提是各层级元素得有注册相同的事件，不然不会触发
在事件传播的过程中，有一些注意的点：
1. 只会传播同类事件
2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
3. 内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发
到现在，我们已经了解了事件的传播，我们再来思考一个问题
- 事件确实会从自己开始，到 window 的所有相同事件都会触发
- 是因为我们点在自己身上，也确实逐层的点在了直至 window 的每一个元素身上
- 但是到底是先点在自己身上，还是先点在了 window 身上呢
- 先点在自己身上，就是先执行自己的事件处理函数，逐层向上最后执行 window 的事件处理函数
- 反之，则是先执行 window 的事件处理函数，逐层向下最后执行自己身上的事件处理函数

冒泡、捕获、目标

我们刚才聊过了，每一个事件，都是有可能从自己到 window ，有可能要执行多个同类型事件
那么这个执行的顺序就有一些说法了

目标

你是点击在哪个元素身上了，那么这个事件的目标就是什么

冒泡

就是从事件目标的事件处理函数开始，依次向外，直到 window 的事件处理函数触发
也就是 从下向上 的执行事件处理函数

捕获

就是从 window 的事件处理函数开始，依次向内，只要事件目标的事件处理函数执行
也就是 从上向下 的执行事件处理函数

冒泡和捕获的区别

就是在事件的传播中，多个同类型事件处理函数的执行顺序不同

17-1. 阻止事件的传播

18. 默认行为

默认行为，就是不用我们注册，它自己就存在的事情
- 比如我们点击鼠标右键的时候，会自动弹出一个菜单
- 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
- ...
这些不需要我们注册就能实现的事情，我们叫做 默认事件

阻止默认行为

有的时候，我们不希望浏览器执行默认事件
- 比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么
- 而不是直接跳转链接
- 那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件
我们有两个方法来阻止默认事件
- e.preventDefault() : 非 IE 使用
- e.returnValue = false ：IE 使用
我们阻止默认事件的时候也要写一个兼容的写法

案例———自定义右键菜单

19. 事件委托

就是把我要做的事情委托给别人来做
因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
所以我们就可以把子元素的事件委托给父元素来做

19-1 事件触发

点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

target

target 这个属性是事件对象里面的属性，表示你点击的目标
当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素
这个 target 也不兼容，在 IE 下要使用 srcElement

19-2 委托

这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件
并且在事件内部，我们也可以拿到你点击的到底是 ul 还是 li
这个时候，我们就可以把 li 的事件委托给 ul 来做

（六）.正则表达式与元字符

20 初识正则表达式

<body>
    <form action="">
        <input type="text" required id="mytext">
        <input type="email">
        <input type="submit" value="submit">
    </form>
    <script>
        //正则表达式

        // js复杂类型

        //1. 字面量 //

        var reg = /abc/ //检测一个字符串里是不是包含“abc”
        
        console.log(reg)
        //2. 内置构造函数 
        var reg2 = new RegExp("abc")
        console.log(reg2)


        mytext.onblur = function(){
            console.log(mytext.value)


            console.log(reg.test(mytext.value))
        }
    </script>
</body>

21 元字符

21-1 `基本元字符`

1. \d 一位数字（0-9）

2. \D 包含一位非数字

3. \s 1位空白（空格缩进换行\n）

4. \S 1位非空白

5. \w 字母数字下划线

6. \W 非字幕数字下划线

7. . 任意内容（换行不算）

8 . \转义字符

21-2 `边界符`

1.^ 限制开头

2.$ 限制结尾边界

3.^开头结束$

21-3 `限定符`

1. * 0~多次

2. + 1~多次

3. ? 0~1

4. {n} 指定次数

5. {n,} >=n 大于等于n个

6. {n,m} 在n-m个中间

21-4 `特殊符号`

1.() 整体

2. | 或，左右

3.[] 代表1个

4.[^abc] ， [^]表示取反

21-5 `捕获exec`

1. exec() 捕获片段

2. 标识符 g全局标识符 i忽略大小写

21-6 正则表达式的两大`特性`

1. 懒惰每次从字符串开始的地方找解决：使用全局标识符g

2. 贪婪把符合规则的最大可能性匹配出来

3. 非贪婪?

21-7 `正则与字符串方法`

1.replace替换

2.search查找

3.match捕获内容

案例：密码强度验证

（七）.this指向

22. `this` 关键字

22-1 this指向

每一个函数内部都有一个关键字是 this 可以让我们直接使用的
重点： 函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系
函数内部的 this 指向谁，取决于函数的调用方式

全局定义的函数直接调用，`this => window`

对象内部的方法调用，`this => 调用者`

定时器的处理函数，`this => window`

事件处理函数，`this => 事件源`

自调用函数，`this => window`

22-2 改变this指向

call 和 apply 和 bind

刚才我们说过的都是函数的基本调用方式里面的 this 指向
我们还有三个可以忽略函数本身的 this 指向转而指向别的地方
这三个方法就是 call / apply / bind
是强行改变 this 指向的方法

1.call

call 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
语法： 函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...)
- fn() 的时候，函数内部的 this 指向 window
- fn.call(obj, 1, 2) 的时候，函数内部的 this 就指向了 obj 这个对象
- 使用 call 方法的时候
  - 会立即执行函数
  - 第一个参数是你要改变的函数内部的 this 指向
  - 第二个参数开始，依次是向函数传递参数

2.apply

apply 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
语法： 函数名.apply(要改变的 this 指向，[要给函数传递的参数1，要给函数传递的参数2， ...])
- fn() 的时候，函数内部的 this 指向 window
- fn.apply(obj, [1, 2]) 的时候，函数内部的 this 就指向了 obj 这个对象
- 使用 apply 方法的时候
  - 会立即执行函数
  - 第一个参数是你要改变的函数内部的 this 指向
  - 第二个参数是一个数组，数组里面的每一项依次是向函数传递的参数

3.bind

bind 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
和 call / apply 有一些不一样，就是不会立即执行函数，而是返回一个已经改变了 this 指向的函数
语法： var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)
- bind 调用的时候，不会执行 fn 这个函数，而是返回一个新的函数
- 这个新的函数就是一个改变了 this 指向以后的 fn 函数
- fn(1, 2) 的时候 this 指向 window
- newFn(1, 2) 的时候执行的是一个和 fn 一模一样的函数，只不过里面的 this 指向改成了 obj

Java Script 学习笔记5 三