} else{
document.getElementById(’element’).textContent = "my text";
}
四、事件处理
如果在使用javascript的时候涉及到event处理 ， 就需要知道event在不同的浏览器中的差异 ， 主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once》） ， 它们分别是NN4、IE4 和W3C/Safar 。
1. window.event
【分析说明】先看一段代码
复制代码 代码如下:
function et()
{
alert(event);//IE: [object]
}
以上代码在IE运行的结果是[object] ， 而在Firefox无法运行 。
因为在IE中event作为window对象的一个属性可以直接使用 ， 但是在Firefox中却使用了W3C的模型 ， 它是通过传参的方法来传播事件的 ， 也就是说你需要为你的函数提供一个事件响应的接口 。
【兼容处理】添加对event判断 ， 根据浏览器的不同来得到正确的event：
复制代码 代码如下:
function et()
{
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}
2. 键盘值的取得
【分析说明】IE和Firefox获取键盘值的方法不同 ， 可以理解 ， Firefox下的event.which与IE下的event.keyCode相当 。关于彼此不同 ， 可参考《键盘事件中keyCode、which和charCode 的兼容性测试》
【兼容处理】
复制代码 代码如下:
function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey //同时按下了Ctrl和回车键
//do something;
}
}
3. 事件源的获取
【分析说明】在使用事件委托的时候 ， 通过事件源获取来判断事件到底来自哪个元素 ， 但是 ， 在IE下 ， event对象有srcElement属性 ， 但是没有target属性；Firefox下 ， even对象有target属性 ， 但是没有srcElement属性 。
【兼容处理】
复制代码 代码如下:
ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
4. 事件监听
【分析说明】在事件监听处理方面 ， IE提供了attachEvent和detachEvent两个接口 ， 而Firefox提供的是addEventListener和removeEventListener 。
【兼容处理】最简单的兼容性处理就是封装这两套接口：
复制代码 代码如下:
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on"eventName, function(){
handler.call(elem)});
//此处使用回调函数call() ， 让this指向elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem, eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on"eventName, function(){
handler.call(elem)});
//此处使用回调函数call() ， 让this指向elem
} else if (elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false);
}
}
需要特别注意 ， Firefox下 ， 事件处理函数中的this指向被监听元素本身 ， 而在IE下则不然,可使用回调函数call ， 让当前上下文指向监听的元素 。
5. 鼠标位置
【分析说明】IE下 ， even对象有x ， y属性 ， 但是没有pageX ， pageY属性；Firefox下 ， even对象有pageX ， pageY属性 ， 但是没有x ， y属性 。
【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX 。复杂点还要考虑绝对位置
复制代码 代码如下:
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x= e.offsetLeft;
y= e.offsetTop;
}
alert("x:"x",""y:"y);
}
推荐阅读
- 沈银灯为什么要杀司藤
- 拼多多无门槛券退货会退回吗
- 稻壳模板怎么免费去水印
- 小米电量多少充电合适
- 84消毒液和洗洁精一起有毒吗
- 拼多多拒收会自动退款吗
- 奥迪车雨伞放在什么位置
- 方舟恶魔岛在哪里
- C168静音模式和非静音模式的快速转换
- 抖音怎么设置自动播放