javascript中BOM基础知识总结(2)

function client() { return { clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0; clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0; }; }

5.事件参数e

当事件发生的时候,系统会自动的给事件处理函数传递一个参数,会提供事件相关的一些数据,事件参数e浏览器的兼容性检测: e = e || window.event

e.pageX和e.pageY

获取鼠标在页面中的位置(IE8中不支持pageX和pageY,支持window.event获取参数事件)        pageX = clientX + 页面滚动出去的距离

6.获得计算后样式的方法

w3c标准        window.get ComputedStyle(element, null)[属性]IE浏览器        element.currentStyle[属性]封装浏览器兼容性函数 

function getStyle(element, attr) { if(window.getComputedStyle) { return window.getComputedStyle(element, null)[attr]; } else { return element.currentStyle[attr]; } }

7.事件补充

注册事件

注册事件的性能问题

移除事件

事件冒泡

事件捕获  事件的三个阶段

事件对象的常见属性

DOM笔记里有提到注册事件和移除事件,这里着重讲事件对象,事件对象的常见属性

7.1 target 和currentTarget

target        始终是点击的元素(IE8及之前是srcElement)

currentTarget        执行事件处理函数的元素

this        始终和currentTarget一样

7.2 事件冒泡

用addEventListener注册事件的时候,第三个参数是false,即是冒泡。

冒泡的好处 - 事件委托

从一个例子中说明

<body> <ul> <li>我是第1个li标签</li> <li>我是第2个li标签</li> <li>我是第3个li标签</li> <li>我是第4个li标签</li> </ul> <input type="button" value="insertLi"> <script> var ul = document.getElementById("ul"); var btn = document.getElementById("btn"); //把本来应该给li注册的事件,委托给ul,只需要给一个元素注册事件 //动态创建的li,也会执行预期的效果 ul.addEventListener("click", test, false); //注册点击事件 btn.onclick = function () { //点击同样会有alert var li = document.createElement("li"); li.innerHTML = "我是新插入的li标签"; ul.appendChild(li); }; //函数写在注册事件代码之外,提高性能 function test(e) { alert(e.target.innerText); } </script> </body>

当事件冒泡影响到了其他功能的实现时,需要阻止冒泡    

e.stopPropagation( )        IE8及之前:   event.cancleBubble = true;

阻止默认行为的执行

e.preventDefault()        IE8及之前:  event.returnValue = false;

看一下阻止跳转到百度的例子:

<body> <a href="https://www.baidu.com">百度</a> <script> var link = document.getElementById("link"); link.addEventListener("click", fn, false); function fn(e) { e.preventDefault(); //若用return false; 不起作用,若用link.onclick = function();return false可以阻止 } </script> </body>

7.3 鼠标事件的参数

e.type        事件的类型,如click,mouseover

事件的3个阶段        1 捕获阶段 2 目标阶段 3 冒泡阶段

e.eventPhase        事件阶段

shiftKey/ctrlKey/altKey        按下鼠标同时按下组合键

button        获取鼠标的按键

e.clientX和e.clientY        获取鼠标在可视区域的位置

还有7.2中的取消事件冒泡和阻止默认行为的执行

8.正则表达式

定义:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwgzgp.html