Heim > Artikel > Web-Frontend > javascript 跨浏览器开发经验总结（五） js 事件_javascript技巧
javascript 跨浏览器开发经验总结（五） js 事件_javascript技巧
- WBOYOriginal
- 2016-05-16 18:26:56897Durchsuche
简单事件模型和高级事件模型
简单事件模型和高级事件模型简单事件，就是事件与页面元素直观的绑定在一起的形式，如：
element.onclick = function(){alert(this.innerHTML);}
只要不是用了个别浏览器独有的事件，一般的click，mouseover事件等在各浏览器中都可以这么使用。
但是当一个事件需要绑定多个监听，或者需要动态注册/移出监听时，简单事件模型就不够用了，需要使用高级事件模型（IE和其他浏览器在使用高级事件模型时就有区别了）：
//注册
function addEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.attachEvent('on' + evtName, callback);
}
}
//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.dettachEvent('on' + evtName, callback);
}
}
标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时，会先进行onclick事件的响应，再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”：
button
但是，最好不要在href中定义具体的javascript方法，因为这个是定义跳转的链接地址的属性，如果需要先后执行两个javascript方法，应该这样写：
button
但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面，那么会发现当前网页做了一次刷新，因为以上代码中href=“#”表示跳转到当前页的顶部，但是并没有发出新的html请求。有的时候，我们并不希望页面在响应onclick事件后又跳回顶部（尤其是页面高度较长，出现滚动条，并且该链接位于页面底部时，跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时），那么应该在onclick后返回false值，阻止继续进行href定义的动作，如：
button
或者将#替换成空的javascript语句：
button
onload事件的调用顺序
有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态，最标准的做法是用方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用，这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在区域的<script>块中执行脚本，并使用了页面元素时，就很有可能出现找不到元素的错误。如果是在<body>区域的<script>块中执行脚本，只能使用该<script>块之前的页面元素，因为<body>区域的元素基本是顺序解析的。 <br><br><BR><STRONG>onchange事件 <br><br><input>元素和<select>的<option>元素都支持onchangge事件，但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以，onchange事件只能捕获用户操作时的值变化，对于使用javascript脚本动态改变元素value的情况，它是捕获不到的。 <br><br><STRONG>事件截获 <br><br>因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素： <BR>var evt = e?e:(window.event?window.event:null); <BR>var el = evt.srcElement?evt.srcElement:evt.target;<br><br>这里有一些其它相关的文章，非常值得参考下<BR><A href="http://www.jb51.net/article/22014.htm" target=_blank>JavaScript Event事件学习第一章 Event介绍 <BR><A href="http://www.jb51.net/article/22763.htm" target=_blank>javascript 跨浏览器的事件系统 </script>
简单事件模型和高级事件模型简单事件，就是事件与页面元素直观的绑定在一起的形式，如：
复制代码 代码如下:
element.onclick = function(){alert(this.innerHTML);}
只要不是用了个别浏览器独有的事件，一般的click，mouseover事件等在各浏览器中都可以这么使用。
但是当一个事件需要绑定多个监听，或者需要动态注册/移出监听时，简单事件模型就不够用了，需要使用高级事件模型（IE和其他浏览器在使用高级事件模型时就有区别了）：
复制代码 代码如下:
//注册
function addEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.attachEvent('on' + evtName, callback);
}
}
//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.dettachEvent('on' + evtName, callback);
}
}
标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时，会先进行onclick事件的响应，再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”：
button
但是，最好不要在href中定义具体的javascript方法，因为这个是定义跳转的链接地址的属性，如果需要先后执行两个javascript方法，应该这样写：
button
但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面，那么会发现当前网页做了一次刷新，因为以上代码中href=“#”表示跳转到当前页的顶部，但是并没有发出新的html请求。有的时候，我们并不希望页面在响应onclick事件后又跳回顶部（尤其是页面高度较长，出现滚动条，并且该链接位于页面底部时，跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时），那么应该在onclick后返回false值，阻止继续进行href定义的动作，如：
button
或者将#替换成空的javascript语句：
button
onload事件的调用顺序
有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态，最标准的做法是用方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用，这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在区域的<script>块中执行脚本，并使用了页面元素时，就很有可能出现找不到元素的错误。如果是在<body>区域的<script>块中执行脚本，只能使用该<script>块之前的页面元素，因为<body>区域的元素基本是顺序解析的。 <br><br><BR><STRONG>onchange事件 <br><br><input>元素和<select>的<option>元素都支持onchangge事件，但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以，onchange事件只能捕获用户操作时的值变化，对于使用javascript脚本动态改变元素value的情况，它是捕获不到的。 <br><br><STRONG>事件截获 <br><br>因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素： <BR>var evt = e?e:(window.event?window.event:null); <BR>var el = evt.srcElement?evt.srcElement:evt.target;<br><br>这里有一些其它相关的文章，非常值得参考下<BR><A href="http://www.jb51.net/article/22014.htm" target=_blank>JavaScript Event事件学习第一章 Event介绍 <BR><A href="http://www.jb51.net/article/22763.htm" target=_blank>javascript 跨浏览器的事件系统 </script>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript 链式调用实现代码(参考jquery)_jqueryNächster Artikel：jquery 轮换显示 第一小个例子_jquery
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse