Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 8.2.2知识点1：事件监听

信息安全技术应用ApplicationofInformationSecurityTechnology事件《前端技术开发》前端技术开发目录事件的概念1绑定事件2取消事件3任务实施41事件的概念前端技术开发事件的概念Web前端技术1在JavaScript中，事件是一个非常重要的概念，它指的是在特定时间或条件下发生的事情。事件可以由用户与网页的交互触发，例如点击按钮、移动鼠标或按下键盘等。也可以由浏览器自动触发，例如页面加载完成或浏览器窗口大小改变等。事件在JavaScript中通常与事件处理程序一起使用，事件处理程序是一段代码，当特定事件发生时会被调用。例如，当用户点击一个按钮时，可以触发一个“click”事件，并执行相应的事件处理程序。事件的概念Web前端技术1常见的事件事件含义click鼠标单击dblclick鼠标双击mousemove鼠标移动mouseenter鼠标移入元素范围mouseout鼠标移除元素范围keydown键盘按下keyup键盘弹起2绑定事件前端技术开发绑定事件Web前端技术21.在标签内声明事件回调函数在HTML中，我们经常需要为元素添加事件监听器，以便在用户与页面交互时执行某些操作。例如，当用户点击一个按钮时，我们可能希望执行某些JavaScript代码。为了实现这个功能，我们可以使用HTML的事件属性来声明回调函数。<buttononclick="myclick()">Clickme</button><script>functionmyclick(){ console.log('Hello,world!');}</script>绑定事件Web前端技术22.使用“on”前缀声明事件回调函数在标签内声明回调函数的缺陷在于很难批量修改。其实，事件也可以通过Javascript动态添加，它使得代码更加清晰和易于理解。<buttonid="btn">Clickme</button><script>constbtn=document.querySelector('#btn');btn.onclick=function(){ console.log('Hello,world!');}</script>绑定事件Web前端技术23.使用addEventListener声明事件回调函数addEventListener方法用于在元素上添加事件监听器。这个方法接受两个参数：事件名称和回调函数。当指定的事件被触发时，这个回调函数就会被执行。//获取元素varbutton=document.querySelector('#myButton');//定义事件回调函数functionhandleClick(){alert('按钮被点击了！');}//添加事件监听器button.addEventListener('click',handleClick);绑定事件Web前端技术2使用addEventListener多重绑定//获取元素varbutton=document.querySelector('#myButton');//两个回调函数button.addEventListener('click',handleClick1);button.addEventListener('click',handleClick2);绑定事件Web前端技术2使用addEventListener监听自定义事件：//获取元素varbutton=document.querySelector('#myButton');//两个回调函数button.addEventListener('hold',holdCB);button.onhold=holdCB;//不可以，button按钮没有实现“onhold”属性3取消事件前端技术开发取消事件Web前端技术31.对于在标签内或使用“on”前缀声明的事件，使用Javascript删除或重写。varbutton=document.querySelector('#myButton');button.onclick=null;//或者button.removeAttribute('onclick');取消事件Web前端技术32.对于使用addEventListener绑定的事件，使用removeEventListener取消绑定。varbutton=document.querySelector('#myButton');//添加事件监听器button.addEventListener('click',handleClick);//取消绑定button.removeEventListener('click',handleClick);4任务实施前端技术开发任务实施Web前端技术4在carousel容器的内部添加两个按钮，位置一左一右：<divclass="carousel"><imgsrc=""id="carousel-image"><divid="arrow-left"><</div><divid="arrow-right">></div></div>任务实施Web前端技术4使用CSS定义它们的外观和样式：任务实施Web前端技术4为这两个按钮添加事件监听：constarrowLeft=document.querySelector('#arrow-left');constarrowRight=document.querySelector('#arrow-right');arrowLeft.addEventListener('click',function(){current=(current+images.length-1)%images.length;image.src=images[current];});arrowRight.addEventListener('click',function(){c