视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript高级程序设计阅读笔记(十七)js事件_javascript技巧
2020-11-27 21:04:49 责编:小采
文档


一、事件流

  IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标。
  Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反。
  DOM事件流同时支持两种事件模型,但捕获型事件先发生。

二、事件处理函数/监听函数

  事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字,如click、load、mouseover等。
  事件处理函数有两种分配方式:在JavaScript中或者在HTML中。
  如果在JavaScript中分配事件处理函数,则首先要获得要处理的对象的引用,然后将函数赋值给对应的事件处理函数属性,像这样(事件处理函数名称必须小写):
代码如下:
var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
alert("I was clicked");
}

  如果在HTML中分配事件处理函数,则只要在HTML标签中添加事件处理函数的特征,并在其中包含合适的脚本作为特性值就可以了,如下:
代码如下:
  

为了给每个可用事件分配多个事件处理函数,IE和DOM各提供了自己的方法。
  IE中每个元素和window对象都有两个方法:attachEvent()和detachEvent(),顾名思义,前者用来给一个事件附加事件处理函数,后者用来将事件处理函数分离出来。每个方法都有两个参数:要分配的事件处理函数名字及一个函数。如:
代码如下:
var fnClick=function(){
alert("Clicked");
}
var fnClick2=function(){
alert("Click2");
}
var oDiv=document.getElementById("div");
oDiv.attachEvent("onclick",fnClick);
oDiv.attachEvent("onclick",fnClick2)
oDiv.detachEvent("onclick",fnClick);
oDiv.detachEvent("onclick",fnClick2);

DOM中采用了addEventListener()和removeEventListener()来分配和移除事件处理函数。与IE不同的是这些方法有三个参数,第三个参数标识是用于冒泡阶段还是捕获阶段。用于捕获阶段为true,用于冒泡阶段则为false。移除时第三个参数要跟添加时保持一致。如:
代码如下:
var fnClick=function(){
alert("Clicked");
}
var fnClick2=function(){
alert("Click2");
}
var oDiv=document.getElementById("div");
oDiv.addEventListener("onclick",fnClick,false);
oDiv.addEventListener("onclick",fnClick2,false)
oDiv.removeEventListener("onclick",fnClick,false);
oDiv.removeEventListener("onclick",fnClick2,false);

三、事件对象

  事件对象一般包含的信息是:引起事件的对象,事件发生时鼠标的信息,事件发生时键盘的信息。
定位
  IE中事件对象是window对象的一个属性event。事件处理函数必须这样访问事件对象:
代码如下:
oDiv.onclick = function(){
var oEvent=window.event;
}

DOM标准则说,event对象必须作为唯一的参数传递给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla、Safair、Opera)中访问事件对象为:
代码如下:
oDiv.onclick=function(){
var oEvent=arguments[0];
}
//or
oDiv.onclick=function(oEvent){
}

属性方法相似性

  1、获取事件类型:oEvent.type
  2、获取按键代码:oEvent.keyCode
  3、检测Shift、Alt、Ctrl键:oEvent.shiftKey;oEvent.altKey;oEvent.ctrlKey;
  4、获取客户端鼠标坐标:oEvent.clientX;oEvent.clientY;
  5、获取屏幕坐标:oEvent.screenX;oEvent.screenY;

属性方法区别

  1、获取目标:IE用srcElement,DOM用target;
  2、获取按键字符代码:IE用keyCode,DOM用charCode和String.fromCharCode;
  3、阻止某个事件的默认行为:IE用oEvent.returnValue=false,DOM用preventDefault()方法;
  4、停止事件冒泡:IE中用oEvent.cancelBubble=true;DOM中用oEvent.stopPropagation();

四、事件的类型

  1、鼠标事件
  鼠标事件包含click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove。
  事件顺序:dblclick事件会先后触发以下事件:mousedown、mouseup、click、mousedown、mouseup、click、dblclick。
  2、键盘事件
  键盘事件包括:keydown、keypress、keyup。
  事件顺序:用户按一次某字符按键时,会先后触发以下事件:keydown、keypress、keyup。如果按一次某非字符按键时,会先后触发以下事件:keydown、keyup。
  3、HTML事件
  HTML事件包括:load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。
  4、变化事件
  虽然变化事件已经是DOM标准的一部分,但是目前还没有任何主流的浏览器实现了它。因此这里只是列举出来。
  变化事件包括:DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsteredIntoDocument。

作者:Artwl
出处:http://artwl.cnblogs.com

下载本文
显示全文
专题