|
一、今日学习内容： 事件的深入 事件注册：window.onload/click 传统事件注册方式onclick： 唯一性，同一个元素，同一个事件只能设置一个处理函数，最后注册的事件处理函数将会覆盖前面注册的处理函数 事件监听注册方式addEventListener 同一个元素，同一个事件，可以设置多个事件处理函数，执行的顺序按照默认书写顺序，注册的顺序 移除解绑事件 传统 function box() { console.log( 'box1' ); document.querySelector( '#b1' ).onclick = null; } 监听 dom.addEventListener( 'click' , fn); function fn() { console.log( 'dom' ); dom.removeEventListener( 'click' , fn); } 事件流 所有的元素都不是独立，是串联在一起的，单个元素触发事件之后还会影响其他元素 事件冒泡（从小到大） 在点击完成之后理解触发目标对象，然后一层一层向上冒泡 事件捕获（从大到小） 在点击完div后不会立即触发div的事件，而是一层一层向下捕获，最终到达div才触发事件 事件对象 event事件对象是传递给事件处理函数的唯一参数 currentTarget当前事件处理程序所在元素 target事件目标，只包含事件的真实目标 this：时钟指向的是currentTarget 在事件处理内部，只有一个节点时，this、target、currentTarget指向的是同一元素dom 阻止默认事件 阻止a标签的默认跳转 e.preventDefault() 阻止冒泡/捕获 e.stopPropagation() 第三个参数 不传参（相当于false）----从小到大，冒泡 传参（true）----从大到小，捕获 禁用（修改type类型） dom.disabled 验证码（画布） 引入js文件 <script src="./captcha-mini.js"></script> <canvas width="120" height="50" id="captchal"></canvas> // 保存真实验证码 let trueCode = ''; // 验证码插件的使用 let captchal = new CaptchaMini(); captchal.draw(document.querySelector('#captchal'), function (r) { trueCode = r; }); 阻止事件的默认行为 阻止右键菜单的事件，禁用鼠标右键 contextmenu eg： document.addEventListener('contextmenu', function (e) { e.preventDefault(); })； 阻止鼠标左键选择（复制）文本 selectstart eg： document.addEventListener('selectstart', function (e) { e.preventDefault(); }) 键盘事件 keyCode判断键盘上各个键的Code值 键盘事件里面的input没有keyCode 回车----13 左上右下----37 38 39 40 awds----65 87 68 83 空格----32 模拟百度搜索 模拟视频控制按钮 事件委托（委派/代理） 子元素较多时，绑定的事件都是同一个事件---同一事件处理函数 通过事件捕获来绑定 动态添加的元素----后期动态添加没有注册上点击事件
| 
