JS高级程序设计13-事件

原创 于 2015-07-19 16:02:36 发布 · 438 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了网页事件处理的基础知识，包括事件流、事件冒泡与捕捉、DOM事件流、HTML与DOM事件处理程序，以及不同浏览器的事件处理方式。文章还探讨了事件处理程序的缺点、跨浏览器兼容性、事件对象、事件类型和事件处理策略，旨在帮助开发者更高效地管理和优化网页交互体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 事件流(P345)

    事件冒泡（所有浏览器都支持事件冒泡）
    事件捕捉（不用了解）
    DOM事件流

  • 事件处理程序(P348)

    HTML事件处理程序（P348）

    <form method="post">
    <input type="text" name="username" value="dfssd" />
    <input type="button" value="Echo Username" onclick="alert(username.value)" />
</form>
HTML事件处理程序的缺点;
//时差问题（用户可能会在HTML元素以出现就触发了事件，但相应的事件处理程序还没有准备好）
//HTML与JS代码紧密耦合，改动的话往往需要改动两个地方

    DOM0级事件处理程序(P350)

    var btn=document.getElementById("myBtn");
btn.onclick=function(){ 
    alert(this.id); //"myBtn"
};

    DOM2级事件处理程序(P351)

    //使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){ 
    alert(this.id);
},false);
btn.addEventListener("click",function(){
    alert("Hello world!");
},false);

