JavaScript中对事件简单的理解(2)
事件(event)
event对象
(1)什么是event对象?
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!
(2)Event相关方法与属性
1、谷歌 event.stopPropagation()、IE event.CancelBubble=true:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点
2、谷歌 event.preventDefault()、IE event.returnvalue=false :取消事件的默认动作(a标签的href)。
3、event.clientX、event.clientY:鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
4、event.offsetX、event.offsetY:鼠标相对于事件源元素(触发事件的元素)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。 与event.offsetLeft、event.offsettop一样。
5、event.screenX、event.screenY:鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
6、event.keyCode:获得按键的code值。例:我们在程序里是怎么知道我们是按得哪个键呢,我们可以通过keyCode获得,程序员早在一开始就把键盘上的每一个键定义了一个code,在程序里我们可以判断值来知道我们点击了哪个键。
1.鼠标事件,页面所有元素都可触发
click:当用户单击鼠标按钮或按下回车键时触发。
input.onclick = function () {
alert('Lee');
};
dblclick:当用户双击主鼠标按钮时触发。
input.ondblclick = function () {
alert('Lee');
};
mousedown:当用户按下了鼠标还未弹起时触发。
input.onmousedown = function () {
alert('Lee');
};
mouseup:当用户释放鼠标按钮时触发。
input.onmouseup = function () {
alert('Lee');
};
mouseover(mouseenter 这种方法不冒泡):当鼠标移到某个元素上方时触发。
input.onmouseover = function () {
alert('Lee');
};
mouseout(mouseleaver 这种方法不冒泡):当鼠标移出某个元素上方时触发。
input.onmouseout = function () {
alert('Lee');
};
mousemove:当鼠标指针在元素上移动时触发。
input.onmousemove = function () {
alert('Lee');
};
2.键盘事件
keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。
onkeydown = function () {
alert('Lee');
};
keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。
onkeypress = function () {
alert('Lee');
};
keyup:当用户释放键盘上的键触发。
onkeyup = function () {
alert('Lee');
};
3.HTML事件
load:当页面完全加载后在window上面触发,或当框架集加载完毕后在框架集上触发。
window.onload = function () {
alert('Lee');
};
unload:当页面完全卸载后在window上面触发,或当框架集卸载后在框架集上触发。
window.onunload = function () {
alert('Lee');
};
select:当用户选择文本框(input或textarea)中的一个或多个字符触发。
input.onselect = function () {
alert('Lee');
};
change:当文本框(input或textarea)内容改变且失去焦点后触发。
input.onchange = function () {
alert('Lee');
};
focus:当页面或者元素获得焦点时在window及相关元素上面触发。
input.onfocus = function () {
alert('Lee');
};
blur:当页面或元素失去焦点时在window及相关元素上触发。
input.onblur = function () {
alert('Lee');
};
submit:当用户点击提交按钮在<form>元素上触发。
form.onsubmit = function () {
alert('Lee');
};
reset:当用户点击重置按钮在<form>元素上触发。
form.onreset= function () {
alert('Lee');
};
resize:当窗口或框架的大小变化时在window或框架上触发。
window.onresize = function () {
alert('Lee');
};
scroll:当用户滚动带滚动条的元素时触发。
window.onscroll = function () {
alert('Lee');
};
JavaScript中对事件简单的理解(2)的更多相关文章
- JavaScript中对事件简单的理解(1)
事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...
- JavaScript中对事件简单的理解
事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
随机推荐
- JQuery事件与动画总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...
- java 并发工具类CountDownLatch & CyclicBarrier
一起在java1.5被引入的并发工具类还有CountDownLatch.CyclicBarrier.Semaphore.ConcurrentHashMap和BlockingQueue,它们都存在于ja ...
- linux性能之iostat
在使用linux系统的过程中,总是可能需要当前io性能的状态信息是怎么样?这里就就是一下iostat,可以通过iostat来初步查看io的状态信息. 1.常用方式 iostat -xdk 1 10 或 ...
- redis multi exec
multi(),返回一个redis对象,并进入multi-mode模式,一旦进入multi-mode模式,以后调用的所有方法都会返回相同的对象,直到exec()方法被调用. phpredis是php的 ...
- Android WebView导入HTML使Js生效的方法
WebSettings ws = webview.getSettings(); ws.setJavaScriptEnabled(true);//加上这句 webview.loadDataWithBas ...
- 2017Unity开发者大会备受关注的原因有哪些?
Unite大会是由Unity举办的全球开发者大会,至今已有10年的历史.从最开始Unity开发者大会仅500人,到现在Unity大会已经增长到5000人,10倍的参与人数,Unity开发者大会仅仅用了 ...
- MySQL 完整和增量备份与恢复
MySQL 完全备份与恢复 1.数据备份的重要性 在企业中数据的价值至关重要,数据保障了企业的业务的运行,因此数据的安全性及可靠性是运维的重中之重,任何数据的丢失都有可能会对企业产生严重的后果.造成数 ...
- 思考题:用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?(提示:是否对所有的应用领域都适用?使用的方便性?.......)
思考题: 用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?(提示:是否对所有的应用领域都适用?使用的方便性?.......) 简答: 一.用例解释: 在软件工程中,用例是一种在开 ...
- JS判断PC和移动端设备
1.方法一 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
- 远程登录aws
AWS的EC2服务器是用密钥来认证的,在创建instance时,会提示,创建一个key pair,同时会提示下载一个xxx.pem的密钥文件到本地硬盘.下面是通过SecureCRT连接到EC2的操作步 ...