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事件;每一个事件都有自己的触发范围,如果超出了这个范围,就不会起作用
|
JS 学习笔记--JS中的事件对象基础的更多相关文章
- node.js学习笔记(三)——事件循环
要理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互 ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- JS学习笔记(四)常用对象
Error // 语法 throw new Error("消息"); 类似于C#中的Exception对象 // alert(num); try { throw new Error ...
- 《C#高级编程》学习笔记------C#中的事件和委托
本文转载自张子阳 目录 委托的作用 将方法绑定到委托 事件的来由 Observer设计模式 .Net Framework中的委托与事件 引言 委托 和 事件在 .Net Framework中的应用 ...
- JS学习笔记-OO创建怀疑的对象
问了.工厂介绍,解决重码 前面已经提到,JS中创建对象的方法.不难发现,主要的创建方法中,创建一个对象还算简单,假设创建多个类似的对象的话就会产生大量反复的代码. 解决:工厂模式方法(加入一个专门创建 ...
- Node.js学习笔记(三): 事件机制
大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...
- Node.js学习笔记(四): 全局对象
在浏览器 JavaScript 中,通常 window 是全局对象, 而 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global 对象的属性. 这 ...
- 【JS学习笔记】提取行间事件
行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
随机推荐
- 转载字典地址:http://blog.csdn.net/aladdinty/article/details/3591789
相关文章: http://www.360doc.com/content/13/1003/23/14070959_318861279.shtml http://www.360doc.com/conten ...
- jQuery类级别插件--返回顶部,底部,去到任何部位
先引入js:<script type="text/javascript" src="jquery.js" ></script><s ...
- 画画板--第三方开源--DrawableView
Android上的第三方开源DrawableView支持手写,类似于写字板.DrawableView支持改变画笔颜色,画笔线条粗细,画布的手势缩放和拖曳显示部分区域.并最终支持将手绘的图保存到本地.在 ...
- 简单Spinner
mainActivity package com.zzw.spinner; import android.app.Activity; import android.content.Context; i ...
- 关于Raw,Assets的使用
Raw,Assets下文件区别: 相同点:两个目录下的文件在打包后都会原封不动的保存到apk中,不会被编译成二进制. 不同点:Raw下文件不能使用目录结构, 有些格式的会被压缩,能够通过R.raw方便 ...
- 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)
此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...
- MySQL自用脚本(不定期更新)
查询指定SQL的trace信息 mysql -uUSER -pPWD -hHOST -e "\ use ins_tc_prd; \ set session optimizer_trace=' ...
- 使用 Attribute +反射 来对两个类之间动态赋值
看同事使用的 一个ORM 框架 中 有这样一个功能 通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的 Dapper 所 ...
- Python核心编程--学习笔记--6--序列(上)字符串
本章研究Python中的序列:字符串.列表和元组.因为这些类型其实都是由一些成员共同组成的一个序列整体,所以我们把它们统称为序列.序列的存储结构可以表示为: 1 序列 序列类型有着相同的访问模式:按下 ...
- JavaWeb之 JSP基础
什么是JSP JSP的全称是java server page, java服务页面.是提供java服务的页面~ 那么和Servlet有什么区别呢?JSP的页面既可以写java代码~也可以写html代码哦 ...