//removeEventListener()的用法
btn.addEventListener("click",handler.false);
btn.removeEventListener("click",handler.false);

    IE事件处理程序(略)(P352)

    跨浏览器的事件处理程序(P353)

    var EventUtil={ 
    addHandler:function(element,type,handler){ 
        if(element.addEventListener){ 
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){ 
            element.attachEvent("on"+type,handler);
        }else{ 
            element["on"+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){ 
        if(element.removeEventListener){ 
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){ 
            element.detachEvent("on"+type,handler);
        }else{ 
            element["on"+type]=null;
        }
    }
};

//使用上面的代码
var btn=document.getElementById("myBtn");
var handler=function(){ 
    alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

  • 事件对象(event对象)(P355)

    事件处理程序存在于按钮的父节点中，this和currentTarget都等于document.body,因为事件处理程序注册到这个元素上，但target元素却等于按钮元素，因为它才是click事件真正的目标(P356)

    document.body.onclick=function(event){ 
    alert(event.currentTarget===document.body); //true
    alert(this===document.body); //true
    alert(event.target===document.getElementById("myBtn")); //true
};

    需要一个函数处理多个事件时，可以使用type属性(P356)

    var btn=document.getElementById("myBtn");
var handler=function(event){ 
    switch(event.type){ 
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor="red";
            break;
        case "click":
            event.target.style.backgroundColor="";
            break;
    }
};
btn.onclick=handler;
btn.ommouseover=hamdler;
btn.onmouseout=handler;

    阻止特定事件的默认行为(P357)

    //要阻止特定事件的默认行为，可以使用preventDefault()方法
//只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为

    停止事件在DOM层次的传播(P357)

    //stopPropagation()方法用于停止事件在DOM层次的传播，即取消进一步的事件捕捉或冒泡
var btn=document.getElementById("myBtn");
btn.onclick=function(event){ 
    alert("Clicked");
    event.stopPropagation();
};
document.body.onclick=function(event){ //这个事件处理程序不会在按钮点击的时候触发
    alert("Body clicked");
};

    eventPahse属性(P358)

    //事件对象的eventPahse属性，可以用来确定时间当前正处于事件流的哪个阶段
document.body.addEventListener("click",function(){ 
    alert(event.eventPhase); //1（事件捕捉阶段）
},true);
var btn=document.getElementById("myBtn");
btn.onclick=function(event){ 
    alert(event.eventPhase); //2(事件处理程序处于目标对象上)
};
document.body.onclick=function(){ 
    alert(event.eventPhase); //3(事件冒泡阶段)
}

    IE中的事件对象（略P358）
    跨浏览器的事件对象（略P360）

  • 事件类型（P362）

    DOM3级事件规定了以下几类事件：

    UI事件--当用户与页面上的元素交互时触发；
焦点事件--当元素获得或失去焦点时触发；
鼠标事件--当用户通过鼠标在页面上执行操作时触发；
滚轮事件--当使用鼠标滚轮式=时触发；
文本事件--当在文档中输入文本时触发；
键盘事件--当用户通过键盘在页面上执行操作时触发；
合成事件--当为IME输入字符时触发；
变动事件--当底层DOM结构发生改变时触发；
变动名称事件--当元素或属性名变动时触发

    UI事件（P362）

    load--当内容加载完全后触发；
unload--当内容完全卸载后触发；
abort--当用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发；
error--当JS发生错误时在window上激发，无法加载内容的话在相应的元素上触发；
select--当用户选择文本框中的一个或多个字符时触发；
resize--当窗口或框架的大小变化时在window或框架上面触发；
scroll--当用户滚动带滚动条的元素中的内容时，在改元素上面触发

    焦点事件（P367）

    blur--在元素失去焦点时触发（不冒泡）；
focus--在元素获得焦点时触发（不冒泡）；

focusin--在元素获得焦点时触发（冒泡）；
focusout--在元素失去焦点时触发；

    鼠标与滚轮事件（P368）

    click--在用户单击主鼠标按钮或者按下回车键时触发；
dblclick--在用户双击主鼠标按钮时触发；
mousedown--在用户按下任意鼠标按键时触发；
mouseenter--在鼠标从元素外部首次移动到元素范围内时触发（不冒泡，移动到后代元素上也不会触发）；
mouseleave--在位于元素上方的鼠标光标移动到元素范围之外时触发（不冒泡，移动到后代元素上也不会触发）；
mousemove--当鼠标指针在元素内部移动时重复地触发；
mouseout--在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发；
mouseover--在鼠标指针位于一个元素外部，然后首次移入另一个元素边界之内时触发；
mouseup--在用户释放鼠标按钮时触发。

//客户区坐标位置
clientX和clientY表示事件发生时鼠标指针在时口中的水平和垂直坐标
获取鼠标事件的客户端坐标位置：
var div=document.getElementById("myDiv");
EcentUtil.addHandler(div,"click",function(event){ 
    event=EventUtil.getEvent(event);
    alert("Client coordinates:"+event.clientX+","+event.clientY);
});

//页面坐标位置
pageX和pageY属性可以知道事件是在页面中的什么位置发生的

//屏幕坐标位置
screenX和screenY属性可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息

//相关元素
DOM通过event对象的relatedTarget属性提供了相关元素的信息

//鼠标按钮
DOM的button属性可能有如下3个值：
0表示主鼠标按钮；
1表示中间的鼠标按钮
2表示次鼠标按钮

//更多的事件信息
detail属性，表示给定位置上发生了多少次单击

//鼠标滚轮事件
mousewheel事件---任何元素上滚动时触发
对应的属性有wheelDelta，以数值的形式显示鼠标滚动的程度和方向

    键盘与文本事件(P379)

    有3个键盘事件：
keydown--当用户按下键盘上的任意按键时触发，而且如果按住不放的话，会重复触发此事件；
keypress--当用户按下键盘上的字符键（或ESC）时触发，而且如果按住不放的话，会重复触发此事件；
keyup--当用户释放键盘上的键时触发。
1个文本事件：
textInput--将文本显示给用户之前更容易拦截文本（不懂）

//键码（P380）
keyCode属性
//字符编码
charCode属性--代表按键对应字符的ASCII码
提取的字符编码可以使用String.fromCharCode()将其转换为实际的字符

//textInput事件
当用户在可编辑区域中输入字符时，就会触发这个事件
event对象的data属性---属性的值就是用户输入的字符
event的inputMethod属性--表示把文本输入到文本框中的方式

    复合事件(P384)

    复合事件用于处理IME的输入序列

//有三种复合事件：
compositionstart--在IME的文本复合系统打开时触发，表示要开始输入了；
compositionupdate--在向输入字段中插入新字符时触发；
compositionend---在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态。

//复合事件有一个属性data：
在compositionstart事件发生时访问，包含正在编辑的文本；
在compositionupdate事件发生时访问，包含正在插入的新字符；
在compositionend事件发生时访问，包含此次输入回话中插入的所有字符

var textbox=document.getElementById("myText");
EventUtil.addHandler(textbox,"compositionstart",function(event){ 
    event=EventUtil.getEvent(event);
    alert(event.data);
});

    变动事件(P385)

    DOMSubtreeModified:在DOM结构中发生任何变化时触发（这个事件在其他任何事件触发后触发）；
DOMNodeInserted:在一个节点作为子节点被插入到另一个节点时触发；
DOMNodeRemoved:在节点从其父节点中被移除时触发；
DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树间接插入文档之后触发（这个事件在DOMNodeInserted之后触发）；
DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发（这个事件在DOMNodeRemoved之后触发）；
DOMAttrModified:在特性被修改之后触发；

//删除节点
<! DOCTYPE html>
<html>
<head>
    <title>Node Removel Events Example</title>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>
//要删除其中的<ul>元素，会以此触发以下事件：
（1）在<ul>元素上触发DOMNodeRemoved事件。relateNode属性等于document.body;
(2)在<ul>元素上触发DOMNodeRemovedFromDocument事件；
（3）在身为<ul>元素子节点的每一个<li>元素及文本节点上触发DOMNodeRemovedFromDocument事件；
（4）在document.body上触发DOMSubtreeModified事件，因为<ul>元素是document.body的直接子元素

//插入节点（略）

    HTML5事件(P388)

    //contextmenu事件
contextmenu事件可以用来显示自定义的上下文菜单

//beforeunload事件
关闭页面前弹出

//DOMContentLoaded事件
在形成完整的DOM树之后触发（不等待图片、JS、CSS等）

//readystatechange事件（略）
提供与文档或元素加载状态有关的信息

//pageshow和pagehide事件（略）

//hashchange事件
页面的URL发生变化时触发，有两个属性oldURL和newURL

    设备事件（P395）

    //orientationchange事件
orientationchange事件可以让开发者确定用户时横向查看还是纵向查看设备
window.orientation属性的值可以反应设备的横向纵向状态

//MozOrientation事件
当设备的加速计检测到设备方向的改变时，就会触发这个事件，包含x、与和z三个属性，记录设备的移动方式；
//deviceorientation事件
当设备的加速计检测到设备方向的改变时，就会触发这个事件，告诉开发者设备在空间中朝向哪儿

//devicemotion事件
devicemotion事件告诉开发者设备什么时候移动（通过内置的加速器检测设备的移动方式，判断设备使用者的使用方式）

    触摸与手势事件(P399)

    //触摸事件
touchstart--当手指触摸屏幕时触发（即使已经有一个手指了）；
touchmove--当手指在屏幕上滑动时连续地触发，调用preventDefault()可以阻止滚动；
touchend--当手指从屏幕上移开时触发；
touchcancel--当系统停止跟踪触摸时触发
触摸事件的属性：
touches--表示当前跟踪的触摸操作的Touch对象的数组；
targetTouchs--特定于事件目标的Touch对象的数组；
changeTouches--表示自上次触摸以来发生了什么改变的Touch对象的数组
每个Touch对象包含的属性（略）

//手势事件
gesturestart--当一个手指按在屏幕上而另一个手指又触摸屏幕时触发；
gesturechange--当触摸屏幕的任何一个手指的位置发生变化时触发；
gestureend--当任何一个手指从屏幕上面移开时触发

  • 内存和性能(P402)

    不分青红皂白的向页面添加大量的处理程序，会直接关系到页面的整体运行性能，原因是多方面的：

    //每个函数都是对象，都会占用内存；
//必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间

    事件委托(P402)

    对“事件处理程序过多”问题的解决方案就是事件委托，事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

    移除事件处理程序(P404)

    在不需要的时候移除事件处理程序，也可以解决“事件处理程序过多”的问题
<div id="myDiv">
    <input type="button value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
    var btn=document.getElementById("myBtn");
    btn.onclick=function(){ 
        //先执行某些操作
        btn.onclick=null; //移除事件处理程序
        document.getElementById("myDiv").innerHTML="Processing...";
    };
</script>

  • 模拟事件（P405）

    模拟鼠标事件（P406）

    var btn=document.getElementById("myBtn");
//创建事件对象
var event=document.createEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//触发事件
btn.dispatchEvent(event);

    模拟键盘事件（P407）

    var textbox=document.getElementById("myTextbox"),event;
//以DOM3级方式创建事件对象
if(document.implementation.hasFeature("keyboardEvents","3.0")){ 
    event=document.createEvent("keyboardEvent");
    //初始化事件对象
    event.initkeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
    //触发事件
    textbox.dispatchEvent(event);
}

    模拟其他事件(略P409)
    自定义DOM事件（P409）

    使用自定义DOM事件创建自己的事件：
var div=document.getElementById("myDiv"),event;
EventUtil.addHandler(div,"myevent",function(event){ 
    alert("DIV:"+event.detail);
});
if(document.implementation.hasFeature("CustomEvents","3.0")){ 
    event=document.createEvent("CustomEvent");
    event.initCustomEvent("myevent",true,false,"Hello world!");
    div.dispatchEvent(event);
}

    IE中的事件模拟（略）（P410）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值