JS基本(绑定及解绑事宜,元素属性及要领,元素位置及宽高的值)

JS 绑定及解绑事宜

  • 事宜绑定的三种体式格局

    • .addEventListener('事宜范例',定名函数,布尔值)   //IE8不支撑      (this代表的是当前绑定事宜的对象)
    • .removeEventListener('事宜范例',函数名字,false)   //移除事宜
      (注重:addEventListener中的第三个参数设置为true就在捕捉过程当中实行,反之就在冒泡过程当中实行处置惩罚函数。)
    • .attachEvent('on事宜范例',定名函数)        //谷歌,火狐不支撑   this代表的是window
    • .detachEvent('on事宜范例',函数名字)       //解绑事宜  
    • 对象.on事宜名字 = 事宜处置惩罚函数--->绑定事宜
    • 对象.on事宜名字 = null
  • 事宜冒泡:多个元素嵌套,有条理关联,这些元素都注册了雷同的事宜,假如内里的元素的事宜触发了,表面的元素的该事宜自动的触发了.
  • 怎样阻挠事宜冒泡:
    window.event.cancelBubble=true; IE特有的,谷歌支撑,火狐不支撑。
    event.stopPropagation(); 阻挠事宜冒泡—->谷歌和火狐支撑
  • event对象的经常运用属性:
    var e = event || window.event  // window.event和e都是事宜参数对象,一个是IE的规范,一个是火狐的规范
    event.type            //事宜范例
    event.target           //事宜触发的元素

JS 事宜范例

  在元素的事宜处置惩罚器中:this指代的就是元素本身

  • .onclick        //点击事宜
  • .onmouseover (鼠标移入事宜) / .onmouseout(鼠标移出事宜)
  • .onfocus (输入框猎取核心) / .onblur(输入框落空核心)
  • .onkeydown  (按下键盘某个键) / .onkeyup (按下某个键弹起)

JS element元素属性

  • .innerText (谷歌,火狐,IE8都支撑) / .textContent(不支撑IE8)
  • .innerHTML(标签内容能够被辨认)
  • .setAttribute("属性的名字","属性的值")   //设置自定义属性
  • .getAttribute("属性的名字")       //猎取自定义属性的值
  • .removeAttribute("属性的名字")      //移除自定义属性
  • .style.backgroundColor          //style属性另有许多其他属性
  • .getAttributeNode('id')          //猎取的是元素的键名为‘id’的属性节点
  • .parentElement            //父级元素
  • .childNodes              //子节点
  • .children               //猎取子元素
  • .nodeType              //节点范例  1—-标签,2—属性,3—文本
  • .nodeName   
    //节点名字  标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点—-#text
  • .nodeValue               
    //节点的值  标签节点—null,属性节点—属性值,文本节点—文本内容
  • .parentNode              //父级节点  
  • .firstChild              //第一个子节点
  • .firstElementChild            //第一个子元素
  • .lastChild                //末了一个子节点
  • .lastElementChild            //末了一个子元素
  • .previousSibling             //前一个兄弟节点   
  • .previousElementSibling         //前一个兄弟元素
  • .nextSibling              //后一个兄弟节点
  • .nextElementSibling           //后一个兄弟元素 

JS element元素要领

  • .appendChild( obj1)     //追加元素
  • .insertBefore( obj1,obj2 )  //将obj1插进去到第二个参数元素obj2之前
  • .replaceChild( obj1,obj2 )  //替代个中某个元素
  • .removeChild( obj1 )     //删除个中某个元素

JS offset、scroll、client系列的值

  style标签中设置的款式属性是猎取不到的,然而在标签中设置的style属性的值时能够猎取到的。

  猎取元素的宽高,运用offset系列的值

  • offsetWidth     //猎取元素的宽,有边框
  • offsetHeight    //猎取元素的高,有边框
  • offsetLeft     //猎取元素间隔左侧位置的值
  • offsetTop     //猎取元素间隔上边位置的值
  • scrollLeft     //向左卷曲出去的间隔
  • scrollTop     //向上卷曲出去的间隔
  • scrollWidth    //元素中内容现实的宽(假如内容较少,没有内容,就是元素本身的宽),没有边框
  • scrollHeight     //元素中内容现实的高(假如内容较少,没有内容,就是元素本身的高),没有边框
  • clientWidth    //可视地区的宽(没有边框),边框内部的宽
  • clientHeight    //可视地区的高(没有边框),边框内部的高
  • clientLeft     //左侧框宽度
  • clientTop     //上边框宽度
  • event.clientXevent.clientY   //鼠标相对于浏览器窗口可视地区的X,Y坐标(窗口坐标),可视地区不包括工具栏和滚动条
  • event.pageXevent.pageY   //类似于event.clientX、event.clientY,但它们运用的是文档坐标而非窗口坐标(IE8不可用)
    原文作者:attacki
    原文地址: https://segmentfault.com/a/1190000018064911
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