思维导图
事件类型
1、鼠标事件
2、键盘事件
3、其他事件
4、事件参数
5、事件绑定和取消
鼠标事件
鼠标事件 – 类型1
1、click 鼠标单击时触发
2、dblclick 鼠标双击时触发
总结
1、双击事件是由两次单击完成,所以双击事件执行的时候必定会触发单击事件。
2、一般情况下,单击双击分开执行,不会一起执行。
鼠标事件 – 类型2
1、mousedown 鼠标按下时触发
2、mouseup 按下鼠标放松时触发
鼠标事件 – 类型3
1、mouseenter 鼠标进入时触发
2、mouseleave 鼠标移出时触发
3、hover (over,out) 鼠标进入和退出时触发两个函数 ,相当于mouseenter和mouseleave
鼠标事件 – 类型4
1、mouseover 鼠标进入指定元素及其子元素时触发
2、mouseout 鼠标移出指定元素及其子元素时触发
3、mousemove 在DOM内部移动时发生这个事件
总结
很多捣蛋程序通过mousemove做出来的。
拖拽文件上传用到!
鼠标事件 – 类型5
scroll 当滚动这个元素时会发生这个事件
键盘事件
键盘事件 – 类型1
keydown 当键盘或者按钮被按下时,触发keydown事件。
总结
1、有时候我们通过获取key值判断按下什么键
2、可以通过获取键位获取输入什么键
3、通过keycode:ASCII值判断
键盘事件 – 类型2
keyup 当按钮松开时,触发keyup事件,发生在当前获得焦点的元素上。
总结
1、现在的浏览器基本上可以使用keydown和keyup,发生在当前获得焦点的元素上
2、旧浏览器保留一个keypress事件
键盘事件 – 类型3
keypress 当键盘或者按钮按下时,发生keypress事件
总结
1、独特在于必须输入内容才会触发
2、比如输入法、回退,Ctrl, alt不会触发的
3、现在版本和keypress keydow几乎没有区别
其他事件
1、ready() 当DOM载入就绪可以查询或者操纵时绑定一个要执行的函数
2、reaize() 当浏览器调整浏览器窗口大小时,触发事件
3、focus()/blur() 当元素获得或者失去焦点时触发事件
4、change() 当元素得值发生改变时,发生change事件
5、select() 当textarea或者文本类型的input文本被 选择时,会发生select事件
总结 只有可编辑的文本和文本域等可以产生select事件
6、submit() 当提交表单时,发生submit事件
submit具有三个功能
a. 提交表单
b. 阻止提交表单
c. 提交表单时做一些我们所需要的做的事
总结
1、button不再form就是普通按钮
2、button在form中,相当于submit提交按钮
3、button是html5新增的
4、在ie中就是普通按钮
5、在非ie中就是提交按钮
事件参数
Event – 我们需要通过event获取鼠标位置和键盘位置,否则监听事件无意义
所有事件都会传入event对象作为参数,可以从event对象上获取很多信息;
事件绑定和取消
1、On(events,[selector],[data],fn) – 在选择元素上绑定一个或多个事件处理函数;
(1) On绑定事件至少包含两个参数:第一个是事件类型,第二个是要做的事–执行函数
2、On(events,[selector],[data],fn) – 多个事件处理函数 – 可以以对象的形式
3、拓展 – add() – 表示把元素添加已存在的元素组合中
4、事件的取消 – off(events,[selector],fn) – 在选择元素上移除一个或多个事件处理函数;
(1) 分析需求:我们点击“绑定”按钮时候,触发“这个按钮没效果”,点击产生隐藏的div的事件
(2) 点击取消绑定的话,“这个按钮没效果”无法触发隐藏的div
(3) Find() – 返回被选元素的后代元素 后代:子 孙 曾孙。。。。
(4) One(type,fn) – 为每一个匹配元素的特定事件(click)绑定一个一次性的事件处理函数