js BOM &&事件

weixin_30882895

于 2019-07-09 18:51:00 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/didamehulayou/p/11159345.html

版权

复习

表格: table.tHead.rows[0].cells table.tBodies[0].rows[0].cells table.tFoot.rows[0].cells
表单 form.username form.password form.sex [radio,radio] input : onfocus onblur focus() blur()
form: onsubmit onreset submit() reset()
元素尺寸位置 client: clientWidth 宽度+左右padding clientHeight 高度+上下padding document.documentElement.clientWidth 可视区宽度 document.documentElement.clientHeight 可视区高度 clientTop 上边框 clientLeft 左边框

offset: offsetWidth 宽度+左右padding+左右边框 offsetHeight 高度+上下padding+上下边框 offsetTop 相对定位父级顶部的位移 offsetLeft 相对定位父级左边的位移

scroll: scrollWidth 元素中内容的实际宽度 scrollHeight 元素中内容的实际高度 scrollTop 滚动元素顶部卷去的高度 scrollLeft 滚动元素左边部卷去的宽度
```
  window.onscroll = function(){
      var st = document.documentElement.scrollTop||document.body.scorllTop;
  }
```
- 图片懒加载
  - 把图片路径暂存在自定义属性
  - 页面滚动时,检测图片的位置,当图片刚好露出,就把图片路径设置src属性上
getAttribute();

setAtrribute();

(一) BOM browser object model

window对象 : 窗口对象 , 全局对象
全局变量相当于window属性,全局声明的函数相当于window的方法

操作窗口

open(url,target,窗口特性) 打开窗口

    mywin =   open('1-京东搜索栏.html','_blank','width=500,height=400');

close() 关闭窗口

    mywin.close()  //关闭指定窗口
    close()  //关闭当前窗口

resizeTo(x-number,y-number); 改变窗口尺寸
```
    mywin.resizeTo(1000,600); 
```

moveTo(x-number,y-number); 改变窗口位置

    mywin.moveTo(200,300);  200距离父级窗口左边位移 ,300距离父级窗口上边缘位移

window尺寸

        window.innerWidth   可视区宽度(不包含开发者工具)
        window.innerHeight   可视区高度(不包含地址栏和选项卡)
        window.outerWidth   可视区宽度(包含开发者工具)
        window.outerHeight   可视区高度(包含地址栏和选项卡)

location对象
```
        http://www.ujiuye.com/user/login.html?username=aaa&pass=123#a
```
- location.protocol 协议 'http:'
- location.host 主机和端口 '127.0.0.1:5500'
- location.hostname 主机名 '127.0.0.1'
- location.port 端口号 '5500'
- location.pathname 文件夹及文件名
- location.search 查询字符串
- location.hash 哈希值
- location.href 获取或者设置整个url
navigator对象
- navigator.appCodeName 浏览器代号
- navigator.appName 浏览器名称
- navigator.appVersion 浏览器版本
- navigator.cookieEnabled 是否启用cookie
- navigator.userAgent 用户代理
```
    navigator.userAgent.indexOf('MSIE') > -1    检测低版ie
    navigator.userAgent.indexOf('Molie') > -1   检测移动端
```
  - navigator.systemLanguage 用户代理语言
history 历史
- history.go() 1 向前一步, 2 向前两步 ,-1 后退一步, -2 后退两步
- history.forward() 向前一步
- history.back() 后退一步

(三) 事件

-1- 事件流 : 捕获 -- 确认目标 -- 冒泡

- 捕获:  事件从最顶层元素一级一级向下传递, 默认情况捕获阶段不会触发事件
- 确认目标: 找到层级最深的元素,确认目标元素,触发事件
- 冒泡: 从目标元素开始一级一级向上传递,直到window,传递的同时会依次触发当前元素的事件(默认情况在冒泡阶段触发)

-2-绑定事件的方法

1)-DOM0级事件

ele.事件属性 = 事件处理函数

   <div onclick = "alert()"></div>
   
   box.onclick = function(){
       console.log(111);
   } 
   box.onclick = function(){
       console.log(222);
   }

DOM0级事件多次绑定同一个事件,后面会覆盖前面的

2)-DOM2级事件

addEventListener(事件类型,事件处理函数,是否在捕获阶段触发);

    - 事件类型 : 'click','mouseover','mouseout','scroll'....
    - 事件处理函数: DOM2级可以绑定多个事件处理函数,按照绑定的顺序执行
    - 是否在捕获阶段触发: 默认值false,true事件在捕获阶段触发
    - 事件处理函数中的this执行触发事件的元素

