JS-DOM事件高级:1.监听注册事件 2.删除事件的方式 3.DOM事件流 4.event事件对象 5.阻止冒泡 6.事件委托 7.鼠标事件 8.键盘事件

1、注册事件

1.2 addEventListener  事件监听注册方式(i9后支持)

1.3attachEvent—i9以前才支持,了解即可,不提倡使用


2、删除事件


3、DOM事件流


4、事件对象


e.target 返回触发事件的对象

e.type 返回事件的触发类型 比如click

e.preventDefault  阻止默认行为 比如链接不跳转

5、阻止冒泡   e.stopPropagation  


6、事件委托

如果需要给多个子元素绑定相同的点击事件,可以直接给父元素绑定,通过冒泡分享给子元素。例如父元素上有5个小圆圈,想要点击小圆圈后,对应的小圆圈增加一个类名改变样式,就可以直接给父元素绑定。此时点击父元素中的空白空间,父元素也会触发点击事件,如果不想让父元素触发,可以使用事件对象中的target(返回点击的对象),然后写一个正则表达式去匹配返回的这个对象,匹配上了再进行对应的操作

7、鼠标事件

7.2获取鼠标事件对象的不同坐标

案例:图片跟随鼠标移动


8、键盘事件


8.2  e.keyCode  返回该键的ASCII值

模拟京东按S键跳到搜索框案例

模拟快递单号查询案例

你可能感兴趣的:(JS-DOM事件高级:1.监听注册事件 2.删除事件的方式 3.DOM事件流 4.event事件对象 5.阻止冒泡 6.事件委托 7.鼠标事件 8.键盘事件)