JS基础-DOM

            DOM

            • DOM 事件的级别
            • DOM 事件模型
            • DOM 事件流
            • DOM 事件捕获的具体流程
            • Event 对象的常见应用
            • 自定义事件

            DOM概述 | MDN

            DOM | MDN

            DOM操作

            DOM事件级别

            • DOM0
              • onXXX类型的定义事件
              • element.onclick = function(e) { ... }
            • DOM2
              • addEventListener方式
              • element.addEventListener(‘click‘, function (e) { ... })
              • btn.removeEventListener(‘click‘, func, false)
              • btn.attachEvent("onclick", func);
              • btn.detachEvent("onclick", func);
            • DOM3
              • 增加了很多事件类型
              • element.addEventListener(‘keyup‘, function (e) { ... })
              • eventUtil 是自定义对象,textInput 是 DOM3 级事件

            DOM 事件模型

            捕获从上到下, 冒泡从下到上。
            先捕获,再到目标,再冒泡
            分享图片

            DOM事件流

            DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象,从window对象开始,也在window对象结束。

            DOM标准规定事件流包括三个阶段:

            • 事件捕获阶段
            • 处于目标阶段
            • 事件冒泡阶段

            描述DOM事件捕获的具体流程

            从window -> document -> html -> body -> ... -> 目标元素

            Event对象常见应用

            • event.target
              • 触发事件的元素
            • event.currentTarget
              • 绑定事件的元素
            • event.preventDefault()
              • 阻止默认行为
              • event.cancelBubble()和event.preventBubble 都已经废弃
            • event.stopPropagation()
              • 阻止在捕获阶段或冒泡阶段继续传播,而不是阻止冒泡
            • event.stopImmediatePropagation()
              • 阻止事件冒泡并且阻止相同事件的其他侦听器被调用。

            事件的代理/委托

            事件委托是指将事件绑定目标元素的到父元素上,利用冒泡机制触发该事件

            优点:

            • 可以减少事件注册,节省大量内存占用
            • 可以将事件应用于动态添加的子元素上

            但使用不当会造成事件在不应该触发时触发

            ulEl.addEventListener('click', function(e){
              var target = event.target || event.srcElement;
              if(target && target.nodeName.toUpperCase() === "LI"){
                console.log(target.innerHTML);
              }
            }, false);

            自定义事件

            • Event
            • CustomEvent

            CustomEvent不仅可以用来做自定义事件,还可以在后面跟一个object做参数

            var evt = new Event('myEvent');
            
            someDom.addEventListener('myEvent', function() {
              //处理这个自定义事件
            });
            
            someDom.dispatchEvent(evt);

            IE 与火狐的事件机制有什么区别? 如何阻止冒泡?

            IE 只事件冒泡,不支持事件捕获;火狐同时支持件冒泡和事件捕获。

            阻止冒泡:

            • 取消默认操作
              • w3c 的方法是 e.preventDefault()
              • IE 则是使用 e.returnValue = false;
            • return false
              • javascript 的 return false 只会阻止默认行为
              • 是用 jQuery 的话则既阻止默认行为又防止对象冒泡。
            • 阻止冒泡
              • w3c 的方法是 e.stopPropagation()
              • IE 则是使用 e.cancelBubble = true
            [js] view plaincopy
            function stopHandler(event)
              window.event 
              ? window.event.cancelBubble = true 
              : event.stopPropagation();
            }

            DOM 元素的 dom.getAttribute(propName)和 dom.propName 有什么区别和联系

            • dom.getAttribute(),是标准 DOM 操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性
            • dom.propName 通常是在 HTML 文档中访问特定元素的特性,浏览器解析元素后生成对应对象(如 a 标签生成 HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,只能使用 getAttribute 进行访问
            • dom.getAttribute()返回值是源文件中设置的值,类型是字符串或者 null(有的实现返回"")
            • dom.propName 返回值可能是字符串、布尔值、对象、undefined 等
            • 大部分 attribute 与 property 是一一对应关系,修改其中一个会影响另一个,如 id,title 等属性
            • 一些布尔属性<input hidden/>的检测设置需要 hasAttribute 和 removeAttribute 来完成,或者设置对应 property
            • <a href="../index.html">link</a>中 href 属性,转换成 property 的时候需要通过转换得到完整 URL
            • 一些 attribute 和 property 不是一一对应如:form 控件中<input value="hello"/>对应的是 defaultValue,修改或设置 value property 修改的是控件当前值,setAttribute 修改 value 属性不会改变 value property

            JS获取dom的CSS样式

            function getStyle(obj, attr){
              if(obj.currentStyle){
                return obj.currentStyle[attr];
              } else {
                return window.getComputedStyle(obj, false)[attr];
              }
            }

            JS实现鼠标拖拽

            DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?

            创建新节点

            • createDocumentFragment() //创建一个 DOM 片段
            • createElement() //创建一个具体的元素
            • createTextNode() //创建一个文本节点

            添加、移除、替换、插入

            • appendChild()
            • removeChild()
            • replaceChild()
            • insertBefore() //在已有的子节点前插入一个新的子节点

            查找

            • getElementsByTagName() //通过标签名称
            • getElementsByName() // 通过元素的 Name 属性的值(IE 容错能力较强,会得到一个数组,其中包括 id 等于 name 值的)
            • getElementById() //通过元素 Id,唯一性

            documen.write 和 innerHTML 的区别

            • document.write 只能重绘整个页面
            • innerHTML 可以重绘页面的一部分

            Window 对象 与 document对象

            window

            • Window 对象表示当前浏览器的窗口,是 JavaScript 的顶级对象。
            • 我们创建的所有对象、函数、变量都是 Window 对象的成员。
            • Window 对象的方法和属性是在全局范围内有效的。

            document

            • Document 对象是 HTML 文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)
            • Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
            • Document 对象是 Window 对象的一部分,即 window.document

            区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”

            • 客户区坐标
              • 鼠标指针在可视区中的水平坐标(clientX)和垂直坐标(clientY)
            • 页面坐标
              • 鼠标指针在页面布局中的水平坐标(pageX)和垂直坐标
            • 屏幕坐标
              • 设备物理屏幕的水平坐标(screenX)和垂直坐标(screenY)

            focus/blur与focusin/focusout的区别与联系

            1. focus/blur不冒泡,focusin/focusout冒泡
            2. focus/blur兼容性好,focusin/focusout在除FireFox外的浏览器下都保持良好兼容性,如需使用事件托管,可考虑在FireFox下使用事件捕获elem.addEventListener(‘focus‘, handler, true)

            mouseover/mouseout与mouseenter/mouseleave的区别与联系

            1. mouseover/mouseout是标准事件,所有浏览器都支持;mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳,现代标准浏览器也支持
            2. mouseover/mouseout是冒泡事件;mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时,推荐mouseover/mouseout托管,提高性能
            3. 标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素;在老IE中event.srcElement表示发生移入/出的元素,event.toElement表示移出的目标元素,event.fromElement表示移入时的来源元素

            IE 的事件处理和 W3C 的事件处理有哪些区别?

            绑定事件

            • W3C: targetEl.addEventListener(‘click‘, handler, false);
            • IE: targetEl.attachEvent(‘onclick‘, handler);

            删除事件

            • W3C: targetEl.removeEventListener(‘click‘, handler, false);
            • IE: targetEl.detachEvent(event, handler);

            事件对象

            • W3C: var e = arguments.callee.caller.arguments[0]
            • IE: window.event

            事件目标

            • W3C: e.target
            • IE: window.event.srcElement

            阻止事件默认行为

            • W3C: e.preventDefault()
            • IE: window.event.returnValue = false‘

            阻止事件传播

            • W3C: e.stopPropagation()
            • IE: window.event.cancelBubble = true
            相关文章
            相关标签/搜索
            管家婆精选心水资料中特网 墨脱县| 扎兰屯市| 桐乡市| 涿州市| 师宗县| 靖西县| 鸡东县| 虞城县| 桑日县| 抚宁县| 阿拉善右旗| 山阴县| 华亭县| 长治县| 句容市| 修文县| 石楼县| 邵武市| 新河县| 赤峰市| 余干县| 永寿县| 平陆县| 顺平县| 荥经县| 长沙县| 于都县| 噶尔县| 荔浦县| 扶风县| 奇台县| 建阳市| 布拖县| 静宁县| 梅州市| 鲜城| 金阳县| 巨野县| 泰安市| 高安市| 宣城市| 梓潼县| 蚌埠市| 乐至县| 富平县| 吉林省| 黎川县| 贵州省| 荃湾区| 彰化县| 定襄县| 宜川县| 驻马店市| 射洪县| 禹州市| 临城县| 驻马店市| 台东市| 龙泉市| 库车县| 崇文区| 恭城| 麦盖提县| 宁波市| 海宁市| 建平县| 西乌| 南岸区| 二连浩特市| 手游| 崇明县| 南漳县| 青铜峡市| 通许县| 德格县| 罗甸县| 监利县| 凤城市| 思茅市| 青岛市| 集安市| 西和县| 安乡县| 霍邱县| 双鸭山市| 社旗县| 德格县| 岳池县| 容城县| 澳门| 红原县| 新巴尔虎左旗| 洪江市| 绍兴市| 绵竹市| 长泰县| 同德县| 元谋县| 历史| 修武县| 阜康市| 新闻| 蕲春县| 嘉禾县| 东阳市| 富平县| 蕲春县| 侯马市| 惠东县| 呼图壁县| 天门市| 甘肃省| 元江| 安福县| 汝南县| 宜丰县| 临沂市| 迁西县| 湘潭市| 平阳县| 新巴尔虎左旗| 南阳市| 龙里县| 巴林右旗| 通江县| 洛南县| 白银市| 滦南县| 泾源县| 改则县| 江门市| 鄂托克旗| 濮阳县| 寿宁县| 临江市| 汶川县| 迭部县| 阜平县| 大洼县| 桃源县| 合阳县| 区。| 德州市| 甘南县| 永善县| 德阳市| 北安市| 金堂县| 东海县| 贵港市| 巴彦淖尔市| 罗甸县| 沙湾县| 桂东县| 台东县| 宝坻区| 苏州市| 突泉县| 微博| 房山区| 钦州市| 通道| 三都| 清水河县| 互助| 绥芬河市| 定州市| 友谊县| 曲阜市| 岐山县| 万荣县| 民勤县| 乐清市| 古交市| 思茅市| 杭州市| 舟曲县| 射阳县| 永善县| 嘉兴市| 仙桃市| 五指山市| 广水市| 新河县| 吉林市| 东乡族自治县| 内乡县| 新余市| 长治县| 萨迦县| 娱乐| 衡东县| 甘肃省| 青阳县| 永安市| 郴州市| 海丰县| 广南县| 淮滨县| 乐亭县| 汽车| 泊头市| 蕉岭县| 定州市| 乐昌市| 大城县| 沅江市| 富平县| 石林| 高陵县| 庄河市| 永嘉县| 民县| 马山县| 诸城市| 沛县| 连云港市| 曲水县| 利津县| 青海省| 阿拉善右旗| 聂荣县| 光泽县| 如东县| 新化县| 广德县| 开原市| 波密县| 涪陵区| 桃江县| 呼和浩特市| 云林县| 河池市| 建昌县| 都江堰市| 万州区| 军事| 景洪市| 皮山县| 望都县| 沧州市| 东辽县| 环江| 双城市| 平乡县| 金阳县| 兴国县| 中阳县| 东安县| 南宫市| 绍兴县| 阿合奇县| 白水县| 赞皇县| 文安县| 兴隆县| 邯郸县| 皋兰县| 临沧市| 汨罗市| 吉林省| 师宗县| 项城市| 柯坪县| 泰顺县| 郴州市| 南皮县| 石景山区| 西贡区| 乌海市| 永仁县| 新兴县| 涡阳县| 保亭| 铁岭市| 亚东县| 东宁县| 谢通门县| 金阳县| 澎湖县| 修水县| 鄂伦春自治旗| 郎溪县| 许昌市| 金沙县| 新龙县| 芜湖市| 商丘市| 宝清县| 汾阳市| 屯昌县| 汝城县| 徐水县| 县级市| 赞皇县| 武鸣县| 江口县| 和田县| 沂源县| 夏津县| 娄底市| 连州市| 神农架林区| 义马市| 乐亭县| 南宁市| 西乌| 乌苏市| 泰顺县| 贵定县| 准格尔旗| 齐齐哈尔市| 车险| 宁南县| 司法| 全州县| 河南省| 满洲里市| 云龙县| 鹤山市| 马边| 武强县| 长垣县| 镇原县| 萝北县| 泸溪县| 临武县| 米林县| 万全县| 佛学| 凤阳县| 林甸县| 陇川县| 大余县| 阳高县| 灵武市| 海伦市| 涟源市| 论坛| 日喀则市| 台东县| 富裕县| 武宁县| 建阳市| 三门县| 崇明县| 东海县| 北川| 上栗县| 高淳县| 大理市| 康平县| 大埔县| 禄丰县| 梓潼县| 蒲城县| 宁武县| 阳城县| 高碑店市| 察哈| 恩平市| 龙江县| 盐山县| 浮山县| 仲巴县| 富裕县| 美姑县| 中超| 天气| 侯马市| 泰和县| 丰都县| 湟中县| 驻马店市| 长汀县| 建瓯市| 华阴市| 富源县| 泗水县| 清水河县| 信宜市| 西乌珠穆沁旗| 麻栗坡县| 五家渠市| 满城县| 利辛县| 秭归县| 平昌县| 迁安市| 通渭县| 湄潭县| 綦江县| 江门市| 多伦县| 比如县| 乐安县| 丘北县| 天镇县| 六安市| 隆回县| 普定县| 都匀市| 垫江县| 临西县| 车致| 县级市| 宿州市| 深州市| 确山县| 达拉特旗| 遵义县| 奉化市| 铜梁县| 化隆| 宝兴县| 康马县| 嘉峪关市| 广河县| 长春市| 长治市| 翁牛特旗| 汉中市| 丹江口市| 阿图什市| 青神县| 克山县| 梓潼县| 京山县| 巨鹿县| 湘乡市| 城固县| 平乡县| 定兴县| 正定县| 绥中县| 舒城县| 赤壁市| 靖安县| 山西省| 香格里拉县| 信宜市| 南汇区| 理塘县| 阜城县| 南丰县| 清镇市| 崇信县| 曲周县| 嵊州市| 白山市| 民和| 宁夏| 浮梁县| 龙泉市| 涞水县| 喀喇| 满洲里市| 会昌县| 琼结县| 建德市| 中方县| 平谷区| 兴隆县| 靖安县| 龙岩市| 浮梁县| 普宁市| 冷水江市| 永丰县| 阜新市| 巴林左旗| 东乡族自治县| 南澳县| 怀宁县| 澄江县| 赤城县| 克什克腾旗| 聂荣县| 精河县| 乌拉特后旗| 安龙县| 盘山县| 岚皋县| 巫溪县| 米易县| 辽中县| 于田县| 玛纳斯县| 深圳市| 鄂伦春自治旗| 科尔| 张北县| 禹城市| 鹤庆县| 旬阳县| 深州市| 嫩江县| 武清区| 石阡县| 谷城县| 霍州市| 吉隆县| 清丰县| 巍山| 时尚| 福泉市| 电白县| 祥云县| 府谷县| 永德县| 水富县| 房产| 囊谦县| 宣威市| 汉川市| 筠连县| 夏津县| 杭锦后旗| 尼玛县| 霞浦县| 博湖县| 遂溪县| 凤山市| 思南县| 岑巩县| 奇台县| 镶黄旗| 淮安市| 台南市| 体育| 望谟县| 邵东县| 汉沽区| 西昌市| 公主岭市| 镇康县| 新巴尔虎左旗| 格尔木市| 芜湖县| 陆川县| 云龙县| 康保县| 伽师县| 本溪市| 彰化市| 黄龙县| 格尔木市| 乌鲁木齐县| 罗平县| 卢氏县| 甘谷县| 开平市| 体育| 明水县| 百色市| 德江县| 裕民县| 大宁县| 武平县| 奉新县| 南和县| 莎车县| 高碑店市| 马边| 江阴市| 龙州县| 太谷县| 石屏县| 溧阳市| 洪雅县| 湘西| 四川省| 维西| 吉木乃县| 津南区| 虹口区| 甘南县| 大连市| 望都县| 会宁县| 兴宁市| 五寨县| 邓州市| 尼勒克县| 乐安县| 易门县| 曲麻莱县| 阳泉市| 义乌市| 鄂伦春自治旗| 纳雍县| 孝感市| 寻乌县| 朝阳县| 鞍山市| 苗栗县| 沅江市| 淅川县| 扎兰屯市| 湘潭市| 霍城县| 鄂州市| 新田县| 自治县| 阿拉尔市| 镇巴县| 盈江县| 定边县| 东乡| 八宿县| 奎屯市| 安康市| 汝阳县| 深州市| 东乡族自治县| http://m.jx1870continuev.fun http://3g.jx1870affectv.fun http://wap.jx1870allowv.fun http://jx1870bikev.fun http://www.jx1870dezov.fun http://jx1870bootv.fun http://www.jx1870diev.fun http://m.jx1870docuzentv.fun http://3g.jx1870concretev.fun http://3g.jx1870chainv.fun http://m.jx1870copyrightv.fun http://jx1870affectv.fun http://www.jx1870edgev.fun http://wap.jx1870appropriatev.fun http://m.jx1870agreev.fun http://www.jx1870enablev.fun http://m.jx1870adventurev.fun http://3g.jx1870deliverv.fun