事件

1、事件流:

IE:事件冒泡(从具体到模糊 或者说从内到外)

NetScape:事件捕获(从外到内)

Dom事件流:先事件捕获 在 目标阶段  后冒泡阶段

2、事件和事件处理程序

事件就是用户或浏览器自身执行的某种动作(如用户点击 浏览器加载等)。

诸如: click、load、mouseover等都是事件名

响应某个事件的函数叫做事件处理程序,事件处理程序的名字以”on“开头,因此,click事件的处理程序就是onclick   load事件的处理程序就是onload

为事件指定处理程序的方式有好几种:

(1)HTML事件处理程序:某元素支持的每种事件,都可以用一个与相应事件处理程序同名的html特性来指定,特性的值是能够执行的js代码,特性值中可以访问任何全局作用域中的变量和方法。这样指定事件处理程序,特性值会被封装成一个方法,这个方法就是事件发生时要调用的函数,这个方法中会有一个event局部变量,也就是事件对象,该方法中this指向目标元素。

(2)Dom0级事件处理程序:将一个函数赋值给一个Dom对象的事件处理程序属性。(只支持赋值一个事件处理函数)

(以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理)

如下:

<div id="ls">哈哈哈哈</div>

var ls=document.getElementById("ls");
ls.onclick=function(){alert(this.innerText)};  

如何清除事件:ls.onclick=null;

(备注:其实使用htm指定l事件处理程序,相当于 Dom对象 的事件处理程序属性值就是一个包含“html事件特性中值”的函数)

(3)Dom2级事件处理程序:addEventListener("click", tt,true)和 removeEventListener(type, listener)方法。

function tt(){
alert(this.innerHTML);
}

var ls=document.getElementById("ls");

//添加事件

ls.addEventListener("click", tt,true)  //事件添加方法接受3个参数,第一个是事件名 第二个是事件处理程序,第三个(可不传)是一个boolean值,true表示捕获阶段调用,false表示冒泡阶段调用

//去除事件

通过addEventListener添加的事件处理程序只能通过removeEventListener去除。

ls.removeEventListener("click", tt) //其参数要和addEventListener一样  注意如果是匿名函数 则无法移除。

(4)IE事件处理程序:(我测了 连IE(11)浏览器也不支持 估计被淘汰啦,并且IE11下竟然支持 Dom0  和Dom2级事件处理程序)

function remove(){}

.attachEvent("onclick", remove); 

.detachEvent("onclick", remove);

(5)跨浏览器的事件处理程序(自己做判断,能力检测,从而实现跨浏览器),一般js库如jquery都会为我们做的,所以一般不会遇到这个浏览器兼容性问题:

        if (window.addEventListener) {  //Dmo2
                window.addEventListener("load", remove, false);   
            }  

         else if (window.attachEvent) {   //IE
                 window.attachEvent("onload", remove); 
            }     

    else { //Dom0 }

3、事件对象:触发Dom上的某个事件时 会产生一个事件对象event,这个对象包含着与事件有关的所有信息。所有浏览器都支持event对象,
但支持的方式不一样


Dom中的事件对象:(不管指定事件处理程序用的是什么方式Dom0、Dom2,都会传入event对象)
event对象常用的属性和方法介绍:
event.type 被触发的事件类型(事件名),如click;
event.eventPhase 确定事件当前正位于事件流的哪个阶段,1 捕获阶段 2 目标阶段 3冒泡阶段
.currentTarget this 这两个始终是相等的 都是指向绑定事件的Dmo对象
.target 属性 事件目标元素(在哪个元素上真正触发事件的)(当event.eventPhase等于2时 和currentTarget相等)
.cancelable Boolean值 表明是否可以取消事件的默认行为
.preventDefault() 取消默认事件的方法

下面是一些不常用的属性和方法
.bubbles Boolean值 表明事件是否冒泡
.stopPropagation() 取消事件的进一步捕获和冒泡
.stopImmediatePropagation() 取消事件进一步捕获和冒泡 同时阻止任何事件处理程序被调用。

IE中的事件对象:

随着指定事件处理程序的方法不同访问event对象方式也不同 Dom0中 是 window.event  html特性和IE事件处理程序(即attachEvent)中是 event.

event对象的属性和方法   和 Dom中的event也有些不同,

type属性和Dom 相同

srcElement属性 与Dom中的target属性相同

returnValue属性 Boolean值 和Dom中的preventDefault()方法相同,设置为false时

cancelBubble属性 Boolean值 设为true时可以取消事件冒泡(和Dom中的stopPropagation()方法的作用相同)

跨浏览器的事件对象(思想:利用共性:如取消默认事件preventDefault()或者returnValue=false  先使用Dom方式  Dom方式不支持再利用IE event对象属性和方法方式):

4、事件类型:

参考这个:http://www.w3cschool.cc/jsref/dom-obj-event.html

http://zccst.iteye.com/blog/1806261

原文地址:https://www.cnblogs.com/lxf1117/p/4235078.html