任务12.7 事件处理

网页设计项目教程（HTML5+CSS3+JavaScript）模块12使用JavaScript脚本语言实现网页任务12.7事件处理学习目标认识常见事件类型，掌握四种事件处理程序与事件流，会用事件对象与事件委托知识目标理解事件的含义；掌握常见的事件类型；掌握四种事件处理程序；理解事件冒泡与事件捕获；掌握event对象的常用属性、方法与事件委托。能力目标能够为元素绑定事件；能够编写事件处理程序；能够分析事件的触发顺序；能够使用event对象；能够利用事件委托统一管理同类事件。素养目标培养用户体验意识；提升逻辑分析能力；关注代码的性能与规范；提升页面交互功能的综合开发能力。任务描述在监听到事件后，使用JavaScript编写的代码对事件进行处理，实现与HTML的交互事件，是指文档或者浏览器窗口中发生的一些特定的交互瞬间，如鼠标移动、页面滚动、鼠标单击、键盘输入、页面关闭等。在监听到事件后，使用JavaScript编写的代码对事件进行处理，从而实现了JavaScript与HTML之间的交互。要处理事件，需要先了解事件的类型，再选择合适的方式为元素绑定事件处理程序。本任务目标：认识常见事件类型，掌握四种事件处理程序的用法，理解事件流与事件对象，能够运用事件委托优化事件处理，并完成表单校验等交互功能。12.7.1事件类型浏览器中发生的事件有很多类型，用于区别用户或浏览器的特定事件事件（Event）是文档或浏览器窗口中发生的一些特定的交互瞬间，如鼠标移动、页面滚动、鼠标单击、键盘输入、页面关闭等。load当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源）触发。click在用户单击鼠标按钮（一般为左边的按钮）时触发，如单击按钮、div、p等元素。focus当元素获得焦点时触发，如input、textarea等表单元素获得焦点后触发。blur当元素失去焦点时触发，如表单元素在失去输入焦点后触发。change当元素内容发生变化且失去当前输入焦点时触发，如select选项变化、文本框内容变化。提示：事件名绑定到HTML属性或DOM属性时，多以on开头，如onclick、onfocus、onchange。12.7.2事件处理程序响应某个事件的函数称为事件处理程序，JavaScript可使用不同的事件处理程序来响应事件伪链接事件处理程序通过a标签的href属性来运行JavaScript代码。<ahref="javascript:alert('你好');">…</a>HTML事件处理程序在HTML元素的属性上绑定事件，并指定事件处理程序。<buttononclick="clickHandler()">提交</button>DOM0级事件处理程序获取元素后，将函数赋值为元素的事件处理程序属性（on+事件类型）。btn.onclick=function(){…}DOM2级事件处理程序使用addEventListener()方法为DOM元素指定事件处理程序。btn.addEventListener("click",fn);案例演示：伪链接事件处理程序创建demo31.html，通过a标签的href属性来运行JavaScript代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>伪链接事件处理程序</title></head><body><p><ahref="javascript:alert('你好');">点击我，执行alert</a></p><p><ahref="javascript:callback();">点击我，执行自定义的callback函数</a></p><p><ahref="javascript:;">点击我，没有任何反应</a></p><scripttype="text/javascript">functioncallback(){console.log("我是callback");}</script></body></html>代码说明href属性以javascript:开头，单击该a标签时执行其中的JavaScript代码；javascript:;表示不执行任何操作。Console>我是callback图12-39伪链接事件处理程序提示：分别单击三个伪链接后，第一个弹出警告框，第二个在控制台输出，第三个没有任何反应。案例演示：HTML事件处理程序创建demo32.html，在HTML元素的属性上绑定事件并指定事件处理程序<buttononclick="alert('你确定要提交吗？')">提交</button><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>HTML事件处理程序</title></head><body><inputtype="text"onfocus="foucsHandler()"/><buttononclick="clickHandler()">提交</button></body><scripttype="text/javascript">functionfoucsHandler(){console.log("文本输入框聚焦了");}functionclickHandler(){alert("你确定要提交文本输入框中的内容吗？");}</script></html>代码说明聚焦输入框触发onfocus，单击按钮触发onclick；事件处理程序既可直接写代码，也可调用函数。Console>文本输入框聚焦了此页面显示你确定要提交文本输入框中的内容吗？确定图12-40HTML事件处理程序提示：聚焦input输入框后控制台输出提示，单击“提交”按钮后弹出确认消息框。案例演示：DOM0级事件处理程序创建demo33.html，将函数赋值为元素的事件处理程序属性（on+事件类型）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DOM0级事件处理程序</title><script>window.onload=function(){constinputNode=document.getElementById("username");constbtn=document.getElementById("btn");inputNode.onchange=function(){console.log("文本框内容变化，且失去输入焦点后：");console.log(inputNode.value);}btn.onclick=function(){letvalue=inputNode.value;if(value===""){alert("用户名不可为空");}else{alert(value);}}}</script></head><body><inputtype="text"id="username"placeholder="请输入姓名"/><buttonid="btn">提交</button></body></html>代码说明window.onload在页面完全加载后触发，保证获取元素时元素已存在；onchange、onclick都以“on+事件类型”命名。Console>文本框内容变化，且失去输入焦点后：>张三此页面显示张三确定图12-41DOM0级事件处理程序提示：输入“张三”后使输入框失焦，再单击“提交”按钮，弹出输入的内容。案例演示：DOM2级事件处理程序创建demo34.html，使用addEventListener()方法为DOM元素指定事件处理程序element.addEventListener(eventType,listener,boolean);eventType：事件类型，如click、focus、change；listener：事件处理程序；boolean：布尔值，默认为false（在冒泡阶段执行），true表示在捕获阶段执行。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DOM2级事件处理程序</title><scripttype="text/javascript">window.onload=function(){constselNode=document.getElementById("sel");selNode.addEventListener("change",function(){console.log("用户选择了：",selNode.value);})}</script></head><body><div><label>请选择：</label><selectid="sel"><optionvalue="通过">通过</option><optionvalue="驳回">驳回</option></select></div></body></html>Console>用户选择了：驳回图12-42DOM2级事件处理程序提示：在页面中切换下拉选项后，控制台输出用户选择的值。四种事件处理程序对比根据写法位置与特点，选择合适的事件处理程序方式写法位置特点伪链接a标签的href属性代码写在href中，以javascript:开头，单击a标签时执行。HTML事件处理程序HTML元素的事件属性事件处理程序写在标签属性上，如onclick="fn()"，直观但将JS与HTML混在一起。DOM0级JS中元素的事件属性获取元素后为on+事件类型的属性赋值函数，如btn.onclick=function(){…}。DOM2级addEventListener()方法参数依次为事件类型、事件处理程序与是否在捕获阶段执行（默认false，即冒泡阶段）。使用建议伪链接与HTML事件处理程序把JavaScript代码写在HTML结构中，页面结构复杂时难以维护；DOM0级与DOM2级在JavaScript代码中绑定事件，实现结构与行为分离；实际开发中更推荐使用DOM2级的addEventListener()方法。12.7.3事件流事件流用于描述页面中元素接收事件的顺序为什么需要事件流当单击某个按钮时，单击事件不仅仅发生在按钮上，同时也单击了按钮的容器元素，甚至是整个页面。于是，浏览器开发团队提出了事件流，用于描述页面中元素接收事件的顺序。<!DOCTYPEhtml><htmllang="en"><head><title>事件流</title></head><body><button>按钮</button></body></html>事件冒泡（IE）事件由最具体的元素接收，然后逐级向上传播至最不具体的元素（document）。事件捕获（Netscape）最不具体的节点（document对象）最早接收到事件，然后逐级向下传播至最具体的节点。注意IE提出的事件流为事件冒泡，Netscape提出的事件流为事件捕获，这两种事件流的概念完全相反。事件冒泡与事件捕获的过程以上一页的HTML页面为例，单击按钮后click事件的传播顺序如图所示documenthtmlbodybutton123事件传播方向图12-43事件冒泡过程documenthtmlbodybutton123事件传播方向图12-44事件捕获过程两种事件流事件冒泡：click事件首先发生在button元素上，接着沿DOM树向上传播，直至传播到document对象；事件捕获：click事件首先由document对象接收，接着沿DOM树向下传播，直至传播至button按钮。DOM事件流DOM2级事件规定事件流包含三个阶段：事件捕获阶段、目标阶段、事件冒泡阶段documenthtmlbodybutton事件捕获阶段目标阶段事件冒泡阶段首先发生的是事件捕获阶段，然后是实际目标接收到事件（目标阶段），最后才是事件冒泡阶段；实际的目标（实际触发事件的元素）在捕获阶段不会收到事件，当进入目标阶段，事件才会在实际目标上发生，并在事件处理中被当成冒泡阶段的一部分。图12-45DOM事件流过程12.7.4事件对象触发事件时将产生一个事件对象event，用于存储所有与事件相关的信息属性/方法类型说明typeString事件类型。如click、focus、blur。targetElement触发事件的实际目标元素。currentTargetElement事件处理程序当前正在处理事件的元素。preventDefaultFunction取消事件的默认行为。如取消a标签的跳转行为。stopPropagationFunction取消事件进一步捕获或者冒泡。表12-12event对象的常用属性constbtn=document.getElementById("btn");btn.onclick=function(event){console.log("事件类型：",event.type);}btn.addEventListener("click",function(event){console.log("当前处理事件的元素：",event.currentTarget);})提示：在兼容DOM的浏览器中，事件对象event一般作为参数传递给事件处理程序（DOM0级、DOM2级）。12.7.5事件委托根据事件冒泡，指定一个事件处理程序来管理某一类型的所有事件向页面多个元素添加大量事件处理程序，不仅编码繁琐，也会影响页面的整体运行性能（占据内存）；解决方案是事件委托——只给父元素ul绑定一个click事件处理程序，管理全部li的点击事件。<!DOCTYPEhtml><htmllang="en"><head><title>事件委托</title><style>ul{width:360px;list-style:none;padding:0;border:1pxsolid#ccc;overflow:hidden;}li{float:left;width:60px;height:60px;box-sizing:border-box;border-right:1pxsolid#ccc;text-align:center;line-height:60px;cursor:pointer;}li:last-child{border:none;}</style></head><body><ulid="list"><li>李白</li><li>杜甫</li><li>孟浩然</li><li>崔颢</li><li>杜牧</li><li>苏轼</li></ul></body></html><scripttype="text/javascript">constulNode=document.getElementById("list");ulNode.addEventListener("click",function(event){//触发点击事件的实际目标元素consttarget=event.target;//判断是否为li元素if(target.nodeName==="LI"){console.log("你选择的诗人为：",target.