事件

事件冒泡

IE事件流被称为事件冒泡。

事件被定义为从最具体的元素开始触发，然后向上传播至没有那么具体的元素。一直冒泡到window对象。

事件捕获

事件捕获到意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。

所有浏览器都是从window对象开始捕获事件。

DOM2 Events规范规定从document开始捕获。

事件处理程序

HTML事件处理程序

在HTML中定义的事件处理程序可以包含精确的动作指令，也可以调用在页面其他地方定义的脚本。

<script>
  function showMessage(){
    console.log("hello");
  }
</script>
<input type="button" value="Click Me" onclick="showMessage()"/>

以这种方式指定的事件处理程序有一些特殊的地方。首先，会创建一个函数来封装属性的值。这个函数有一个特殊的局部变量event，其中保存的就是event对象。

这个动态创建的包装函数还有一个特别有意思的地方，就是其作用域被扩展了。在这个函数中，document和元素自身的成员都可以被当成局部变量来访问。这是通过with实现的：

function(){
	with(document){
		with(this){
			//属性值
		}
	}
}
DOM0 事件处理程序

此赋值函数被视为元素的方法。因此，事件处理程序会在元素的作用域中运行，即this等于元素。

let btn = document.getElementById("myBtn");
btn.onclick = function (){
  console.log(this.id);
}

以这种方式添加事件处理程序是注册在事件流的冒泡阶段的。

DOM2 事件处理程序

DOM2 Events为事件处理陈故乡的赋值和移除定义了两个方法：addEventListener()和removeEventListener()，接收三个参数：事件名、事件处理函数和一个布尔值。true表示在捕获阶段调用事件处理程序，false为默认值，表示在冒泡阶段调用事件处理程序。

优势在于可以为同一个事件添加多个事件处理程序。

事件对象

DOM事件对象

event对象是传给事件处理程序的唯一参数。

任何可以通过preventDefault()取消默认行为都事件，其事件对象的cancelable属性都会设置为true。

跨浏览器事件对象
let EventUtil={
    addHandler: function(element,type,handler){
      
    },
    getEvent:function (event){
      //在ie中event事件对象存储在window对象之上
      return event?event : window.event;
    },
    getTarget:function(event){
      //在ie中target目标内容存储在srcelement中
      return event.target || event.srcElement;
    },
    preventDefault: function(event){
      if (event.preventDefault){
        event.preventDefault();
      }else{
        event.returnValue = false;
      }
    },
    removeHandler:function(element,type,handler){
      
    },
    stopPropagation: function(event){
      if(event.stopPropagation){
        event.stopPropagation();
      }else{
        event.cancelBubble=true;
      }
    }
  }

事件类型

用户界面事件
  • load：在window上当页面加载完成后触发，在窗套(<frameset>)上当所有窗格(<frame>)都加载完成后触发。
  • Unload：在window上当页面完全卸载后触发。
  • abort：在<object>元素上当相应对象加载完成前被用户提前终止下载时触发。
  • Error：在window上当JS报错时触发，<img>上当无法加载指定图片时触发。<object>上当无法加载相应对象时触发。
  • Select：在文本框（<input>或textarea）上当用户选择一个或多个字符时触发。
  • resize:window或窗格上被缩放时触发。
  • scroll：用户滚动包含滚动条都元素时在元素上触发。