day32 js笔记 事件（上）2021.09.27

事件三要素：事件绑定、事件类型、事件函数

常见的处理：

1.在标签或者js文件中 dom元素.事件 = function(){}

2.function fn(){} dom元素.onclick = fn

        - 这种不要在函数名称后面添加小括号 自己调用执行

注意：提交表单的时候不要给form表单绑定单击事件,表单会默认提交 提交后就相当于刷新页面跳转到新的页面 表单中submit方法

事件流：

- 捕获阶段:从代码的最外层开始往代码的内层去查找,是一个查找绑定事件的过程(从外层到内层)

- 目标阶段:到达目标事件的位置 触发事件

- 冒泡阶段:从目标事件开始又往html跟文档方向再次回溯(从内层到外层)     浏览器默认事件！！

事件绑定: 之前使用事件绑定的方法是 on+事件类型 这种方式可以但在特殊情况下是有bug的

- 同类型的事件 绑定在一个标签上 就会出现bug 后面的会把前面的覆盖

监听器/侦听器

语法: dom元素.addEventListener('不加on的事件类型',事件处理函数function(){

// 执行的代码段

},是否在捕获阶段执行-常用的是false默认值是在冒泡阶段)

重点:ele.addEventListener(type, handler) 写法要记住 可以解决on+事件类型的bug

 监听器绑定：

 监听器解绑：

 事件对象：

 阻止事件冒泡：

--目的：如果有多个盒子嵌套 点击最小盒子进行跳转 由于冒泡的存在可能会影响到当前页面的打开跳转 会打开最外面的这个页面进行跳转解析 所以这种情况是有不符合我的需求的 阻止默认的冒泡行为

阻止冒泡: 事件对象

- stopPropagation() 是一个方法 (停止传播) 只能在高版本中使用

- e.cancelBubble = true 在低版本中使用

阻止浏览器默认行为的方法：preventDefault()