js事件基本概念

1.事件模型:

 

  •         事件冒泡。
  •         事件捕获。

2.事件流

    概念:事件流指的是事件从捕获、处于目标、事件冒泡三个阶段

3.DOM的三个阶段?

    DOM0:事件的添加用onclick添加。

    DOM2:  事件的添加用addEvenListener(type. function , buhuo);并且可以添加多个事件,this===当前的对象。IE浏览器是通过attachEvent方式添加事件的,当使用它创建多个事件的时候,它会从后向前触发事件。并且他的事件处理会在全局作用域执行,this===window。

    DOM3:新增键盘事件。

4.event对象

    event对象中包含着所有事件相关的属性,如bubbles、stopPropagation(),target依次分别表示,是否冒泡、取消冒泡、时间的目标等。IE浏览器是通过event.srcElement来获取当前对象。其他都是event.target

5.事件委托

    事件委托就是利用事件冒泡,只指定一个事件,就可以处理某一类型的所有事件。

    优点:

            减少了对DOM的引用,降低了DOM操作的花费事件。

            整个页面占用的内存空间更少,能够提升整体性能。

3.1 这里的IE是IE11以下; 3.2 参数的差别: attachEvent()的第一个参数比addEventListener()的事件名多一个"on", 且没有第三个参数,因为IE事件模型只支持冒泡事件流; 3.3 事件处理函数作用域的区别: IE中事件处理程序处于全局作用域,其内的this会指向window; 而用DOM(0或2)级事件的事件处理程序的作用域是元素作用域,其内的this指向其所属的元素 例: document.addEventListener("click", function(){ if(this == document){ alert("此时this指向document"); } }, false); 3.4 事件对象event的属性方法的差别 IE DOM cancelBubble = true stopPropagation() //停止冒泡 returnValue = false preventDefault() //阻止元素默认事件 srcEelement target //事件目标

 

 

你可能感兴趣的:(js)