事件: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   当用户滚动带滚动条的元素触发
 

JS 学习笔记--JS中的事件对象基础的更多相关文章

  1. node.js学习笔记(三)——事件循环

    要理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互 ...

  2. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  3. JS学习笔记(四)常用对象

    Error // 语法 throw new Error("消息"); 类似于C#中的Exception对象 // alert(num); try { throw new Error ...

  4. 《C#高级编程》学习笔记------C#中的事件和委托

    本文转载自张子阳 目录 委托的作用 将方法绑定到委托 事件的来由 Observer设计模式 .Net Framework中的委托与事件   引言 委托 和 事件在 .Net Framework中的应用 ...

  5. JS学习笔记-OO创建怀疑的对象

    问了.工厂介绍,解决重码 前面已经提到,JS中创建对象的方法.不难发现,主要的创建方法中,创建一个对象还算简单,假设创建多个类似的对象的话就会产生大量反复的代码. 解决:工厂模式方法(加入一个专门创建 ...

  6. Node.js学习笔记(三): 事件机制

    大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...

  7. Node.js学习笔记(四): 全局对象

    在浏览器 JavaScript 中,通常 window 是全局对象, 而 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global 对象的属性. 这 ...

  8. 【JS学习笔记】提取行间事件

    行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...

  9. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

随机推荐

  1. 利用脚本修改SQL SERVER排序规则

    利用脚本修改SQL SERVER排序规则 编写人:CC阿爸 2014-3-1 l  今年的一项重要工作是对公司所用系统进行繁简的转换,程序转成简体基本很容易解决,但数据库转换成简体,就没那么容易了.经 ...

  2. 【漫画解读】HDFS存储原理(转载)

    以简洁易懂的漫画形式讲解HDFS存储机制与运行原理. 一.角色出演 如上图所示,HDFS存储相关角色与功能如下: Client:客户端,系统使用者,调用HDFS API操作文件;与NN交互获取文件元数 ...

  3. mysql中存不进去json_encode格式的数据

    主要是因为json_encode格式的数据,中间带有\,在存入数据库的时候,会把反斜杠删除了. 所以,想要存进去的话,需要在外层调用一下函数addslashes();这个函数会在每个反斜杠的前面添加反 ...

  4. 【转】javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

  5. WPF DragDrop事件元素跟随

    前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...

  6. matlab封装DLL混合编程总结

    最近做了个项目要用到matlab做些算法处理,然后用.net项目调用这个类,我把这个matlab封装dll总结了下如下: matlab是商业数学软件,优势是在算法开发上面有很强的功能,提供了很多数学算 ...

  7. Red Gate Software 软件推荐

    这家公司的Wiki http://en.wikipedia.org/wiki/Redgate http://www.red-gate.com/products/ 好吧 就介绍点免费的 Find SQL ...

  8. JAVA基础-子类继承父类实例化对象过程

    之前在项目中碰到这样一个问题: 类B继承了类A,B在实例化的时候,A的构造方法中调用了B的某个方法,并且B的方法中对B的成员属性进行了初始化,然后最后得到的B对象的成员属性为空. 代码场景如下: 这里 ...

  9. 一步一步实现Linux设备驱动的Helloworld模块

    学了那么多程序语言,总是有一个Hello world开头,不禁感叹Hello world的强大.呵呵,废话少说,咋们的故事当然要从这个Hello world开始. 先查看自己OS使用的内核版本[don ...

  10. Android---WebView显示Html乱码问题

    webView.loadData(result,"text/html","UTF-8"); 反正是用上面的方法无法解决乱码的问题. 使用下面的方法就能完美解决了 ...