位置: 编程技术 - 正文

理解javascript中DOM事件(javascript的dom)

编辑:rootadmin

推荐整理分享理解javascript中DOM事件(javascript的dom),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript的dom,javascript的理解,js中do while,javascriptmdn,javascript的理解,js中do while,javascript的理解,javascript的dom,内容如对您有帮助,希望把文章链接给更多的朋友!

首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明。

&#;标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通。最初我们给页面实现点击,就像下面这样的简单操作。先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为weiyuzhou的点击事件,如下代码所示:

确保上面这些步骤都没问题的话,我们才可以继续的往下走,然后我们在IE浏览器(低版本)看到弹出0,确切的说,IE8以下(包含IE8)的弹出0,反之弹出1。接着我在firefox浏览器看到弹出1。也就是说在IE8以下版本事件的触发不存在于函数的作用域内部,是不是说IE8以下的事件触发发生在全局作用域中,此处留个悬念,但是,可以肯定的是IE8以下事件的方法并没有这个Event参数,也就是说arguments的长度为0,如下视图5所示:

于是,我们看firefox浏览器窗口弹出1,说明事件存在于函数内部,再次证明方法的内部数组arguments长度为1,并且是可枚举的变量,也可以说可写,如下视图所示。

如果,你还是不明白其中的原理,你不防去看一下《web前端开发修炼之道》书上第页,然后再回过头来看此处文章摘要,可能会让你更加深层次的了解书中的内容。

接下来,我们该怎么办呢,我们肯定不能让IE和firefox返回的事件输出不相同,那么如何让IE和firefox下弹出的内容都一样。

衔接上一段内容,下面给点击函数的内部设置一个参数,参数名为e,然后在IE和firefox浏览器下面同时触发点击事件,我们看到firefox下面显示e为鼠标事件[objectMouseEvent],IE8下报错,弹出错误信息未定义undefined。此时你要问我错在哪里,咱们回到刚刚的那句话‘此处留个悬念'进行分析,IE8以下的浏览器的事件是不是发生在全局作用域中,从视图5-所示看到有一个global全局对象,我们可以对global展开搜索,global的继承的方法有一个event事件,找到了IE8的专有事件方法window继承event,于是我们对这个参数e设置为window.event进行一个调试,目前我们在IE8下面看到返回了一个事件[objectevent],如图所示。

想必你一定发现了IE8和firefox浏览器下对话框的事件返回值各不不同,IE8的对话框为[objectevent],firefox的对话框为[objectMouseEvent],那我们怎么让IE8和firefox下的返回值都相同呢?

看到这里,你的心里是不是有点小沮丧,挖坑挖了这么久了,怎么还没有看到水流出来,别急,正题才刚刚开始,咱们不闲聊,继续围绕正题展开分析,通过刚刚的返回值,我们继续使用断点的方法寻找能够实现IE和firefox的返回值的共同点。

经由以上分析,我们查找发现firefox下的event有我们需要的方法名可以被调用,当然,我们查找发现IE8下面的srcElement也有我们所需的方法名可以被调用,于是乎,呵呵!看到这里你的内心是不是有点小激动,一步步排除,最后发现也没有什么难的。回到正题,现在我们声明一个变量vare_child=e.srcElement||e.target;然后我们在IE8和firefox浏览器上看到对话框信息都为[objectHTMLDivElement],如图所示。

理解javascript中DOM事件(javascript的dom)

现在我们解决了不同浏览器的返回值不同的问题,也就是说解决了兼容的问题,这只是冰上一角。

下面我们要解决实现窗口的容器触发事件,主要是基于上面的结构进行的一次分析。

当你有了上面基础的话,下面的内容相对于上面而言比较简单一点。

还是以上一个页面的块为例,现在我继续往块<divid="weiyuzhou">微宇宙</div>增加一个子容器,这个子容器为行内元素<spanid='coz'>koringz</span>,取id名为coz,然后给这个元素也加一个点击事件代码同上函数,为了能区别开文本内容之间的差异。

当我分别在IE8和firefox下点击容器的内容,出现了怪异的情况,在firefox浏览器的窗口上点击时,点击中文文本内容弹出来对话框‘微宇宙',我再点击koringz时,发现弹出了二次对话框,弹出内容都为'koringz',那是因为我点击子容器的时候触发了上一层的点击行为,如何解决点击koringz弹出二次对话框的问题,了解一点js的程序员都知道这是冒泡事件。

那么在firefox能够清除冒泡事件的是event下的stopPropagation,于是我们给第二次点击事件函数代码块之后面加一行代码e.stopPropagation();之后再点击koringz发现弹出一次'koringz'。如图所示

接下来在IE8下面测试一下,发现在IE8浏览器点击也弹出二次,解决IE8的停止冒泡事件为cacelBubble,且我们只需要给cacelBubble设置为true即可。因为IE8下global包含的event属性cacelBubble不是一个方法,而是一个输出布尔值的对象,所以这个和firefox有所不同,只是firefox把此事件封装成方法而已。好了,现在我们给第二次点击的事件代码块之后再加一行代码e.cancelBubble=true;然后在IE8浏览器下测试,之后再点击koringz发现也弹出一次。如图所示

注意上面的停止冒泡的事件的代码可以根据浏览器的不同分开来写,如何分开写,我们查看IE8浏览器下面的document发现存在对象all,而在firefox却没有这个all属性,这也就是说document.all是IE8版本下面独有的一个属性。通过它我们可以区分浏览器的冒泡事件。

