web前端 javascript 兼容低版本 IE 6 7 8复合写法

1.事件对象

事件对象:当一个事件发生的时候,跟这个事件有关的一些信息,保存在一个对象中,这个对象就是事件对象(事件函数中才有事件对象)

  • IE和谷歌:是全局的event对象

  • 标准浏览器:是事件函数的第一个参数

  • 兼容:var ev = ev || event;

var box = document.getElementById('box');

box.onclick = function (ev) {
    // console.log(event); // IE和谷歌
    // console.log(ev); // 标准浏览器(IE8及以下不支持)

    var ev = ev || event; // 事件对象的兼容
    console.log(ev); // 它是一个对象,它下面就有很多的属性或方法

    console.log(ev.type); // 事件类型

    // console.log(ev.target); // 事件源(触发这个事件的对象)IE8及以下不支持
    // console.log(ev.srcElement); // 事件源 IE支持
    var target = ev.target || ev.srcElement; // 事件源兼容
    console.log(target);

    console.log(ev.clientX, ev.clientY); // 鼠标相对于可视区的距离
    console.log(ev.pageX, ev.pageY); // 鼠标到文档的距离(IE8及以下没有)

    console.log(ev.shiftKey); // 事件发生的时候,是否按下了shift键
    console.log(ev.altKey); // 事件发生的时候,是否按下了alt键
    console.log(ev.ctrlKey); // 事件发生的时候,是否按下了crtl键
}

2.事件绑定与取消

1、事件绑定

  • 元素.addEventListener(不加on的事件名, 函数, 是否捕获);

    • 第三个参数,如果为true,就是捕获,如果为false,就是冒泡

  • 元素.attachEvent(加on的事件名, 函数);

// addEventListener标准  和  attachEvent 非标准的区别:
1、标准的没有on,而非标准的有on
2、标准可以设置捕获或冒泡,而非标准的只有冒泡
3、标准的是正序执行,而非标准的是倒序执行
4、标准执行的函数中的this是触发这个事件的元素,非标准执行函数中的this是window

// -------------------------
// 封装一个方法,实现事件绑定的兼容
// console.log(box.addEventListener); 标准浏览器返回函数,而IE8及以下返回undefined

// 参数:元素 事件类型 要执行的函数
function bind(ele, event, callback) {
    if (ele.addEventListener) {
        // 标准浏览器
        ele.addEventListener(event, callback, false);
    } else {
        // 非标准浏览器
        ele.attachEvent('on' + event, callback);
    }
}

2、取消绑定

  • 元素.removeEventListener(不加on的事件名, 函数, 是否捕获);

  • 元素.detachEvent(加on的事件名, 函数);

// 封装一个方法,实现事件的取消绑定
function unbind(ele, event, callback) {
    if (ele.removeEventListener) {
        // 标准浏览器
        ele.removeEventListener(event, callback, false);
    } else {
        // 非标准浏览器
        ele.detachEvent('on' + event, callback);
    }
}

3.事件委托

  • 定义:也叫事件代理,就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

  • 事件委托原理:子级的事件,我们加给父级,当子级发生事件时,会冒泡到父级,我们可以获取到事件源,通过对事件源的判断,我们就可以执行子级的事件。

  • 事件委托的实现:

<input type="text"><button>添加</button>
<ul>
    <li>吃饭</li>
    <li class="abc">睡觉</li>
    <li>打豆豆</li>
</ul>
// 需求:点击li,给每个li添加一个背景色
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');

// 需求:给ul添加新的li
var btn = document.getElementsByTagName('button')[0];
var input = document.getElementsByTagName('input')[0];
btn.onclick = function () {
    var li = document.createElement('li');
    li.innerHTML = input.value;
    ul.appendChild(li);
}

// --------------------------------
// 普通方法,新添加的元素,没有之前的事件
// for (var i = 0; i < li.length; i++) {
//     li[i].onclick = function () {
//         this.style.backgroundColor = 'red';
//     }
// }

// ----------------------------
// 事件代理:事件加给父祖级,通过事件对象,获取到事件源,对事件源进行判断,符合要求,再做相应的处理
// 好处:
// 1、省略了循环,提高了性能
// 2、新加的元素,也有之前的事件
ul.onclick = function (ev) {
    var ev = ev || event;//事件的兼容
    var target = ev.target || ev.srcElement; // 找到事件源
    // console.log(target);
    // if (target.nodeName === 'LI') {
    //     target.style.backgroundColor = 'green';
    // }
    if (target.className === 'abc') {
        target.style.backgroundColor = 'green';
    }
}

4. 返回检测屏幕宽度(可视区域)

1  function client() {
 2    if(window.innerWidth != null)  // ie9 +  最新浏览器
 3    {
 4       return {
 5          width: window.innerWidth,
 6          height: window.innerHeight
 7       }
 8    }
 9    else if(document.compatMode === "CSS1Compat")  // 标准浏览器
10    {
11       return {
12          width: document.documentElement.clientWidth,
13          height: document.documentElement.clientHeight
14       }
15    }
16    return {   // 怪异浏览器
17       width: document.body.clientWidth,
18       height: document.body.clientHeight
19    }
20 }

5. 阻止冒泡 

 w3c的方法是event.stopPropagation()        proPagation  传播  传递

 IE则是使用event.cancelBubble = true       bubble   冒泡  泡泡      cancel 取消

 兼容的写法:

JQuery 阻止时间冒泡   event.stopPropagation();//已经兼容

evevt.preventDefault();//阻止浏览器默认行为

function stopPropagation(ev) {
    if (ev.stopPropagation) {
        // 标准浏览器
        ev.stopPropagation();
    } else {
        // IE8及以下
        ev.cancelBubble = true;
    }
}

获取你点击的事件源e.target==this作用类似event.stopPropagation();阻止冒泡

1 10  $(".box").on("click",function(e){
2     if(e.target==this){
3         alert("父盒子被点击");
4     }
5
6 });

6.获取用户选择的内容

window.getSelection()     标准浏览器

document.selection.createRange().text;      ie 获得选择的文字

兼容性的写法:

1 if(window.getSelection)
2 {
3     txt = window.getSelection().toString();   // 转换为字符串
4 }
5 else
6 {
7     txt = document.selection.createRange().text;   // ie 的写法
8 }

7. 得到css 样式  

我们想要获得css 的样式, box.style.left    box.style.backgorundColor

但是它只能得到   行内的样式。

但是我们工作最多用的是 内嵌式 或者 外链式 。

怎么办?

   核心: 我们怎么才能得到内嵌或者外链的样式呢?  

 1.   obj.currentStyle   ie  opera  常用

外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)

2 .window.getComputedStyle("元素", "伪类")     w3c

两个选项是必须的, 没有伪类 用 null 替代

3 兼容写法 :

    我们这个元素里面的属性很多, left  top  width  ===

 我们想要某个属性, 就应该 返回改属性,所有继续封装 返回当前样式的 函数。

1 1  var demo = document.getElementById("demo");
 2 2      function getStyle(obj,attr) {  //  谁的      哪个属性
 3 3          if(obj.currentStyle)  // ie 等
 4 4          {
 5 5              return obj.currentStyle[attr];
 6 6          }
 7 7          else
 8 8          {
 9 9              return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
10 10          }
11 11      }
12 12      console.log(getStyle(demo,"width"));
(0)

相关推荐