js常用的事件

基础方法----------------------
substr(‘起点位置’,截取几个);
split('=')等号分割字符串
点击事件-----------------------------
onfocus 获得点击焦点时间,当文本被获取时就触发
onblur 失去焦点时触发
mousemove   鼠标移动时触发
mouseover 鼠标滑过事件
mousedown事件仅需要按键被按下,而不需要松开即可发生。
mouseup 鼠标松开事件
scroll滚动事件
contextmenu 点击右键触发,selectstart鼠标选择文字触发,搭配e.preventDefault();可禁止菜单
例子:document.addEventDefault('contextmenu',function(e){
e.preventDefault()
})
鼠标事件--------------------------------------
e.clientX   相对于浏览器窗口可视化的x坐标
e.clientY   相对于浏览器窗口可视化的y坐标
e.pageX     相对于文档页面的x坐标
e.pageY     相对于文档页面的y坐标
属性.pageYOffset 获取整个页面被卷曲的部分
e.screenX    相对于屏幕的x坐标
e.screenY    相对于屏幕的y坐标
键盘事件----------------------------
onkeyup   点击松开触发
onkeydown     按下立即触发
onkeypress    按下立即触发,但是不识别功能键,Ctrl,shift
e.keyCode    获得按键的ASCII值

自定义属性.................................................
自定义属性获取的方法    属性.getAttribute('属性')
设置自定义属性  属性.setAttribute("自定义属性的名字","值")
移除自定义属性   属性.removeAttribute('自定义属性的名字')
获取自定义属性  属性.getAttribute(''属性名字)
h5新加的获取自定义属性   属性.dataset.属性名字    

节点篇...............................................................
获取父节点,获取最近的父节点   属性.parentNode
获取子节点,  不推荐 获取所有节点,文本节点,元素节点等,属性.childNodes
获取子元素子节点 (非标准)   属性.children
获取第一个元素子元素子节点 (非标准)   属性.children[0]                               (推荐)
获取最后一个元素子节点(非标准)属性.children【属性.length -1】                        (推荐)
获取第一个元素子节点  属性.firstElementChild
获取最后一个元素子节点  属性.lastElementChild
获取下一个兄弟节点  属性.nexSibling
获取上一个兄弟节点 属性.previouSibling
获取下一个兄弟元素节点   属性.nextElementSibling
获取上一个兄弟元素节点   属性.previouElementSibling
创建节点.....................................................
创建节点doucument.createElement('元素名字,类似li,ul,p,h1等')
末尾插入节点   你要插入哪个元素的名字.appendChile( 自定义那个节点的名字 )
指定位置插入节点     你要插入哪个元素的名字.insertBefore( 节点名字,也就是你
赋值给哪个变量的名字   ,     属性.children[0]  ) 
删除节点....................................................
删除指定节点    属性.removeChild(  需要删除的名字)
删除第一个节点    属性.removeChild( 属性.children[0] )
克隆节点-------------------------------------------   
 属性.cloneNode(false) 浅拷贝只是复制元素,不复制内容,括号内设置为TRUE则相反,就是深拷贝


注册事件-------------------------
属性.addEventListener( 'click' , function(){
})
移除事件
属性.removeEventListener( 'clicl' ,函数名)

事件对象属性----------------------------
e.target  返回点击者
e.type  返回事件类型
e.cancelBubble    该属性阻止冒泡
e.returnValue   该属性阻止默认行为,例如a标签的跳转   (非标)
e.stopPropagation()   阻止冒泡 标准
e.preventDefault();禁止行为

事件委托-----------------------------------
就是在父节点上面添加事件,点击子节点也会触发事件


BOM------------------------------
事件----------------------
搭配addEventListener()使用
DOMContentLoaded事件是无视图片,优先加载js,避免图片过多的时候加载js变慢,可以理解到为加了一个优先级
resize     页面尺寸改变时触发
location获取URL
location.href   获取整个URL
location.host  获取域名
location.port   获取端口号
location.pathname   返回路径
location.search   返回参数
navigator 对象检查浏览器是移动还是pc,然后跳到相应的网站


方法--------------------
一次性定时器,到那么多秒就执行window.setTimeout(函数,1000)
清除定时器   window.clearTimeout(定时器的名字)

重复定时器    setInterval(函数,1000)
清除定时器    clearInterval(定时器名字)

location.assign()    重定向页面跳转
location.replace()   替换当前页面,不可以后退
location.reload()    重新加载页面
history.go(1)前进   ,-1后退
查询--------------------------
window.innerWidth  当前屏幕宽度,搭配resize事件使用
offset只能读,style可读写
offset包含边框
属性.offsetParent   返回有定位的父级元素,没有就body
属性.offsetTop    返回有相对定位的父级元素上方的偏移量
属性.offsetLeft    返回有相对定位的父级元素左方的偏移量
属性.offsetWidth    返回自身包括padding和边框的宽度,无单位
属性.offsetHeight    返回自身包括padding和边框的高度,无单位
client不包含边框
属性.clientTop     返回上边框大小
属性.clientLeft     返回左边框大小
属性.clientWidth      返回自身包括padding,宽度但是不包括边框数值不带单位
属性.clientHeight      返回自身包括padding,但是不包括边框数值不带单位
滚动条scroll
属性.scrollTop     被卷上去的上侧距离,不带单位
属性.scrollLeft    左侧距离,不带单位
属性.scrollWidth     返回内容的宽度,不包边框,没有单位
属性.scrollHeight     返回内容的高度,不包边框,没有单位
整个页面被卷曲的部分用window.pagYoffset


本地存储-------------------------------------
sessionStorage,localStorage的方法一样替换名字就行
存储数据sessionStorage.setltem('自定义的名字',数据)
获取数据sessionStorage.getlem('自定义的名字')
删除数据sessionStorage.removeItem('自定义名字')
删除所有数据sessionStorage.clear()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值