博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS高级:事件冒泡和事件捕获;
阅读量:5856 次
发布时间:2019-06-19

本文共 1149 字,大约阅读时间需要 3 分钟。

1、事件:浏览器客户端上客户触发的行为成为时事件;所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发

当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做事件对象

2、获取鼠标的坐标

event.clientX;event.clientY

document.οnclick=function(){

    event.clientX

    event.clientY

}

3、关于event的兼容性

标准:event是undefined

非标准:null

解决兼容: var e=e||windoe.event

4、事件冒泡:

当给父子元素同一事件绑定方法的时候,触发了子元素的事件,执行完毕后,也会触发父级元素的相同时间,这种传播机制叫做事件冒泡

取消事件冒泡:event.cancelBubble=true

5、事件捕获:

给父子元素用addEventLIstener()绑定统一个事件,会先触发父元素,然后再传递给子元素,这种传播机制叫做事件捕获

(1)IE低版本没有事件捕获

(2)普通的事件绑定写法没有事件捕获

给元素绑定事件,有两种

(1)常用的写法:

obj.οnclick=function(){}

这个写法有缺点,如果一个元素绑定相同的事件多次,后者会覆盖前者,因此这个写法相当于给obj的onclick的属性赋值

(2)第二种写法

标准浏览器用:addEventListener()

非标准用:attachEvent()

addEventListener(参数1,参数2,参数3)

参数1:事件名,并且不带"on"

参数2:事件函数

参数3:布尔值,代表捕获不捕获,默认值是false,不捕获单冒泡

attathEvent()和addEventListener()的区别

(1)attachEvent()只用在IE8以下,addEventListener()适合标准浏览器

(2)attachEvent()的事件名带on,addEventListener()的事件名不带on

(3)attachEvent()函数里面的this是undefined,addEventListener()的函数里面的this是当前元素对象

(4)attachEvent()只有冒泡没有捕获,addEventListener()有冒泡也有捕获

call和apply

都是改变this的指向的方法,而且是函数对象、类、构造函数 

call和apply的第一个参数是null的时候,函数里面的this还是指向原来的指向不变

所有的事件都是异步的!!!

转载于:https://www.cnblogs.com/qinlinkun/p/10055085.html

你可能感兴趣的文章
Javascript中的对象和原型(一)(转载)
查看>>
SQL Server 2005 数据库复制(转载)
查看>>
Lua 服务器与客户端实例(转)
查看>>
C# 对sharepoint 列表的一些基本操作,包括添加/删除/查询/上传文件给sharepoint list添加数据...
查看>>
Spring Boot 学习(2)
查看>>
Scrapy-Cluster结合Spiderkeeper管理分布式爬虫
查看>>
YII分模块加载路由
查看>>
智能合约设计模式--COP
查看>>
[踩坑] ios版的webview无法长按识别二维码
查看>>
JavaScript面向对象编程——原型
查看>>
调试时经常使用的console.log()的同步和异步问题
查看>>
Docker技术浅谈:私有化部署的优势以及在顶象内部的应用实践
查看>>
跨域问题汇总
查看>>
小技巧|CSS如何实现文字两端对齐
查看>>
自己学习的笔记!!Java分支语句和循环语句
查看>>
PHP数组转换为js数组
查看>>
ES6之Iterator、Generator
查看>>
解决axios 跨域问题 - 服务端修改
查看>>
管理python程序的db schema
查看>>
webpack -> vue Component 从入门到放弃(四)
查看>>