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 ...
随机推荐
- 新建一个DataTable如何手动给其添加多条数据!
早晨起来,想起昨天利用winform做类似于sqlserver数据库导入数据功能的时候,用到了新建一个DataTable手动给其添加多条数据,平时用不到,需要的时候想不起来了,这次不妨把他记下来.以下 ...
- Entity Framework Extended Library (EF扩展类库,支持批量更新、删除、合并多个查询等)
E文好的可以直接看https://github.com/loresoft/EntityFramework.Extended 也可以在nuget上直接安装这个包 1.先更新VS的NuGet版本http: ...
- FireFox Prevent this page from creating addtional dialogs 火狐浏览器 设置 阻止此页面创建更多对话框
FireFox英文版本老弹出“Prevent this page from creating addtional dialogs”的确认框 FireFox english version alert ...
- 关于js中立即执行的匿名函数写法
/*最流行的写法*/ (function() { alert("run!") })(); /* !号可以有1~正无穷个,所以这一种就可以衍生无数种方式 */ !!!(functio ...
- Ajax 异步调用代码
function jsAjax() { var Con; var XmlRequset; var AjaxContent; //返回内容 if (window.XMLHttpRequest) { // ...
- EMVTag系列6《IAC 发卡行行为代码》
R(需求):数据应存在,在读应用数据过程中,终端不检查:将变成必备 L: 5 IAC 的值,最好不要自定义,最好和所选的模板完全匹配.如果修改持卡人认证位,PIN Bypass 相关的位.如果有业务需 ...
- SQL0294N 容器已在使用中。 SQLSTATE=42730
在建立数据库后,建立表空间时,出现如下错误: CREATE TABLESPACE TABLESAPCE_NAME PAGESIZE 32K MANAGED BY SYSTEM USING ('E:\D ...
- 019C#中使用移位运算符获取汉字编码值
在进行移位运算时,当数值的二进制数每次向左移1位就相当于乘以2,当数值每次向右移一位就相当于除以2 private void button1_Click(object sender, EventArg ...
- hdu 3342 Legal or Not
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=3342 Legal or Not Description ACM-DIY is a large QQ g ...
- linux下安装protobuf教程+示例(详细)
(.pb.h:9:42: fatal error: google/protobuf/stubs/common.h: No such file or directory 看这个就应该知道是没有找到头文件 ...