<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ 100px; height: 100px; background: red; } </style> </head> <body> <button id="btn">按钮</button> <div id='div'></div> </body> <script src='itcast.js'></script> <script type="text/javascript"> //测试 $$.event.click('btn', function(){ document.getElementsByTagName('div')[0].style.background = 'green' }); $$.event.mouseover('div', function(){ this.style.background = 'blue' }); $$.event.mouseout('div', function(){ this.style.background = 'pink' }); </script> </html>
使用 extend 改造
$$.hover('div' , function(){ } , function(){ } ) ;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ 100px; height: 100px; background: red; } </style> </head> <body> <button id="btn">按钮</button> <div id='div'></div> </body> <script src='itcast2.js'></script> <script type="text/javascript"> //测试 $$.click('btn', function(){ document.getElementsByTagName('div')[0].style.background = 'green' }); $$.hover('div', function(){ this.style.background = 'blue' },function(){ this.style.background = 'pink' }); </script> </html>