到目前为止,我们解决了窗口的冒泡事件,接下来,我们要解决一个事件因被多人定义而覆盖原函数的问题。也可能是说某公司之前的工作人员添加了此事件,后来新员工接手项目后添加修改此事件而覆盖了原事件的执行所产生的问题。也就是说给当前id多次添加此类事件都不会覆盖此事件的原函数执行。

在firefox下的window包含有addEventListener(type,listener,useCapture)的方法,随后我们在<scripttype="text/javascript"></script>内部定义此监听事件domElement.addEventListener('click',function(e){confirm(e+'e')},false);,接着在firefox浏览器点击内容弹出二次,最后一次弹出为[objectMouseEvent]e,后面多了一个e,这是我有意加上用以区别的。如图所示。

接下来在IE8下测试发现addEventListener错误,但是看到window下有此类方法(尝试了一下,原来此类方法在IE9以上版本是可以被支持),IE8同时还有一个attachEvent(event,pdisp),那么我们设置监听事件wyz.attachEvent('onclick',function(e){confirm(e+'e')}),注:event为'onclick',紧接着在IE8下点击发现可弹出二次,最后一次[objectMouseEvent]e。此时on('click',pdisp)和attachEvent(event,pdisp)可以共同使用。

综上所述,我们解决了DOM事件的兼容性,DOM事件的冒泡,以及DOM事件的重用。

学习JavaScript鼠标响应事件 本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一

javascript实现简单加载随机色方块 用碎片加载小方块实现简单的随机色块,直接上代码:效果图:具体代码:!DOCTYPEhtmlhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"metacharset="utf-8"

理解javascript中try...catch...finally 本文为大家分析了javascript中try...catch...finally的使用方法,分享给大家供大家参考,具体内容如下稍微复杂一点点,就要用到判断语句,ifelse进行条件判

标签: javascript的dom

本文链接地址:https://www.jiuchutong.com/biancheng/385546.html 转载请保留说明!

上一篇:理解JavaScript中worker事件api(javascriptwhile)

下一篇:学习JavaScript鼠标响应事件(javascript教程完整版)

  • 未核销fyc
  • 个人所得税如何做会计分录
  • 应付账款超过三年未付
  • 备用金没有发票抵消违法吗
  • 房地产企业在开盘前的销售费用是否可以在税前扣除
  • 欠税后股东能否退股
  • 企业国有资产无偿划转办法
  • 装修期内免租金可以办理营业执照吗
  • 小规模纳税人改为一般纳税人需要什么材料
  • 资产报废账务处理资产处置损益
  • 固定资产清理属于
  • 办事处可以办理临时身份证吗
  • 印花税本月没有,忘记零申报,有影响吗了
  • 企业有哪些o
  • 应交增值税是否影响企业利润
  • 税收滞纳金起止时间问题
  • 公司资产重组流程
  • 售楼部沙盘制作价格一般多少一平
  • 资产负债表资产总额为负数
  • 软件公司客户经理一般月薪多少
  • 收到发票对方已红冲是否退回?
  • 如何安装os x
  • 政府购买缴纳社保吗
  • 特种车辆租赁需要什么资质
  • 生产车间购入材料会计分录
  • 出口退税操作步骤
  • linux系统中的文件访问权限包括几种
  • 项目投资总额是什么
  • php字符串赋值
  • PHP:Memcached::decrementByKey()的用法_Memcached类
  • PHP:ftp_get_option()的用法_FTP函数
  • 抵债资产账务处理程序
  • .exe是指什么文件
  • 微信公众平号平台
  • 处置动产减按2%税率是什么意思
  • 资本公积和盈余公积的提取比例
  • 其他业务收入属于收入吗
  • 最小的电视棒是多少寸
  • element-ui table使用type=‘selection‘复选框全禁用-全选禁用
  • 库存现金要设置明细科目吗
  • 旅行社小规模纳税人差额征税
  • php流程图
  • 浅谈如何培养孩子的注意力
  • js面试必问
  • php获取前一天的时间
  • msg文件怎么创建
  • 交所得税会计分录例题
  • 员工社保缴纳规定标准
  • 自建房销售个人所得税如何计算
  • 老板的财务
  • 各会计科目的含义
  • 发现以前年度的账错误
  • 应收保费核算什么业务
  • 残保金滞纳金免征吗
  • 年终奖不属于工资有法律依据吗
  • 印花税减免优惠政策2019
  • sql2008自动启动服务
  • 开发票需要填银行吗?
  • 外贸会计的工作内容
  • 捐赠 税收
  • 税控盘忘记抄报税怎么办
  • 垫付的资金
  • 个税公司少申报一个月会对个人有什么影响
  • 银企对账操作流程
  • 生产企业消防设施管理规定
  • 小企业会计建账分录
  • sql语句重复
  • mac中怎么给表情添加文字
  • centos 安装
  • win8停止服务
  • win8系统连接共享打印机需要设置什么
  • Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用
  • if iferror find
  • unity获取物体位置代码
  • 2012 05-26 Unity3D研究院之两种方式播放游戏视频(二十五) 雨松MOMO
  • 国税网上办税大厅在哪
  • 已抵扣过的进项怎么做账
  • 电子发票怎么看有没有重复报销
  • 滞留票税务局会罚款多少
  • 青霉素过敏是因为提纯不好吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设