Web--js高级--12月3日随笔

事件对象

1.每个元素身上的事件是天生自带的,不需要我们去定义,只需要我们给这个事件绑定一个方法,当事件触发时就会执行这个方法。

2.事件绑定的方法:

  1.div.onclick=function(){}   DOM0级事件

  2.div.addEventListener()或div.attachEvent()

DOM2级事件绑定

  二者的区别

  onclick是这个元素私有的属性,天生自带的,而addEventListener()是公有的属性,从EventTarget(事件源)对象上继承来的。

  IE低版本的attachEvent是共有的。

  div.onclick存在事件冒泡机制没有捕获机制

  div.addEventListener()可有冒泡也可有捕获

  div.attachEvent()只有冒泡机制

3.div.addEventListener和div.attachEvent的区别

(1)前者有冒泡和捕获,后者只有冒泡机制

(2)事件名前者带on,后者不带on

  (3)前者this指向当前元素,后者指向window

  (4)前者是标准浏览器的写法,后者是ie8以下

4.Arguements(参数集合)

每个函数都有一个arguments对象,他是这个函数所有参数构造的集合

上面的控制台是arguments数组中有一个元素叫mouseevent。所以,每个事件的方法中浏览器都给他一个参数叫mouseevent。

我们所有鼠标的信息都临时存储在这个mouseevent对象上

Mouseevent有兼容性

  标准浏览器可以直接读取,但是ie不行

  解决办法:

  div.onclick=function(ev){

   var  ev=ev||window.event 

}

5.event对象的兼容性

  clientX和clientY是鼠标到浏览器窗口左上角的距离坐标

  pageX和pageY是鼠标到网页左上角的距离坐标,但是ie低版本没有这个属性。

        在ie下怎么算pageY的值用clientY+scrollTop

事件源  点击哪个元素,哪个元素就是事件源

  标准浏览器的事件源是ev.target

  IE6-8没有这个属性,但是ie有ev.srcElement

6.阻止事件冒泡兼容性

  1.event.cancelBubble=true

  2.event.stopPropagation?event.stopPropgation():event.cancelBubble=true

7.阻止事件默认行为兼容性

  比如a的href

  href为空   会自动刷新页面

  href为#  锚点链接

  href为javascript:;阻止默认行为的发生

  Event.preventDffault?Event.preventDefault():event.returnValue=false

原文地址:https://www.cnblogs.com/lovels/p/10057062.html

时间: 2024-10-14 23:44:16

Web--js高级--12月3日随笔的相关文章

Web--js高级--12月21日随笔

