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: 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表示是否按下

原文地址:https://www.cnblogs.com/didamehulayou/p/11159345.html

时间: 2024-11-13 18:16:02

js BOM &&事件的相关文章

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码代码如下: <a href="http://www.baidu.com" target="_bl

Js 冒泡事件阻止

原文:Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:$(document).ready(function

用js onselectstart事件鼠标禁止选中文字

IE&&Chrome中适用此方法 document.onselectstart=function(){return false;} onselectstart是防止内容被选中默认状态是true <body onselectstart=return(event.srcElement.type=='text')> 选不中 <input type="text" name="" value="来选吧"> </

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事

原生js阻止事件冒泡代码实例

原生js阻止事件冒泡代码实例:关于什么是事件冒泡这里就不多介绍了,可以参阅javascript事件冒泡简单介绍一章节,任何现象都是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便,下面就通过带来实例介绍一下如何阻止事件冒泡现象.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conte

JS BOM简列

JS BOM BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准.所以,BOM 本身是没有标准的或者还没有哪个组织去标准它. window对象BOM 的核心对象是window,它表示浏览器的一个实例.window 对象处于JavaScript 结构的最顶层,对于每个打开的窗口,系统都会自动为其定义window 对象. Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame