一 事件对象(event):与特定事件相关且包含有关该事件详细信息的对象
通过事件可以触发event对象的元素,鼠标的位置及状态,按下的键等等
event对象只在事件发生的过程中才有效
非IE浏览器里的event跟IE里的不同,IE里面的是全局变量,随时都可用
非IE浏览器需要用参数诱导才能使用是运行时的一个局部变量

clientX:鼠标在浏览器窗口中的横向坐标
clientY:鼠标在浏览器窗口中的纵向坐标

二 事件流:描述的是页面中接受事件的顺序
在w3c的标准里面规定了事件的执行顺序要经历两个过程:事件捕获,事件冒泡
事件捕获:由最不具体的节点接收事件,而最具体的节点最后接收---由外到内的过程
最不具体的节点:document或者window
最具体的节点:绑定事件的对象最里层的节点
事件冒泡:由具体的元素接收,然后逐级向外面传播至最不具体的节点---由内到外的过程
整个事件流的顺序:先接收再传播

阻止事件冒泡:因为执行函数是在冒泡阶段执执行的
stopPropagation();
cancelBubble=true;
window.event?window.event.cancelBubble=true:e.stopPropagation();

阻止事件的默认行为:
preventDefault();
returnValue=false;
window.event?window.event.returnValue=false:e.preventDefault();

三 事件处理程序---事件后面绑定的函数
1 HTML事件处理:
直接添加到HTML结构当中
<tag onclick="funName()"></tag>---HTML的事件属性
2 DOM0级事件处理:
把一个函数赋值给一个事件
DOM.on事件名=function(){---对象的事件属性
程序块;
}
3 DOM2级事件处理:
添加事件句柄:
非IE低版本:
addEventListener("EventType",FunName,Bool);---事件句柄
true:在事件捕获阶段执行事件处理程序
false:在事件冒泡阶段执行事件处理程序

IE低版本:
attachEvent("on事件名",函数名);---只支持事件冒泡的阶段

移除事件句柄:
removeEventListener("EventType",FunName,Bool);
detachEvent("on事件名",函数名);
只能移除没有带参数的事件函数

JS----事件3的更多相关文章

  1. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  2. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  3. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  4. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  5. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  6. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  7. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  8. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  9. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

  10. js 事件

    事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型 内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...

随机推荐

  1. Java并发知识整理

    整理了一下前段时间学习Java并发的笔记,大约有40篇. 1. Java并发基础知识 并发基础(一) 线程介绍 并发基础(二) Thread类的API总结 并发基础(三) java线程优先级 并发基础 ...

  2. sourcetree回退已推送的代码

    方法一: https://blog.csdn.net/gang544043963/article/details/71511958 我百度到博主用这种界面的方式进行的,可视化很好.我想应该可以很好的回 ...

  3. WPF 异步刷新页面,创建定时器

    #region 异步,刷新页面 /// <summary> /// 页面加载事件 /// </summary> /// <param name="sender& ...

  4. BZOJ2321 [BeiJing2011集训] 星器

    2321: [BeiJing2011集训]星器 Time Limit: 1 Sec  Memory Limit: 128 MB Description Magic Land上的时间又过了若干世纪…… ...

  5. spring mvc 异常处理

    一般实现业务的时候避免不了会抛一些自定义异常 抛给controller进行最终处理.如果业务上比较复杂.频繁的在try catch操作. 时间一长,代码维护性,可读性自然而然就上来了. 然后,spri ...

  6. 重识linux-linux的新增与删除用户组和切换命令

    重识linux-linux的新增与删除用户组 1 相关文件 /etc/group /etc/gshadow 2操作相关 groupadd group1 groupmod group1 groupdel ...

  7. 8.Appium的基本使用-3(安装JDK、android-sdk)

    1.下载安装JDK :https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html安装教程参 ...

  8. 49.纯 CSS 创作一支诱人的冰棍

    原文地址:https://segmentfault.com/a/1190000015257561 感想:重点在让色彩滚动起来->background-position: 0 1000vh; HT ...

  9. idea 未实现接口红线提示,重复代码波浪线提示,自动换行,控制台输出内容自动换行

    01,Could not autowire. No beans of 'UserMapper' type found 01.1,问题描述,通过反射动态实现的接口在调用时会出现以上提示,常见的如 ORM ...

  10. Redis 内存溢出过期策略

    1: 设置内存最大值, 如果该主机只作为 redis 服务器, 无其它比较占用资源的服务, 建议设置为内存的 3/4 大小, 单位 B 2: 设置内存溢出解决策略, 推荐 1-5 任选一种, 不推荐 ...