《JavaScript程序设计案例教程》课件_案例4.pptx

案例四、金额转换器

学习目标知识链接案例实现效果演示目录

学完本章节应该能做到的事情学习目标壹

学习目标会使用querySelector和querySelectorAll查询接口。理解事件流和事件对象。会字符串连接。PPT模板/moban/会字符串查找。会字符串截取。掌握while和dowhile循环。能动态修改网页的代码。

效果演示

完成本案例应该具备的知识知识链接贰

知识链接列表PPT模板/moban/querySelector和querySelectorAll。事件流和事件对象。字符串连接。字符串查找。字符串截取。while和dowhile循环。动态修改网页的代码。

querySelector和querySelectorAll1这两个方法都可以接受三种类型的参数：id(#)、class(.)、标签，很像jquery的选择器0102querySelector：只返回匹配的第一个元素，如果没有匹配项，返回nullquerySelectorAll：返回匹配的元素集合，如果没有匹配项，返回空的nodelist

querySelector和querySelectorAll1divid=left leftpanel/divdivid=right rightpanel/divscript vardiv1=document.querySelector(div); console.log(div1); varp1=document.querySelector(p); console.log(p1); vardiv2=document.querySelectorAll(div); console.log(div2); varp2=document.querySelectorAll(p); console.log(p2);/script选择器（queryselector.html）

事件流和事件对象2事件流是描述的页面元素从页面接受事件的顺序，事件流包括两种模式：冒泡和捕获。body div spanhello/span /div/body

事件流和事件对象2事件处理函数:就是处理用户操作的函数，不同的操作对应不同的名称。事件绑定：使用户操作时执行开发者指定的代码的操作。0102行内绑定式：在DOM元素中直接绑定动态绑定式：在JavaScript代码中直接绑定03事件监听式：绑定事件监听函数在JavaScript中，有三种常用的绑定事件的方法：

事件流和事件对象2行内绑定式（EventInline.html）buttononclick=”sayhello()”按钮/buttonscript functionsayhello(){ alert(“hello”); }/script

事件流和事件对象2动态绑定式（EventDynamic.html）buttonid=”btn”按钮/buttonscript document.getElementById(“btn”).onclick=function(){ alert(“hello”); }/script

事件流和事件对象2事件监听式（EventListen.html）buttonid=”btn”按钮/buttonscript document.getElementById(“btn”).addEventListener(“click”,function(){ alert(“hello”); });/script

事件流和事件对象2addEventListener()函数语法：elementObject.addEventListener(eventName,handle,useCapture);参数说明：elementObject：DOM对象（即DOM元素）。eventName：事件名称。注意，这里的事件名称没有“on”，如鼠标单击事件click，鼠标双击事件doubleclick，鼠标移入事件mouseover，鼠标移出事件mouseout等。handle：事件句柄函数，即用来处理事件的函数。useCapture：Boolean类型，表示是否使用捕获型事件流，false表示是冒泡型事件流，true表示是捕获型事件流，默认为false。

事件流和事件对象2冒泡型事件与捕获型事件对比（EventFlow.html）div span点击从控制台查看事件流/span/divscript //以下三次绑定中第三个参数，演示冒泡事件时用false,演示捕获事件时用true document.querySelector(body).addEventListener(click,function(e){ console.log(Hi