JavaScript学习笔记——事件
javascript事件基础和事件绑定
一、事件驱动
1.事件
javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)
2.事件源
引发事件的元素。(发生在谁的身上)
3.事件处理程序
对事件处理的程序或是函数 (发生了什么事)
二、事件的分类
<body>
<input type="button" value="改变" id="one" > </body>
1.鼠标事件
onclick
var one=document.getElementById("one");
one.onclick=function () {
alert("点击");
}
var one=document.getElementById("one");
one.onclick=aa;
alert(aa)
function aa () {
alert("点击");
}
ondblclick
onmousedowm
onmouseup
onmousemove
onmouseover
onmouseout
2.键盘事件
onkeyup
onkeydown
onkeypress 鼠标按下或按住
3.表单事件
onsubmit
onblur
onfoucs
onchange
4.页面事件
onload
onunload
onbeforeunload
三、如何绑定事件
1.在脚本中绑定
2.直接在HTML元素绑定
3.<script for="two" event="onclick">
alert("我是DIV2");
</script>
四、同一个事件绑定多个事件处理程序
1.自己写的
2.IE:
对象.attachEvent("事件(on)","处理程序") 添加
对象.dettachEvent("事件(on)","处理程序") 删除
one.attachEvent("onclick",aa);
one.attachEvent("onclick",bb);
function aa () {
alert("aa");
}
function bb() {
alert("bb");
}
one.detachEvent("onclick",bb)
one.attachEvent("onclick",function () {
alert("cc");
});
one.detachEvent("onclick",function () {
alert("cc");
});
FF:
对象.addEventListener("事件","处理程序",布尔值) 添加
对象.removeEventListener("事件","处理程序",布尔值) 删除
one.addEventListener("click",bb,false)
one.addEventListener("click",aa,false)
one.addEventListener("click",function () {
alert("cc");
},false)
one.removeEventListener("click",function () {
alert("cc");
},false)
function aa () {
alert("aa");
}
function bb() {
alert("bb");
}
Mozilla中：
addEventListener的使用方式：
target.addEventListener(type, listener, useCapture);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中：
target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
javascript事件对象实例讲解
一、事件对象
用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生，只能在处理函数内部访问
2.处理函数运行结束后自动销毁。
二、如何获取事件对象
IE：window.event
FF:
对象.on事件=function (e){}
三、事件对象的属性
1.关于鼠标事件的事件对象
相对于浏览器位置的
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY 当鼠标事件发生的时候，鼠标相对于屏幕Y轴的位置
document.onmousemove=function (e) {
var ev=e||window.event;
var cx=ev.clientX;
var cy=ev.clientY;
var sx=ev.screenX;
var sy=ev.screenY;
div1.innerHTML="cx:"+cx+"--cy:"+cy+"<br/>sx:"+sx+"--sy:"+sy;
}
相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
offsetY
FF:
layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
laterY
div1.onclick=function (e) {
var ev=e||window.event;
var ox=ev.offsetX ||ev.layerX;
var oy=ev.offsetY ||ev.layerY;
div1.innerHTML="ox:"+ox+"--oy:"+oy;
}
2.关于键盘事件的事件对象
keyCode 获得键盘码
空格:32 回车13 左上右下：37 38 39 40
altKey 判断alt键是否被按下 按下是true 反之是false 布尔值
document.body.onkeydown=function (e) {
var ev=e||window.event;
alert(ev.keyCode)
alert(ev.altKey)
alert(ev.type)
}
ctrlKey
shiftKey
type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程序的时候
javascript事件流讲解和实例应用
当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定
顺序相应该元素的触发事件，事件传播的顺序叫做事件流程。
一、事件流的分类
1.冒泡型事件(所有的浏览器都支持)
由明确的事件源到最不确定的事件源依次向上触发。
2.捕获型事件(IE不支持 w3c标准 火狐)
不确定的事件源到明确的事件源一次向下触发。
addEventListener(事件，处理函数，false)
addEventListener(事件，处理函数，true)
二、阻止事件流
IE:
事件对象.cancelBubble=true;
FF:
事件对象.stopPropagation();
三、目标事件源的对象
IE：事件对象.srcElement
FF:事件对象.target
JavaScript学习笔记——事件的更多相关文章
- 8. JavaScript学习笔记——事件
8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
随机推荐
- iOS不得姐项目--TabBar的重复点击实现当前模块刷新;状态栏点击实现当前模块回滚到最顶部
一.实现功能:重复点击tabBar,刷新当前TableView,其余不受影响 <1>实现思路: 错误的方法: TabBar成为自己的代理,监听自己的点击--这种方法是不可取的,如果外面设置 ...
- git diff命令
1. 比较两次提交的差异 2. 两个分支之间的比较 3. 暂存区和版本库的比较
- jQ1.5中的事件系统（低版本的事件系统）
jQ的一个个版本事系统都在修正着bug和不断优化, 而且看了事件系统对事件的兼容更加熟悉, 更加了解jQ内部的事件机制. 因为jQ对事件系统引入了事件命名空间,事件的代理, 事件的手动触发,事件描述等 ...
- codeforces Hill Number 数位dp
http://www.codeforces.com/gym/100827/attachments Hill Number Time Limits: 5000 MS Memory Limits: ...
- quartz介绍
Quartz 是一个开源的作业调度框架,它完全由 Java 写成,并设计用于 J2SE 和 J2EE 应用中.它提供了巨大的灵活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度.本 ...
- Spark 常用参数及调优
spark streaming 调优的几个角度: 高效地利用集群资源减少批数据的处理时间 设置正确的批容量(size),使数据的处理速度能够赶上数据的接收速度 内存调优 Spark SQL 可以通过调 ...
- 【BZOJ-1441】Min 裴蜀定理 + 最大公约数
1441: Min Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 471 Solved: 314[Submit][Status][Discuss] De ...
- 【bzoj2818】 Gcd
http://www.lydsy.com/JudgeOnline/problem.php?id=2818 (题目链接) 题意 求给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数 ...
- wpf中textbox与textblock有什么区别
textbox是windows.form控件,textblock是WPF控件. 功能类似,但后者功能更强,也节省系统资源 wpf是基于directx技术的系统,向后兼容性更好. textblock只用 ...
- NuGet多个项目依赖的公共组件如何打包
会有这样一种情况:在同一个解决方案下面,类库A是独立的,类库B是依赖于类库A的:类似这样: 所以在使用类库B时必须引入类库A的东西,这时如果作为nuget包打包发布,有如下的解决思路: 1.在整个解决 ...