请选择 进入手机版 | 继续访问电脑版

NodejQ

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 2264|回复: 11

[前端] 跨浏览器开发经验总结(五) —— 事件

  [复制链接]

335

主题

335

帖子

1323

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1323

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 2017-10-11 18:08:50 | 显示全部楼层 |阅读模式
简单事件模型和高级事件模型
简单事件,就是事件与页面元素直观的绑定在一起的形式,如:
element.onclick = function(){alert(this.innerHTML);}
只要不是用了个别浏览器独有的事件,一般的click,mouseover事件等在各浏览器中都可以这么使用。
但是当一个事件需要绑定多个监听,或者需要动态注册/移出监听时,简单事件模型就不够用了,需要使用高级事件模型(IE和其他浏览器在使用高级事件模型时就有区别了):
  1. //注册
  2. function addEventHandler(element, evtName, callback, useCapture) {
  3.         //DOM标准
  4.         if(element.addEventListener) {
  5.                 element.addEventListener(evtName, callback, useCapture);
  6.         } else {
  7.                 //IE方式,忽略useCapture参数
  8.                 element.attachEvent('on' + evtName, callback);
  9.         }
  10. }
  11. //移除
  12. function removeEventHandler(element, evtName, callback, useCapture) {
  13.         //DOM标准
  14.         if(element.removeEventListener) {
  15.                 element.removeEventListener(evtName, callback, useCapture);
  16.         } else {
  17.                 //IE方式,忽略useCapture参数
  18.                 element.dettachEvent('on' + evtName, callback);
  19.         }
  20. }
复制代码
<a>标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时,会先进行onclick事件的响应,再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”:
<a href=”javascript:alert(“href”);”> button </a>
但是,最好不要在href中定义具体的javascript方法,因为这个是定义跳转的链接地址的属性,如果需要先后执行两个javascript方法,应该这样写:
<a href=”#”> button </a>
但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面,那么会发现当前网页做了一次刷新,因为以上代码中href=“#”表示跳转到当前页的顶部,但是并没有发出新的html请求。有的时候,我们并不希望页面在响应onclick事件后又跳回顶部(尤其是页面高度较长,出现滚动条,并且该链接位于页面底部时,跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时),那么应该在onclick后返回false值,阻止继续进行href定义的动作,如:
  1. <a href=”#”> button </a>
复制代码

或者将#替换成空的javascript语句:
  1. <a href=”javascript:void(0)”> button </a>
复制代码
onload事件的调用顺序
有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态,最标准的做法是用<body onload=””>方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用,这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在<head>区域的<script>块中执行脚本,并使用了页面元素时,就很有可能出现找不到元素的错误。如果是在<body>区域的<script>块中执行脚本,只能使用该<script>块之前的页面元素,因为<body>区域的元素基本是顺序解析的。
onchange事件
<input>元素和<select>的<option>元素都支持onchangge事件,但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以,onchange事件只能捕获用户操作时的值变化,对于使用javascript脚本动态改变元素value的情况,它是捕获不到的。
事件截获
因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素:
  1. var evt = e?e:(window.event?window.event:null);
  2. var el = evt.srcElement?evt.srcElement:evt.target;
复制代码


点击放大,扫码打赏,金额随意!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|NodejQ ( 粤ICP备18055488号 )

GMT+8, 2019-7-23 16:52 , Processed in 0.036310 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4 Licensed

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表