【济南校区】前端就业班笔记框架封装（四）

事件模块与样式属性
-> 事件复习
     -> 什么是事件
            事件机制: 所谓的事件机制就是浏览器无时不刻在监视我们的行为, 但是浏览器不会做任何事情.
                     当我们在触发某个行为的时候, 浏览器会检查我们时候已经注册了对应的事件处理函数,
                     如果已经注册了事件处理函数, 那么浏览器就会调用对应的函数以响应我们的行为.
                     但是如果没有发现注册, 那么浏览器什么也不会处理.
                     这样的机制就是事件处理机制.
            所谓的注册, 简单的说就是告知浏览器有一个函数, 或多个函数, 一旦触发事件浏览器就会依次调用函数.
            事件处理函数.
            触发事件.
            用户事件. 事件名.
        -> 如何使用代码注册事件
            -> 可以使用什么事件
                使用的最多的是鼠标事件与键盘事件
                mousemove, mouseout, mouseover
                click, mousedown, mouseup
                keydown, keyup, keypress
            -> 如何注册事件
                1) 使用属性赋值

[JavaScript] 纯文本查看 复制代码

                    btn.onclick = function () { ... }

               
               2) 标准做法

[JavaScript] 纯文本查看 复制代码

                    btn.addEventListener( 'click', function() { ... } )

      
                 -> 在 jq 中事件的使用方法
                在 jq 中添加点击事件, 可以使用

[JavaScript] 纯文本查看 复制代码

                $( '...' ).on( 'click', function () { ... } )
                $( '...' ).click( function () { ... })

    -> on 方法 与 off 方法
        -> 首先考虑实现通用的 on 方法
            语法: $obj.on( 事件名, 事件处理函数 )
            功能: 给每一个 dom 元素都绑定对应的事件处理函数
            实现: 遍历 然后给每一个元素都增加 事件
        -> 移除事件, 使用 removeEventListener
            语法: $obj.off( 事件名, 事件处理函数 )
            
-> 其他事件
click事件

[JavaScript] 纯文本查看 复制代码

        Itcast.fn[ 'click' ] = function ( callback ) {
            return this.on( 'click', callback );
        };

mouseover事件

[JavaScript] 纯文本查看 复制代码

        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 );
            };
        });

可以使用什么事件:

[JavaScript] 纯文本查看 复制代码

        Itcast.each( ('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').split( ',' ), function ( i, v ) {
                         Itcast.fn[ v ] = function ( callback ) {
                             return this.on( v, callback );
                         };
                     });

样式操作
     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

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

【济南校区】前端就业班笔记框架封装（四）

事件模块与样式属性
-> 事件复习
     -> 什么是事件
            事件机制: 所谓的事件机制就是浏览器无时不刻在监视我们的行为, 但是浏览器不会做任何事情.
                     当我们在触发某个行为的时候, 浏览器会检查我们时候已经注册了对应的事件处理函数,
                     如果已经注册了事件处理函数, 那么浏览器就会调用对应的函数以响应我们的行为.
                     但是如果没有发现注册, 那么浏览器什么也不会处理.
                     这样的机制就是事件处理机制.
            所谓的注册, 简单的说就是告知浏览器有一个函数, 或多个函数, 一旦触发事件浏览器就会依次调用函数.
            事件处理函数.
            触发事件.
            用户事件. 事件名.
        -> 如何使用代码注册事件
            -> 可以使用什么事件
                使用的最多的是鼠标事件与键盘事件
                mousemove, mouseout, mouseover
                click, mousedown, mouseup
                keydown, keyup, keypress
            -> 如何注册事件
                1) 使用属性赋值

[JavaScript] 纯文本查看 复制代码

                    btn.onclick = function () { ... }

               
               2) 标准做法

[JavaScript] 纯文本查看 复制代码

                    btn.addEventListener( 'click', function() { ... } )

      
                 -> 在 jq 中事件的使用方法
                在 jq 中添加点击事件, 可以使用

[JavaScript] 纯文本查看 复制代码

                $( '...' ).on( 'click', function () { ... } )
                $( '...' ).click( function () { ... })

    -> on 方法 与 off 方法
        -> 首先考虑实现通用的 on 方法
            语法: $obj.on( 事件名, 事件处理函数 )
            功能: 给每一个 dom 元素都绑定对应的事件处理函数
            实现: 遍历 然后给每一个元素都增加 事件
        -> 移除事件, 使用 removeEventListener
            语法: $obj.off( 事件名, 事件处理函数 )
            
-> 其他事件
click事件

[JavaScript] 纯文本查看 复制代码

        Itcast.fn[ 'click' ] = function ( callback ) {
            return this.on( 'click', callback );
        };

mouseover事件

[JavaScript] 纯文本查看 复制代码

        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 );
            };
        });

可以使用什么事件:

[JavaScript] 纯文本查看 复制代码

        Itcast.each( ('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').split( ',' ), function ( i, v ) {
                         Itcast.fn[ v ] = function ( callback ) {
                             return this.on( v, callback );
                         };
                     });

样式操作
     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

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830