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 ...
随机推荐
- Js学习笔记一(鼠标事件.....)
1.encodeURI与decodeURI()转化url为有效的url(能被识别) Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui& ...
- sql中with as的用法练习
在工作中经常看到有人使用with as,查询很顺畅,也很快,很好奇,在网上也有不少资料,看了大神的文章,也练习一下. 首先给出两位位大神文章的链接,介绍十分详细:http://www.cnblogs. ...
- POJ——3984
走迷宫问题,POJ上面的题 #include <stdio.h> #include <stdlib.h> #define SIZE 5 bool findpath = fals ...
- Linux 两个目录浅对比拷贝
对比两个目录内容,然后拷贝! #!/usr/bin/python# -*-coding:utf-8 -*-import osimport sysimport shutildef get_dir_con ...
- 9 本免费的 Python 语言编程书籍(转载)
9 本免费的 Python 语言编程书籍 原文地址:http://linuxtoy.org/archives/9-free-python-books.html 2010-03-03 Toy Poste ...
- [转]Posix-- 互斥锁 条件变量 信号量
这是一个关于Posix线程编程的专栏.作者在阐明概念的基础上,将向您详细讲述Posix线程库API.本文是第三篇将向您讲述线程同步. 互斥锁 尽管在Posix Thread中同样可以使用IPC的信号量 ...
- 浅析python的string.Template
摘自:python参考手册. string模块定义了一种新字符串类型Template,简化了特定的字符串置换操作, Template定义一个类 1.template(s), #s是字符串 s='he ...
- Android SDK API (2.2,2.3,3.0)中文版文档
转的一篇.觉得很有用. Android SDK API (2.2,2.3,3.0)中文版文档 地址:http://android.laoguo.org固定连接:http://www.laoguo.or ...
- Node.js:util.inherits 面向对象特性【原型】
/** * Created by Administrator on 2014/9/4. */ var util = require('util'); function Base() { this.na ...
- 007--VS2013 C++ 显示位图半透明化
以后所有图片都放在根目录下: 如有另放,会特别注明 //全局变量HBITMAP bg,girl;HDC mdc; //起始坐标const int xstart = 50;const int ystar ...