js事件高级

Posted 2021-03-17 leizhui

1、注册事件

　　1.1、注册事件概述

　　　　给元素添加事件，称为注册事件或者绑定事件

　　　　注册事件有两种方式：传统方式和方法监听注册方式

　　　　　　@传统注册方式：

　　　　　　　　利用on开头的事件onclick　　　　

　　　　　　　　特点 注册事件的唯一性。 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面的注册的处理函数

 

　　　　　　@方法监听注册方式

　　　　　　　　w3c标准 推荐方式

　　　　　　　　addEventListener()它是一个方法

　　　　　　　　IE9之前不支持方法可以用attachEvent()代替

　　　　　　　　特点：同一个元素同一个事件可以注册多个监听器

　　　　　　　　按注册顺序依次执行

　　1.2、addEventListener 事件监听方式

　　　　eventTarget.addEventListenner(type,listener[,useCapture])

　　　　eventTarget.addEventListenner方法将指定的监听器注册到eventTarget（目标对象）上当该对象触发指定的事件时，就会执行事件处理函数

　　　　方法的接收的单个参数

　　　　　　type:事件类型字符串 比如  click  mouseover 

　　　　　　listener：事件处理函数 事件法师时 会调用该监听函数

　　　　　　useCaptrue：可选参数 时一个布尔值  默认时false

　　2.1、删除事件

　　　　1、传统注册方式

　　　　　　eventTarget.onclick=null

　　　　2、方法监听注册方式

　　　　　　eventTarget.removeEventListener(type,listener,[usecapture])

　　　　　　 

 　　3、

　　4、事件对象

　　　　1、什么时事件对象

　　　　　　官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按键的状态 　　简单理解：事件发生后跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event,它有很多属性和方法。

　　　　　　　　eventTarget.addEventListener(‘click‘,function(event){})

　　5.1、阻止事件冒泡的方式

　　　　事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

　　　　事件冒泡本身的特性会带来坏处，也会带来好处，需要我们灵活掌握

　　　　阻止事件冒泡

　　　　　　利用事件对象里的stopPropagation()方法

　　　　　　e.stopPropagation()

　　6、事件委托

　　　　事件委托原理：

　　　　　　不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响每个子节点

　　　　事件委托的作用

　　　　　　我们只操作一此DOM，提高了运行效率。

　　7.1常用的鼠标事件　　

　　　　1.禁止鼠标右键菜单

　　　　　　contextmenu 主要控制何时显示上下文菜单，主要用于取消默认的上下文菜单

　　　　　　

1  document.addEventListener(‘contextmenu‘ function(e){
2    e.preventDefault() 
3 })

　　　　2.禁止鼠标选中（selectstart）

 

 

1  document.addEventListener(‘selectstart‘ function(e){
2    e.preventDefault() 
3 })

　　8.7、常用的键盘事件

　　　　onkeyup 键盘被松开时触发、 onkeydown 键盘被按下时触发  onkeypress键盘被按下时触发 功能键不能识别

 

　　

　　　　　　　　~