事件三要素:事件绑定、事件类型、事件函数
常见的处理:
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()