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键 } 1、事件绑定
// 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、取消绑定
// 封装一个方法,实现事件的取消绑定 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"));
|
|