欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js高级:event,事件冒泡,事件捕获

程序员文章站 2022-03-12 19:49:21
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发。 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬浮 onmouseout 鼠标移除 onmousedown鼠标按下 onmouseup 鼠标抬起 o ......

1.事件

  浏览器客户端上客户触发的行为都称为事件

所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发

通过 obj.事件名=function(){}

事件名:onmouseover 鼠标悬浮

     onmouseout   鼠标移除

    onmousedown鼠标按下

    onmouseup     鼠标抬起

    onmouseenter 鼠标进入

    onmouseleare 鼠标离开

    onmousemove鼠标移动

    onfocus      表单聚焦

    onblur         表单失去焦点

    onchang   表单修改

    onclick    点击

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

我们把它叫事件对象 

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

鼠标的坐标

      event.clientx

      event.clienty

js高级:event,事件冒泡,事件捕获

event的兼容性

在chrome下event是undefined在ie低版本下是null,火狐下会报错

document.onclick=function(e){

        var e=e||window.event

    }

2.事件冒泡

什么叫事件冒泡

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

js高级:event,事件冒泡,事件捕获

取消事件冒泡

event对象有个属性叫cancelbubble默认值是false改成true就取消当前事件冒泡

js高级:event,事件冒泡,事件捕获

3.事件捕获

给一个元素绑定事件,普通写法是

obj.onclick=function(){}这相当于给obj的onclick属性赋值一个道理

obj.onclick=function(){}

这种写法有一点不好,后者会将前者覆盖

事件绑定的第二种写法

标准浏览器用addeventlistener()这个方法

ie低版本用attachevent()这个方法

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

参数1 是事件名 事件名不能带on

参数2  时间函数

参数3  布尔值 代表捕获不捕获 默认是dalse 不能捕获但是冒泡

事件捕获

      1.ie低版本没有捕获

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

事件捕获

  给父子元素用addeventlistener()绑定同一个事件,当触发子元素身上的事件,先会触发父元素,然后在传递给子元素,这种传播机制叫事件捕获

attachevent()和addeventlistener()二者的区别

1.  attchevent 只用ie8以下,addeventlistener()适合标准浏览器

2.  attchevent()的事件名带on而addeventlistener函数里面的this是当前元素对象

attchevent只有冒泡没有捕获 addeventlistener()有冒泡也有捕获

4. call和apply()

特别强调一下xxx必须是function(普通函数,类,构造函数)

 

var obj={

 

            name:"哈喽"

 

      }

 

      function fn(){

 

            console.log(this.name)

 

      }

 

      fn.call(obj)

 

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

 

所有事件都是异步的。