零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）10JavaScript事件处理.pptVIP

7.3 JavaScript事件处理 7.3.1事件介绍 事件 HTML 事件是指在浏览器窗体或者html元素上发生的，可以触发JavaScript代码块运行的行为。事件可以是浏览器行为，也可以是用户行为。常用的事件类型包括窗口事件、鼠标事件、键盘事件、文本事件等。例如：浏览器加载完成事件、按钮单击事件等。 事件 描述 onchange HTML 元素已被改变 onclick 用户点击了 HTML 元素 onmouseover 用户把鼠标移动到 HTML 元素上 onmouseout 用户把鼠标移开 HTML 元素 onkeydown 用户按下键盘按键 onload 浏览器已经完成页面加载 事件绑定语法格式: 对象名.on事件 = function( ){ 代码块 } 7.3.2常用鼠标事件 鼠标单击事件 元素名.onclick=function(){ 代码块 } 鼠标移至元素之上事件 元素名.onmouseover=function(){ 代码块 } 鼠标从元素上移开事件 元素名.onmouseoveout=function(){ 代码块 } 7.3.2常用鼠标事件 示例：鼠标点击、鼠标移动到上面、鼠标移开3种鼠标事件，鼠标事件之前和之后文字内容发生变化 style type=text/css div{width:200px;height:100px;line-height:100px;text-align: center; background:red;margin:20px auto;font-size: 20px; } /style script type=text/javascript window.onload=function(){ var sj1 = document.getElementById(sj1); sj1.onclick=function(){ //鼠标单击事件 sj1.innerText=鼠标单击事件; } var sj2 = document.getElementById(sj2); sj2.onmouseover=function(){ //鼠标按下时事件 sj2.innerText=鼠标移上去事件; } var sj3 = document.getElementById(sj3); sj3.onmouseout=function(){ //鼠标移开事件 sj3.innerText=鼠标移开; } } /script /head body div id=sj1鼠标事件/div div id=sj2鼠标事件/div div id=sj3鼠标事件/div /body 运行效果 部分代码 * * * *