事件(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)的更多相关文章

  1. JavaScript中对事件简单的理解(1)

    事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...

  2. JavaScript中对事件简单的理解

    事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...

  3. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  4. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  5. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  6. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  7. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  8. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  9. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

随机推荐

  1. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  2. java 并发工具类CountDownLatch & CyclicBarrier

    一起在java1.5被引入的并发工具类还有CountDownLatch.CyclicBarrier.Semaphore.ConcurrentHashMap和BlockingQueue,它们都存在于ja ...

  3. linux性能之iostat

    在使用linux系统的过程中,总是可能需要当前io性能的状态信息是怎么样?这里就就是一下iostat,可以通过iostat来初步查看io的状态信息. 1.常用方式 iostat -xdk 1 10 或 ...

  4. redis multi exec

    multi(),返回一个redis对象,并进入multi-mode模式,一旦进入multi-mode模式,以后调用的所有方法都会返回相同的对象,直到exec()方法被调用. phpredis是php的 ...

  5. Android WebView导入HTML使Js生效的方法

    WebSettings ws = webview.getSettings(); ws.setJavaScriptEnabled(true);//加上这句 webview.loadDataWithBas ...

  6. 2017Unity开发者大会备受关注的原因有哪些?

    Unite大会是由Unity举办的全球开发者大会,至今已有10年的历史.从最开始Unity开发者大会仅500人,到现在Unity大会已经增长到5000人,10倍的参与人数,Unity开发者大会仅仅用了 ...

  7. MySQL 完整和增量备份与恢复

    MySQL 完全备份与恢复 1.数据备份的重要性 在企业中数据的价值至关重要,数据保障了企业的业务的运行,因此数据的安全性及可靠性是运维的重中之重,任何数据的丢失都有可能会对企业产生严重的后果.造成数 ...

  8. 思考题:用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?(提示:是否对所有的应用领域都适用?使用的方便性?.......)

    思考题: 用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?(提示:是否对所有的应用领域都适用?使用的方便性?.......) 简答: 一.用例解释: 在软件工程中,用例是一种在开 ...

  9. JS判断PC和移动端设备

    1.方法一 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...

  10. 远程登录aws

    AWS的EC2服务器是用密钥来认证的,在创建instance时,会提示,创建一个key pair,同时会提示下载一个xxx.pem的密钥文件到本地硬盘.下面是通过SecureCRT连接到EC2的操作步 ...