Js高级（1）事件11.30

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　JS高级（1）

1.事件

概念：浏览器客户端上客户触发的行为都称为事件，所有的事件都是天生自带的，不需要我们去绑定，只需要我们去触发。通过obj.事件名=function(){}

事件名：onmouseover, onmouseout, onmousedown, onmousemove, onmouseup

onclick, onchange, onfocus, onblur等。

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

　　所有事件在绑定方法的时候，天生自带一个参数就叫event。

鼠标的坐标：event.clientX；

　　　　　event.clientY.

event的兼容性：

在chrome下，event是undefined，在IE低版本下是null，火狐下会报错。

2.事件冒泡

什么叫事件冒泡？

　　定义：当给父子元素的相同事件绑定方法时，触发了子元素身上的事件，执行完毕之后也会触发父级元素事件，这种传播机制叫事件冒泡。

如何取消事件冒泡：event有个属性叫cancelBubble，默认值是false，改成true就取消事件冒泡。

　　event.cancelBubble=true

3.事件捕获

（1）给一个元素绑定事件，普通写法是

obj.οnclick=function(){}

obj.οnclick=function(){} 这就相当于给obj的onclick属性赋值了。这种写法有一点不好，后者会将前者覆盖掉。

（2）事件绑定的第二种写法：标准浏览器用addEventListner()这个方法，IE低版本用attachEvent()这个方法

addEventListner(参数1，参数2，参数3）

　　　　参数1：事件名，事件名不能带on。

　　　　参数2：事件函数；

　　　　参数3：布尔值，代表捕获不捕获，默认是false 不捕获但是冒泡，true是捕获但不冒泡。

（3）事件捕获：<1>IE低版本没有事件捕获

　　　　　　　　<2>普通事件绑定写法没有捕获

　　　　定义：给父子元素用addEventListner()绑定同一个事件时，当触发子元素身上的事件，会触发父元素，然后再传递给子元素，这种传播机制叫事件捕获。

****attachEvent()和addEventListner（）二者的区别：

　　　<1>attachEvent()只用在IE8以下，addEventListner()适合用在标准浏览器下

　　　<2>attachEvent()里的事件名带on,而addEventListner()事件名不带on

　　　<3>attachEvent()里面的this是window，addEventListner()里的this是当前元素对象（触发该事件的函数）

　　　<4>attachEvent()只有冒泡没有捕获，addEventListner()既有冒泡也有捕获。

4.call和apply

call和apply就是改变函数里this的指向的方法。xxx.apply()或xxx.call()

　　特别强调：xxx必须是function（普通函数，类，构造函数）

call()中的第一个参数是null的时候，汉书里的this还是指向原来的，不变。

所有事件都是异步的。

转载于:https://www.cnblogs.com/yuanjingjing/p/10044150.html

Js高级（1）事件11.30相关推荐

JS高级：事件冒泡和事件捕获；
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
js高级：面向对象+ES6
js高级:面向对象+ES6 文章目录 js高级:面向对象+ES6 day01 一.ES6中的类和对象 1.1对象 1.2类 1.3创建类 1.4类constructor构造函数 1.5类中添加方法 1 ...
前端复习8：JS高级
前端复习8:JS高级 1.对象 1.1 面向过程与面向对象 1.2 对象与类 2 构造函数和原型 2.1 构造函数 2.2 构造原型prototype 2.2 对象原型 2.3 constructor ...
~【笔记】黑马js高级和尚硅谷ES6笔记（部分）~
点击通往->黑马pink讲js高级. 点击通往->尚硅谷ES6视频. 目录: js高级: 第一部分.构造函数.原型和继承第二部分.函数进阶一.函数的定义和调用二.this 三.严格模 ...
前端面试题总结(js高级部分)
七.JS 高级 1.JQuery 一个对象可以同时绑定多个事件,这是如何实现的? 2.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么? 3.如何测试前端代码么? ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
11.28 限定某个目录禁止解析php 11.29 限制user_agent 11.30/11.31 php相关配置
- 11.28 限定某个目录禁止解析php - 11.29 限制user_agent - 11.30/11.31 php相关配置 - 扩展 - apache开启压缩 http://ask.apelea ...
node.js书籍_2020年11部最佳Node Js书籍
node.js书籍 When we talk about any programming language, it's very easy to find any video course on Ud ...
JS高级+ES678
js高级数据类型基本(值)类型 Number: 任意数值 String: 任意文本 Boolean: true/false undefined: undefined null: null 对象(引 ...

Js高级（1）事件11.30

Js高级（1）事件11.30相关推荐

最新文章

热门文章

Js高级（1） 事件11.30

Js高级（1） 事件11.30相关推荐

最新文章

热门文章

Js高级（1）事件11.30

Js高级（1）事件11.30相关推荐