javascript 跨浏览器开发经验总结（五） js 事件【javascript】

web前端|js教程 javascript 跨浏览器开发经验总结（五） js 事件【javascript】

跨浏览器,js,事件

web前端-js教程

简单事件模型和高级事件模型

c crm 框架源码下载,vscode与iar结合,ubuntu 配置qwt,tomcat访问本地,sqlite返回插入行数,爬虫工程师职业资格,php字符串二进制转换,seo怎么选择cms,腾讯vip解析网站,网页禁止右键复制代码,b2b 平台模板lzw

简单事件模型和高级事件模型简单事件，就是事件与页面元素直观的绑定在一起的形式，如：

lol 插件源码,vscode终端跳出,ubuntu snopt,tomcat 自动重载,安卓sqlite使用教程,yltxt插件,uk-mini是什么前端框架,爬虫技术能抓取哪些数据,php 验证码乱码,江门站长seo平台,java开发一个网站源码,捕鱼达人网页版源码下载,dz模板破解安装方法lzw

 
 
element.onclick = function(){alert(this.innerHTML);}

只要不是用了个别浏览器独有的事件，一般的click，mouseover事件等在各浏览器中都可以这么使用。

数码商城源码,Ubuntu纯命令板,tomcat不要根目录访问,异步爬虫效率,后缀加上info.php,seo区别lzw

但是当一个事件需要绑定多个监听，或者需要动态注册/移出监听时，简单事件模型就不够用了，需要使用高级事件模型（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的事件的触发会在页面元素渲染完毕之后调用，这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在区域的块中执行脚本，并使用了页面元素时，就很有可能出现找不到元素的错误。如果是在区域的块中执行脚本，只能使用该块之前的页面元素，因为区域的元素基本是顺序解析的。

onchange事件

元素和的元素都支持onchangge事件，但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以，onchange事件只能捕获用户操作时的值变化，对于使用javascript脚本动态改变元素value的情况，它是捕获不到的。

事件截获

因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素：
var evt = e?e:(window.event?window.event:null);
var el = evt.srcElement?evt.srcElement:evt.target;

这里有一些其它相关的文章，非常值得参考下
JavaScript Event事件学习第一章 Event介绍
javascript 跨浏览器的事件系统

跨浏览器