JS基础（绑定及解绑事件，元素属性及方法，元素位置及宽高的值）

Enlightenment 发布于2019-08-26 13:30 / 883人阅读

摘要：绑定及解绑事件事件绑定的三种方式事件类型，命名函数，布尔值不支持代表的是当前绑定事件的对象事件类型，函数名字，移除事件注意中的第三个参数设置为就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

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.clientX、event.clientY　　 //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条

event.pageX、event.pageY　　 //类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标（IE8不可用）

GPU云服务器云服务器 js获取元素位置 js修改元素属性 js取元素相对位置 js中获取元素位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108961.html

前端基础入门六(JQuery进阶)

摘要：获取元素距离的位置返回值为对象获取相对于其最近的有定位的父元素的位置。不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。注册简单事件表示给绑定事件，并且由自己触发，不支持动态绑定。 jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $(#name).val(张三); //获取值 $(#name)...

fnngj 2019-08-23 14:53 评论0 收藏0
常见的原生javascript DOM操作

摘要：注意可能因为元素换行的原因返回的是节点。该规范对于使用和接口的对象都增了两种新方法返回节点子树内与之相匹配的第一个节点。指定的元素的子树会被搜索，包括元素自己。第一个参数是事件名，第二个是回调函数，第三个参数为表示捕获，表示冒泡。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com...

KevinYan 2019-08-19 17:09 评论0 收藏0
面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

王晗 2019-08-30 14:15 评论0 收藏0
面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

CrazyCodes 2019-08-22 15:46 评论0 收藏0