多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家全选文本框案例1需求:用户点击全选,则下面复选框全部选择,取消全选则全部取消分析:①:全选复选框点击,可以得到当前按钮的checked②:把下面所有的小复选框状态checked,改为和全选复选框一致多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家全选文本框案例2需求:用户点击全选,则下面复选框全部选择,取消全选则全部取消,文字对应变化分析:①:遍历下面的所有的checkbox,添加点击事件②:检查小复选框选中的个数,是不是等于小复选框总的个数,③:把结果给全选按钮④:利用css复选框选择器input:checkedWebAPIs第三天Dom事件进阶多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家学习目标LearningObjectives1.学习事件流,事件委托,其他事件等知识2.优化多个事件绑定和实现常见网页交互多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家目录Contents事件流事件委托其他事件元素尺寸与位置综合案例多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家事件流•事件流与两个阶段说明•事件捕获•事件冒泡•阻止冒泡•解绑事件01多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家1.1事件流和两个阶段说明目标:能够说出事件流经过的2个阶段事件流指的是事件完整执行过程中的流动路径说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段简单来说:捕获阶段是从父到子冒泡阶段是从子到父实际工作都是使用事件冒泡为主多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家事件流•事件流与两个阶段说明•事件捕获•事件冒泡•阻止冒泡•解绑事件01多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家1.2事件捕获目标:简单了解事件捕获执行过程事件捕获概念:从DOM的根元素开始去执行对应的事件(从外到里)事件捕获需要写对应代码才能看到效果代码:说明:addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)若传入false代表冒泡阶段触发,默认就是false若是用L0事件监听,则只有冒泡阶段,没有捕获多一句没有,少一句不行,用最短时间,教会最实用的技术!高级软件人才培训专家事件流•...