事件类型 鼠标事件 焦点事件 键盘事件 文本事件 focus选择器 案例
< title> 事件类型- 鼠标事件< / title> < style> div { width: 200px; height: 200px; background- color: pink; } < / style> < / head>
< body> < div> < / div> < script> const div = document. querySelector ( 'div') div. addEventListener ( 'mouseenter', function ( ) { console. log ( `轻轻的我来了`) } ) div. addEventListener ( 'mouseleave', function ( ) { console. log ( `轻轻的我走了`) } ) < / script> < / body>
< ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> 练习- 轮播图点击切换< / title> < style> * { box- sizing: border- box; } . slider { width: 560px; height: 400px; overflow: hidden; } . slider- wrapper { width: 100 % ; height: 320px; } . slider- wrapper img { width: 100 % ; height: 100 % ; display: block; } . slider- footer { height: 80px; background- color: rgb ( 100 , 67 , 68 ) ; padding: 12px 12px 0 12px; position: relative; } . slider- footer . toggle { position: absolute; right: 0 ; top: 12px; display: flex; } . slider- footer . toggle button { margin- right: 12px; width: 28px; height: 28px; appearance: none; border: none; background: rgba ( 255 , 255 , 255 , 0.1 ) ; color: #fff; border- radius: 4px; cursor: pointer; } . slider- footer . toggle button: hover { background: rgba ( 255 , 255 , 255 , 0.2 ) ; } . slider- footer p { margin: 0 ; color: #fff; font- size: 18px; margin- bottom: 10px; } . slider- indicator { margin: 0 ; padding: 0 ; list- style: none; display: flex; align- items: center; } . slider- indicator li { width: 8px; height: 8px; margin: 4px; border- radius: 50 % ; background: #fff; opacity: 0.4 ; cursor: pointer; } . slider- indicator li. active { width: 12px; height: 12px; opacity: 1 ; } < / style>
< / head> < body> < div class = "slider" > < div class = "slider-wrapper" > < img src= "./images/slider01.jpg" alt= "" / > < / div> < div class = "slider-footer" > < p> 对人类来说会不会太超前了？< / p> < ul class = "slider-indicator" > < li class = "active" > < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < / ul> < div class = "toggle" > < button class = "prev" > & lt; < / button> < button class = "next" > & gt; < / button> < / div> < / div> < / div> < script> const data = [ { url: '. / images/ slider01. jpg', title : '对人类来说会不会太超前了？', color : 'rgb ( 100 , 67 , 68 ) ' } , { url: '. / images/ slider02. jpg', title : '真正的jo厨出现了！', color : 'rgb ( 36 , 31 , 33 ) ' } , { url: '. / images/ slider03. jpg', title : '李玉刚：让世界通过B站看到东方大国文化', color : 'rgb ( 139 , 98 , 66 ) ' } , { url: '. / images/ slider04. jpg', title : '快来分享你的寒假日常吧~ ', color : 'rgb ( 67 , 90 , 92 ) ' } , { url: '. / images/ slider05. jpg', title : '哔哩哔哩小年YEAH', color : 'rgb ( 166 , 131 , 143 ) ' } , { url: '. / images/ slider06. jpg', title : '一站式解决你的电脑配置问题！！！', color : 'rgb ( 53 , 29 , 25 ) ' } , { url: '. / images/ slider07. jpg', title : '谁不想和小猫咪贴贴呢！', color : 'rgb ( 99 , 72 , 114 ) ' } , { url: '. / images/ slider08. jpg', title : '谁不想和小猫咪贴贴呢！', color : 'rgb ( 99 , 72 , 114 ) ' } , ] const img = document. querySelector ( '. slider- wrapper img') const p = document. querySelector ( '. slider- footer p') const footer = document. querySelector ( '. slider- footer') const next = document. querySelector ( '. next') let i = 0 next. addEventListener ( 'click', function ( ) { i++ i = i >= data. length ? 0 : itoggle ( ) } ) const prev = document. querySelector ( '. prev') prev. addEventListener ( 'click', function ( ) { i-- i = i < 0 ? data. length - 1 : itoggle ( ) } ) function toggle ( ) { img. src = data[ i] . urlp. innerHTML = data[ i] . titlefooter. style. backgroundColor = data[ i] . colordocument. querySelector ( '. slider- indicator . active') . classList. remove ( 'active') document. querySelector ( `. slider- indicator li: nth- child ( ${ i + 1 } ) `) . classList. add ( 'active') } let timerId = setInterval ( function ( ) { next. click ( ) } , 1000 ) const slider = document. querySelector ( '. slider') slider. addEventListener ( 'mouseenter', function ( ) { clearInterval ( timerId) } ) slider. addEventListener ( 'mouseleave', function ( ) { clearInterval ( timerId) timerId = setInterval ( function ( ) { next. click ( ) } , 1000 ) } ) < / script>
< / body> < / html>
< title> 焦点事件< / title>
< / head> < body> < input type= "text" > < script> const input = document. querySelector ( 'input') input. addEventListener( 'focus', function ( ) {console. log( '有焦点触发') }) . addEventListener ( 'blur', function ( ) { console. log ( '失去焦点触发') } ) < / script> < / body>
< ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> 练习- 小米搜索框案例< / title> < style> * { margin: 0 ; padding: 0 ; box- sizing: border- box; } ul { list- style: none; } . mi { position: relative; width: 223px; margin: 100px auto; } . mi input { width: 223px; height: 48px; padding: 0 10px; font- size: 14px; line- height: 48px; border: 1px solid #e0e0e0; outline: none; } . mi . search { border: 1px solid #ff6700; } . result- list { display: none; position: absolute; left: 0 ; top: 48px; width: 223px; border: 1px solid #ff6700; border- top: 0 ; background: #fff; } . result- list a { display: block; padding: 6px 15px; font- size: 12px; color: #424242 ; text- decoration: none; } . result- list a: hover { background- color: #eee; } < / style> < body> < div class = "mi" > < input type= "search" placeholder= "小米笔记本" > < ul class = "result-list" > < li> < a href= "#" > 全部商品< / a> < / li> < li> < a href= "#" > 小米11 < / a> < / li> < li> < a href= "#" > 小米10S< / a> < / li> < li> < a href= "#" > 小米笔记本< / a> < / li> < li> < a href= "#" > 小米手机< / a> < / li> < li> < a href= "#" > 黑鲨4 < / a> < / li> < li> < a href= "#" > 空调< / a> < / li> < / ul> < / div> < script> const input = document. querySelector ( '[ type= search] ') const ul = document. querySelector ( '. result- list') input. addEventListener ( 'focus', function ( ) { ul. style. display = 'block'input. classList. add ( 'search') } ) input. addEventListener ( 'blur', function ( ) { ul. style. display = 'none'input. classList. remove ( 'search') } ) < / script> < / body> < / html>
< title> 键盘事件< / title>
< / head> < body> < input type= "text" > < script> const input = document. querySelector ( 'input') input. addEventListener( 'keydown', function ( ) {console. log( '键盘按下了') }) . addEventListener ( 'keyup', function ( ) { console. log ( '键盘弹起了') } ) < / script> < / body>
< title> 文本事件< / title>
< / head> < body> < input type= "text" > < script> const input = document. querySelector ( 'input') input. addEventListener ( 'input', function ( ) { console. log ( input. value ) } ) < / script> < / body>
< title> focus选择器< / title> < style> input { width: 200px; transition: all . 3s; } input: focus { width: 300px; } < / style>
< / head> < body> < input type= "text" > < / body>
< ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> 练习- 评论字数统计< / title> < style> . wrapper { min- width: 400px; max- width: 800px; display: flex; justify- content: flex- end; } . avatar { width: 48px; height: 48px; border- radius: 50 % ; overflow: hidden; background: url ( . / images/ avatar. jpg) no- repeat center / cover; margin- right: 20px; } . wrapper textarea { outline: none; border- color: transparent; resize: none; background: #f5f5f5; border- radius: 4px; flex: 1 ; padding: 10px; transition: all 0 . 5s; height: 30px; } . wrapper textarea: focus { border- color: #e4e4e4; background: #fff; height: 50px; } . wrapper button { background: #00aeec; color: #fff; border: none; border- radius: 4px; margin- left: 10px; width: 70px; cursor: pointer; } . wrapper . total { margin- right: 80px; color: #999 ; margin- top: 5px; opacity: 0 ; transition: all 0 . 5s; } . list { min- width: 400px; max- width: 800px; display: flex; } . list . item { width: 100 % ; display: flex; } . list . item . info { flex: 1 ; border- bottom: 1px dashed #e4e4e4; padding- bottom: 10px; } . list . item p { margin: 0 ; } . list . item . name { color: #FB7299; font- size: 14px; font- weight: bold; } . list . item . text { color: #333 ; padding: 10px 0 ; } . list . item . time { color: #999 ; font- size: 12px; } < / style>
< / head> < body> < div class = "wrapper" > < i class = "avatar" > < / i> < textarea id= "tx" placeholder= "发一条友善的评论" rows= "2" maxlength= "200" > < / textarea> < button> 发布< / button> < / div> < div class = "wrapper" > < span class = "total" > 0 / 200 字< / span> < / div> < div class = "list" > < div class = "item" style= "display: none;" > < i class = "avatar" > < / i> < div class = "info" > < p class = "name" > 清风徐来< / p> < p class = "text" > 大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[ 笑哭] [ 支持] < / p> < p class = "time" > 2022 - 10 - 10 20 : 29 : 21 < / p> < / div> < / div> < / div> < script> const tx = document. querySelector ( '#tx') const total = document. querySelector ( '. total') tx. addEventListener ( 'focus', function ( ) { total. style. opacity = 1 } ) tx. addEventListener ( 'blur', function ( ) { total. style. opacity = 0 } ) tx. addEventListener ( 'input', function ( ) { total. innerHTML = `${ tx. value . length} / 200 字`} ) < / script> < / body> < / html>
)
