让前端飞

浏览器window对象及事件

2018-12-17  本文已影响1人  蓝枫

浏览器window对象


location对象

window.location === document.location (true)

解析URL

  1. location的href属性是一个字符串,包含URL完整文本
  2. protocol,host,hostname,port,path name,search表示url的各个部分
  3. 重点 hashsearch 属性
    1. hash返回“片段标识符”即#之后的内容
    2. search返回?之后的url

载入新文档

  1. assgin() 使窗口载入并显示指定URL中的文档,保留浏览历史;
  2. replace()与assign类似但是不保留浏览历史,ex:如果不支持ajax就location.replace()到另外一个文档
  3. reload()重新加载当前文档
    location = "baidu.com"; // 跳转外链
    location = "page1.html"; // 跳转到下一个页面
    location = "#top"; // 跳转到锚点,top表示跳转到文档顶部
    location.search = "?page=" + ()pagenum + 1); // 新页面
    

Screen对象

提供有关窗口显示大小和可用颜色数量的信息

  1. 属性 width和height指的是以像素为单位的窗口大小。
  2. availWidth和alailHeight指的是实际可用显示大小,除却dock栏。

事件

冒泡和捕获

  1. 一般是在冒泡中为节点添加事件;

事件处理

  1. html级: <div onclick="alert(event.type)">

  2. dom0级:每个元素都有自己的事件处理属性;

    var btn = document.getElementById('myBtn');
    btn.onclick = function(){
    alert(this.id) // "myBtn" this指向当前元素 冒泡阶段被处理
    }
    btn.onclick = null; // 删除事件处理程序
    
  3. dom2级: addEventListener 和 removeEventListener

     var btn = document.getElementById("myBtn");
     btn.addEventListener("click", function(){
         alert(this.id);
     }, false)
     btn.addEventListener("click", function(){
         alert("Hello World!");
     }, false)
     // 最后一个参数true表示在捕获阶段触发,false表示在冒泡阶段触发
     // 通过 addEventListenr 添加的事件必须通过 removeEventListener 删除 在删除的时候 function必须是具名函数才能够删除,否则是无效的
     var handler = function(){};
     addEventListner("click", handler, false);
     removeEventListner("click", handler, false);
    

    tip:event.stopPropagation()可以阻止事件冒泡,就只事件对象本体触发

  4. IE 呵呵


事件对象

UI

焦点 blur focus

鼠标滚轮事件

click,dbclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

tip:clientX和clientY相对于视口位置,pageX和pageY相对于文档的位置。页面不滚动的情况下,二者相等;screenX和screenY相对于屏幕的位置

鼠标按钮事件

button属性0,1,2,3,4,5,6,7

contextmenu上下文菜单,鼠标右键

window.onload = function() {
var div = document.getElementById("myDiv");
div.addEventListener("contextmenu", function(event){
    event.preventDefault();
})
}   

性能优化

为元素添加大量的事件处理程序会占用过高的内存,影响整体性能;处理这种情况:

事件委托

利用事件冒泡,指定一个事件处理程序管理某一类型的所有事件,尽量向最高层级中添加事件处理程序。例如

ul li li li 
ul.onlick = function() {
    switch (target) {
    case li1:
    case li2:
    case li3:
}}

移除事件处理程序

li.onclick = null/removeEvent

模拟事件

!!!

DOM操作

上一篇 下一篇

猜你喜欢

热点阅读