```
    span.addEventListener('click',function(){
            console.log('span被点击222');
            this.style.backgroundColor = "pink";
        })
    span.addEventListener('click',function(){
            console.log('span被点击');
        })
    li.addEventListener('click',function(){
            console.log('li被点击');
        },true)    
    
    ```

ie事件监听 ele.attachEvent('on'+事件类型,事件处理函数)

 ```
        span.attachEvent('onclick',function(){
        console.log('111');
            console.log(this); // 这里的this不是指向span,而是window
        }) 
```

3- 事件移除

removeEventListener(事件类型,事件处理函数)

```
        span.addEventListener('click',fn1);
        span.addEventListener('click',fn2);

        document.getElementsByTagName('button')[0].onclick = function(){
          span.removeEventListener('click',fn1);//移除span点击事件的fn1
        }
        //fn2会继续执行

```

ie浏览器移除事件 detachEvent('on'+事件类型,事件处理函数)

    ```
        span.detachEvent('onclick',fn1);  ie移除事件的方法
    
    ```

fn.call(obj); fn执行,执行时把里面的this指向改为obj

4-事件对象

触发事件时,浏览器会记录本次事件相关的信息,把这些信息的集合称之为事件对象
获取事件对象

      ele.事件属性 = function(event){
          //标准浏览器调用事件处理函数会自动传入事件对象
          //ie低版本把时间对象存在window的event属性下
          event  = event || window.event; //事件对象的兼容写法
    }

事件类型event.type : 'click','mouseover','mouseout'...
事件源 :触发事件的层级最深的那个元素
- 兼容写法 var target = event.target || event.srcElement;
鼠标坐标:
- event.clientX 鼠标相对可视窗口水平坐标
- event.clientY 鼠标相对可视窗口垂直坐标
- event.pageX 鼠标相对页面水平坐标
- event.pageY 鼠标相对页面垂直坐标

5- 阻止事件冒泡

标准 event.stopPropagation()

ie event.cancelBubble = true

```
    兼容写法:
    event.stopPropagation ?  event.stopPropagation() : event.cancelBubble = true;
```

6- 阻止事件默认行为

标准 event.preventDefault()

ie event.returnValue = false;

```
兼容写法:
 event.preventDefault ? event.preventDefault() : event.returnValue = false;
```

return false; 可以用来阻止事件默认行为,但是必须放在事件处理函数最后

7- 键盘事件

onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress 键盘按下,效果和onkeydown一样,系统键无法触发该事件比如,esc,delete,insert...
键盘事件通过 event.keyCode(键码)判断具体的按键
特殊键的状态 event.ctrlKey event.altKey event.shiftKey 用true和false表示是否按下

8- 滚轮事件

谷歌,ie ele.onmousewheel = function(){}

火狐 ele.addEventListener('DOMMouseScroll',function(){})

    兼容:
    function mouseWeelEvent(ele,fn){
        ele.onmousewheel = fn;
        ele.addEventListener('DOMMouseScroll',fn)
    }

判断滚轮滚动方向

    mouseWeelEvent(box,function(event){
        event = event || window.event;
        console.log(event.wheelDelta);//谷歌和ie判断方向  >=120向上  <=-120向下
        console.log(event.detail); //火狐浏览器判断方向  <=-3向上  >=3 向下
        //console.log('滚轮事件');
         //判断方向兼容写法
       
        var de = 1; // de标记方向 1表示向上,0表示向下
        if(event.wheelDelta){
            de = event.wheelDelta >= 120 ? 1 : 0;
        }else{
            de = event.detail >=3 ? 0 : 1;
        }    
    });

9-事件委托

利用事件冒泡机制,把事件绑定给祖先元素,事件发生时根据事件源的具体信息判断要做的操作

当需要给很多元素绑定相同的事件,或者是要绑定事件的元素个数不确定时,可以使用事件委托

系统弹窗
- alert(''); //警告提示框
- confirm(''); // 确认提示框 , 返回值 true/false
- prompt('请输入修改后的内容'); //输入提示框 , 返回输入的内容

转载于:https://www.cnblogs.com/didamehulayou/p/11159345.html

weixin_30882895

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js BOM &&事件

复习表格: table.tHead.rows[0].cells table.tBodies[0].rows[0].cells table.tFoot.rows[0].cells表单 form.username form.password form.sex [radio,radio] input : onfocus onblur focus() blur()form: ons...
复制链接

扫一扫