事件模块与样式属性
-> 事件复习
-> 什么是事件
事件机制: 所谓的事件机制就是浏览器无时不刻在监视我们的行为, 但是浏览器不会做任何事情.
当我们在触发某个行为的时候, 浏览器会检查我们时候已经注册了对应的事件处理函数,
如果已经注册了事件处理函数, 那么浏览器就会调用对应的函数以响应我们的行为.
但是如果没有发现注册, 那么浏览器什么也不会处理.
这样的机制就是事件处理机制.
所谓的注册, 简单的说就是告知浏览器有一个函数, 或多个函数, 一旦触发事件浏览器就会依次调用函数.
事件处理函数.
触发事件.
用户事件. 事件名.
-> 如何使用代码注册事件
-> 可以使用什么事件
使用的最多的是鼠标事件与键盘事件
- mousemove, mouseout, mouseover
- click, mousedown, mouseup
- keydown, keyup, keypress
-> 如何注册事件
1) 使用属性赋值
- btn.onclick = function () { ...}
- // 缺点: 事件不稳定可能随时被覆盖 不能支持事件的追加
2) 标准做法
btn.addEventListener( 'click', function() { ... } )
-> 在 jq 中事件的使用方法
在 jq 中添加点击事件, 可以使用
- $( '...' ).on( 'click', function () { ... } )
- $( '...' ).click( function () { ... })
-> on 方法 与 off 方法
-> 首先考虑实现通用的 on 方法
语法: $obj.on( 事件名, 事件处理函数 )
功能: 给每一个 dom 元素都绑定对应的事件处理函数
实现: 遍历 然后给每一个元素都增加 事件
-> 移除事件, 使用 removeEventListener
语法: $obj.off( 事件名, 事件处理函数 )
-> 其他事件
- click
- Itcast.fn[ 'click' ] = function ( callback ) {
- return this.on( 'click', callback );
- };
- mouseover
- Itcast.fn[ 'mouseover' ] = function ( callback ) {
- return this.on( 'mouseover', callback );
- };
- 'click,mouseover,mousedown'.split( ',' ).forEach(function ( v ) {
- Itcast.fn[ v ] = function ( callback ) {
- return this.on( v, callback );
- };
- });
可以使用什么事件:
abort,blur,cancel,canplay,canplaythrough,change,click,close,contextmenu,cuechange,dblclick,drag,dragend,dragenter,dragleave,dragover,dragstart,drop,durationchange,emptied,ended,error,focus,input,invalid,keydown,keypress,keyup,load,loadeddata,loadedmetadata,loadstart,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup,mousewheel,pause,play,playing,progress,ratechange,reset,resize,scroll,seeked,seeking,select,show,stalled,submit,suspend,timeupdate,toggle,volumechange,waiting,autocomplete,autocompleteerror,beforecopy,beforecut,beforepaste,copy,cut,paste,search,selectstart,wheel,webkitfullscreenchange,webkitfullscreenerror
-> 样式操作
CSS, addClass, removeClass, hasClass, toggleClass
- -> css
- 1) css( 'color', 'blue' )
- 2) css( 'color' )
- 3) css( { color: 'red' } )
- -> addClass
- -> removeClass
- <div class="c c1 c2 c"></div>
- -> hasClass
- -> toggleClass
-> 属性操作
attr, prop, html, text, val
来源: http://www.qdfuns.com/article/28300/b60c24cec35bd360e913ce7f599e489d.html