注册事件的两种方式
传统注册方式:直接利用标签的事件属性=“函数名字”;具有唯一性 新的函数会覆盖以前的函数
移出或解绑事件:
直接在事件属性的标签里加上 标签节点.事件名称=null;
监听注册方式:节点.addEventListener(事件名,事件函数,捕获or冒泡); 可以给一个事件写多个函数,函数会按照书写的顺序执行。事件函数可以直接写在括号里 也可以引用外面已经写好的函数 直接写函数名
移出或者解绑事件:
如果写在addEventListener的括号里面看,是无法移出的,只有用函数名调用在外声明的函数的时候,可以在声明的函数里面加节点.reomveEventListener("事件名称",函数名);
事件流:所有的元素都不是独立的,是串联在一起的,单个元素触发事件之后还会影响器他元素。
事件冒泡:从小打大,再点击完成之后立即触发目标对象,对切一层层的向上冒泡
事件捕获:从大到小: 在点击div之后不会立即触发事件,而是一层层向下补货,最终才能到达触发事件。addEventListener(,,true)的第三个参数改为true 第三个参数默认是false 冒泡
事件对象:
event:事件对象是传递给事件函数的唯一参数。
target:触发事件的标签
currentTarget:事件目标,只包含事件的真是目标
this:始终是指向currentTarget
注意,如果在事件捕获的状态下,点击父类的子类节点,a.target 和this 还有currentTarget不是一个对象
阻止默认事件
e.preventDefault() 阻止默认事件
e.stopPropagation(); 阻止冒泡
修改type类型
disabled=true;进制点击选中 false 默认值
验证码:
受限导入captchamini.js
创建一个input输入框和canvas画布框 宽高直接设在标签里面
创建以个事件的触发器button
<!-- -->
声明一个CaptchaMini();对象
对象调用draw(画布框节点,function(r){ r就是验证码内容}); 声明一个变量接收r
事件触发器方法里面写入判断 输入框的输入值是否和r相等
阻止默认行为
contextmenu 右键菜单
selectstart 选中文本 preventDefault();阻止行为
事件委托
多个子元素绑定同一个事件时,后期有新的子元素需要添加的时候 需要用到事件委托 代理 委派 。原理是事件捕获
键盘事件
keydown 键落 keyup 键起
事件对象.key 按键 keyCode 按键编码 空格 32 左上右下 37 38 39 40 回车是13
模拟百度
当keyCode==13的时候 调用按钮的click事件
video
play 播放事件 pause 暂停事件 ended 结束事件 结束前会先暂停
字符串或数组包含 includes();
|