问题: 在拖拽元素的时候,如果元素的内部加了文字或者图片,拖拽效果会失灵? 因为浏览器会给文字和图片一个默认行为,当文字和图片被选中的时候,会有一个拖拽的效果,即使我们没有人为他添加.所以当我们点击这个元素拖拽时,有可能选中文字或图片,触发浏览器天生给的那个行为,从而导致我们写的那个拖拽效果失灵. obj.onmousedown=function(ev){ var ev=ev||window.event; var _this=this; var x=ev.clientX-this.offsetL

翻译:Gregory Larsen,2016/02/19(第一版:2014年12月17日)高级T-SQL阶梯1级:使用CROSS JOIN介绍高级T-SQL

原文链接:http://www.sqlservercentral.com/articles/Stairway+Series/119933/ 原文作者:Gregory Larsen,2016/02/19(第一版:2014年12月17日) 系列 本文是"Stairway Series:Stairway to Advanced T-SQL"的一部分 这个阶梯将包含一系列文章,这些文章将在前面两个T-SQL阶梯,T-SQL DML和T-SQL超越基础知识的T-SQL基础上进行扩展. 这个楼梯应

《高级软件测试》实践作业3学习记录12月18日

今天我们的主要任务是开始熟悉代码复审的过程与静态代码检查工具.我们选择的系统是客户关系管理系统,此系统具有最基本的添加客户,查询客户与高级搜索的功能,我们选择的是添加客户模块,对此模块的代码展开静态评审,并计划在12月21日进行同行评审会议. 何阳寅同学选择了阿里巴巴Java开发手册作为代码评审标准,让其他同学在课后学习,评审时遵循该标准来评审代码: 杨智超同学亲自编码了该客户管理系统,虽然功能有些简单,但是可以深切体会从编码到测试的过程: 叶瑞同学分配并协调了各组员的任务,实时跟进任务进度并记

米的建站日记(2014年12月9日)

后台框架准备用struts2.2.3 + spring3.1.0 + mybatis3.1.0 这是在网上找到的一位大牛的demo http://blog.csdn.net/afgasdg/article/details/7392367 额,自己找太麻烦了,就用他的吧 数据库使用mongodb,这个我从来没用过,关系型数据库以前倒是用过,暂且边学边做把.~ ~ 各种jar包,js库,现在加起来快22M了呢. 奇怪,为毛项目启动就报错,我想应该是spring的配置文件还没有和数据库连上,明天准备看

19.go语言基础学习(上)——2019年12月16日

2019年12月16日16:57:04 5.接口 2019年11月01日15:56:09 5.1 duck typing 1. 2. 接口 3.介绍 Go 语言的接口设计是非侵入式的,接口编写者无须知道接口被哪些类型实现. 而接口实现者只需知道实现的是什么样子的接口,但无须指明实现哪一个接口. 编译器知道最终编译时使用哪个类型实现哪个接口,或者接口应该由谁来实现. 每个接口类型由数个方法组成.接口的形式代码如下: type 接口类型名 interface{ 方法名1( 参数列表1 ) 返回值列表

MVP社区巡讲 12月5日北京站| 12月12日上海站

2015年底的社区巡讲Powered MVP Roadshow正式启动啦!12月5日周六下午北京场,12月12日周六下午上海场. 欢迎各位邀请您的同事朋友来参加MVP的社区活动,也邀请您发送活动信息(邮件下方附文字,附件有图片) 到您的微博,博客或是微信,以及发送到您活跃的各大IT技术社区. 您发送之后,欢迎回复邮件告知我们链接.非常感谢! 城市 时间 地 点 现在报名 北京 12月5日周六下午北京场 1点到5点30分 北京朝阳望京利星行微软大厦3层培训室 http://aka.ms/mvpbe

云计算之路-阿里云上-寒流来袭:2014年12月23日21:45-23:15网站故障

1个多小时间的网站故障给大家带来很大的麻烦,在这里我们表示深深的歉意!希望大家能够谅解! 这两天上海的气温在回升,而杭州的云上却突然袭来一股寒流. 12月23日晚上,阿里云进行了一次RDS的发布,在这次发布中自动地修改了我们的数据库连接数限制,谁也不知道,然后... 21:45:52左右开始,日志中出现大量执行时间超过5秒的请求. 然后出现超过10秒.20秒...甚至超过100秒的请求. 21:46:50左右,开始出现数据库连接错误: System.Data.SqlClient.SqlExcep

我的Python成长之路---第一天---Python基础(1)---2015年12月26日(雾霾)

2015年12月26日是个特别的日子,我的Python成之路迈出第一步.见到了心目中的Python大神(Alex),也认识到了新的志向相投的伙伴,非常开心. 尽管之前看过一些Python的视频.书,算是有一点基础.但在这里我要保持空杯心态,一切从头开始.好了不多说,Let's Python!!!! 一.Python简介 Python是著名的“龟叔”Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言.目前Python已经成为实际上除了中国最流行的开发语

20141211,微软12月10日发布7个安全补丁

大家好,我们是微软大中华区安全支持团队. 微软于北京时间2014年12月10日发布了7个新的安全公告,其中4个为严重等级,3个为重要等级,共修复Microsoft Windows.Internet Explorer (IE).Office 和 Exchange 中的24个漏洞.建议优先部署MS14-080 和MS14-081. MS14-080 | Internet Explorer 的累积安全更新 (3008923) 此安全更新可解决 Internet Explorer 中 14 个秘密报告的