JS 学习笔记--JS中的事件对象基础

事件：JavaScript中的事件是由访问web页面用户的一系列操作引起的，比如点击鼠标，键盘按键等。当用户执行某些操作的时候再去执行一些代码。

事件模型：内联模型、脚本模型、DOM2模型

　　内联模型：事件处理函数是html元素的一个属性，即把事件处理函数代码写在html文件中  

　　//在HTML中把事件处理函数作为属性来执行JS代码  

　　　　

<div id="d1" onclick="alert('事件函数')">测试DIV</div> //注意其中的单双引号  
<div id="d1" onclick="box()">测试DIV</div>  
 //PS: 不能够将box函数放在window.onload中，否则就看不到这个函数

 

　　脚本模型：内联模型违反了HTML和JS代码分离的原则，所有可以再JS中处理事件，就是脚本模型  脚本模型中首先是通过DOM来获得元素，然后给元素绑定事件处理函数：   　　　　元素名.事件处理函数名 = 绑定的函数名   

　　绑定函数的时候，有两种方法，一种是绑定匿名函数，box.onclick = function(){};

 　　一种是绑定外部通用函数，box.oncclick = click;这种模式中注意，后面是赋值click函数的函数名，是没有添加括号的，如果添加了括号就是执行函数而不是绑定函数(注册函数)

事件处理函数分为三类：鼠标点击事件，键盘按键事件，HTML事件；每一个事件都有自己的触发范围，如果超出了这个范围，就不会起作用  

事件处理函数 影响的范围 描述 onabort 图像 当图像加载被中断时 onblur 图像，窗口，所有的表单元素 当焦点从对象上面离开时 onchange 输入框、选择框、文本区域 当改变元素的值，并且在元素失去焦点后触发 onclick 连接、按钮、表单、图片映射区域 用户单击对象时 ondblclick 链接、按钮、表单对象 用户双击对象时 ondragDrop 窗口 当用户将一个对象拖拽到浏览器窗口上的时候 onError 脚本 当脚本中发生语法错误的时候 onfocus 图像，窗口，所有的表单元素 单击鼠标或者将鼠标移动聚焦到窗口或框架上时 onkeydown 文档、图像、链接、表单 当按键被按下时 onkeyup 文档、图像、链接、表单 当按键被松开时， onkeypress 文档、图像、链接、表单 当按键被按下然后松开时 onload 主题、框架集、图像 文档或者图像加载后 onunload 主体、框架集 文档或者框架集卸载后 onmouseover 连接、按钮、表单、图片映射区域 当鼠标移到元素上面时 onmouseout 连接、按钮、表单、图片映射区域 当鼠标移出元素时 onmousemove 连接、按钮、表单、图片映射区域 当鼠标在元素上面移动时 onreset 表单复位按钮 按下时表单元素的值清空复位 onselect 表单 当用户选择文本框(text/textarea)中一个或者多个字符的时候触发 onsubmit 表单 当用户点击提交的时候再表单上面触发 onscroll   当用户滚动带滚动条的元素触发

 

 

 

转载于:https://www.cnblogs.com/qigang/p/3677474.html