喝下这碗鸡汤
披盔戴甲,一路勇往直前!
1. 什么是事件
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
2. 什么是事件监听?
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件语法:
元素.addEventListener('事件'，要执行的函数)3. 事件监听三要素:
事件源: 那个dom元素被事件触发了，要获取dom元素事件:用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数:要做什么事
4. 随机点名案例
业务分析:
点击开始按钮随机抽取数组的一个数据，放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候，两个按钮同时禁用核心:利用定时器快速展示，停止定时器结束展示
<body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}//1 获取元素let start = document.querySelector('.start')let end = document.querySelector('.end')let qs = document.querySelector('.qs')let timer = 0let random = 0//2 给开始按钮注册事件timer = start.addEventListener('click', function () {setInterval(function () {let random = getRandom(0, arr.length - 1)qs.innerHTML = arr[random]}, 30)//如果到了最后一个就禁用按钮if (arr.length === 1) {start.disabled = end.disabled = true}})//3 给结束按钮注册事件 本质是停止定时器end.addEventListener('click', function () {clearInterval(timer)//删除数组元素arr.splice(random, 1)})</script>
</body>
5. 小米搜索框
<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>// 1. 获取元素 input let search = document.querySelector('input')let list = document.querySelector('.result-list')// 2. 事件监听 获得光标事件 focussearch.addEventListener('focus', function () {// 显示下拉菜单list.style.display = 'block'// 文本框变色this.classList.add('search')})// 3. 事件监听 失去光标事件 blursearch.addEventListener('blur', function () {// 隐藏下拉菜单list.style.display = 'none'// 文本框去色this.classList.remove('search')})</script>
</body>
6. 发布微博案例
<body><div class="w"><div class="controls"><img src="images/tip.png" alt=""><br><textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea><div><span class="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><div class="contentList"><ul></ul></div></div><script>// 1. 获取元素 文本域 countlet area = document.querySelector('#area')let useCount = document.querySelector('.useCount')// 2. 绑定事件 用户输入事件 inputarea.addEventListener('input', function () {// console.log('测试中')// 不断得到文本域里面的字符长度// area.value 可以得到的值// console.log(area.value)// area.value.length 得到输入字符的长度// console.log(area.value.length)useCount.innerHTML = area.value.length})</script>
</body>总结
恭喜大家跟着小郑学完【零基础】学JS之APIS的第二篇，这篇笔记学习了什么是DOM，以及DOM的相关知识点，例如获取DOM元素,修改DOM元素的内容等等，最后小郑用两个案例来巩固今天的知识点，大家学废了吗?
