小汤学编程之JavaScript学习day05——DOM、事件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小汤学编程之JavaScript学习day05——DOM、事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8098字，纯文字阅读大概需要12分钟。

内容图文

一、DOM

1.DOM树状结构图     2.节点类型     3.document节点     4.element节点     5.CSS

二、事件链

1.JS的继承结构图     2.常用事件句柄     3.事件的绑定     4.表单效验     5.事件的传播     6.event对象     7.事件的委托/代理

一、DOM

DOM文档对象模型 (Document Object Model） 使 JavaScript 有能力与当前文档对话。

1.DOM树状结构图

任意的文档都可以绘制成树状结构，在DOM树上，每个元素都可与看做一个对象，每个对象都叫做一个节点(node)。docunment就是一个对象，这个对象指代的是这个文档。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

2.节点类型

（不考虑注释）

3.document节点

属性

方法

前六个为查找方法，后三个为创建方法。
创建方法通常与 appendChild() 方法一起使用，达到增加HTML结构的目的。

// 通过document创建一个h1元素节点
var newH1 = document.createElement("h1");
// 通过document创建一个class属性节点
var att1 =  document.createAttribute("class");
att1.value = "my_class" ;
// 通过document创建一个文本节点
var text2 = document.createTextNode("我们正在学习JS的DOM.");
// 把属性节点设置到对应的元素节点上
newH1.setAttributeNode(att1);
// 把文本节点设置到对应的元素节点上
newH1.appendChild(text2);
// 将创建的h1加入到body中
document.body.appendChild(newH1);

4.element节点

属性

方法

5.CSS

内联样式

我们可以通过 元素.style.属性 或者 元素.style["属性"] 来获取或者设置元素的内联样式。如果属性是多个单词需要使用小驼峰命名。

生效样式

很多样式我们是定义在内部或者外部，只查看内联样式没意义，我们可以查看元素的生效样式而不用管是定义在哪里。

• IE浏览器：元素.currentStyle.属性
• 非IE浏览器：getComputedStyle(元素)[属性]

兼容样式

由于IE跟非IE浏览器的样式访问不太一样，我们可以自定义一个方法，来兼容所有浏览器。

/*
ele:要查看样式的元素。
styleName：要查看的样式名，字符串形式。
*/
function getStyleValue(ele,styleName){
    return ele.currentStyle?ele.currentStyle[styleName]:getComputedStyle(ele,null)[styleName];
}

二、事件

有时候我们需要在达到某些条件的时候去执行 一段固定的JS代码。我们称之为事件。

1.事件的三要素

(1)事件源：用来发生事件的对象
(2)绑定事件：事件源与执行程序的绑定方式
(3)事件执行程序：事件触发后要执行的代码

2.常用事件句柄

3.事件的绑定

• 方式一：直接在HTML中定义元素事件的相关属性

<button onclick="alert('hello')">按钮</button>
		
<button onclick="helloClk()">按钮</button>

<script>
    function helloClk(){
        alert('hello');
    }
</script>

缺点：html中写JS代码，强耦合，违反了“内容与行为相分离”的原则，少用。

• 方式二：直接在JS中定义元素事件的相关属性

<script>
	// 获取按钮元素
	var btn = document.getElementById("btn_id1");
	// 给按钮元素绑定事件句柄函数
	btn.onclick = helloClk;
	// 定义事件驱动函数
	function helloClk(){
    	alert('hello');
	}
</script>

解决了强耦合性，但只能给一个事件对象绑定一个事件类型。 绑定多个同一类型的事件的话后面覆盖前面的。

• 方法三：高级事件处理方式（addEventListener）

<script>
	// 获取按钮元素
	var btn = document.getElementById("btn_id1");
	// 给按钮元素绑定事件句柄函数,可以绑定多个
	btn.addEventListener("click",btnClick1);
	// false表示事件冒泡阶段执行，true表示事件捕获阶段执行，默认false
	btn.addEventListener("click",btnClick2 ,false);

	function btnClick1(){
   		alert('hello1');
	}
	function btnClick2(){
    	alert('hello2');
	}
	// 把btn上的click事件的btnClick1解除绑定
	btn.removeEventListener("click",btnClick1);
</script>

• 可以为一个元素绑定多个监听函数，都会得到执行。
• 匿名事件无法解绑。
• IE使用的是detachEvent / attachEvent

4.表单效验

对于JAVA工程师来说，前端与后台的数据交互是及其重要的，而表单的提交就是前端与后台的重要的数据交互。为了提交表单时数据更加合理，减轻后台的压力，在提交表单时进行校验是非常有必要的。

• 第一步：在表单标签中绑定onsubmit事件，调用校验函数，通过返回值控制是否提交。
• 第二步：在校验函数中使用过md5方法对密码进行加密。
• 第三步：改为使用隐藏域来提交密码。

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.9.0/js/md5.min.js"></script>
...
<form id="my_form" action="#" method="post" onsubmit="return check()">
    用户名： <input id="user_name" name="userName" /> <br/>
    密 码： <input id="user_input_pwd" type="password" /> <br/>
    <!-- 隐藏域，值用来保存密码md5加密后的结果，提交到后台 -->
    <input id="user_hidden_pwd" type="hidden" name="userPwd" />
    <input type="submit" />
</form>
...
function check(){
    var name = document.getElementById("user_name").value;
    var pwdInput = document.getElementById("user_input_pwd") ;
    var pwd = pwdInput.value;

    var pwdHidden = document.getElementById("user_hidden_pwd") ;
    if(name.length < 6){
        alert("用户名长度必须不低于6位");
        return false ;
    }
    if(pwd.length < 6){
        alert("密码长度必须不低于6位");
        return false ;
    }
    pwdHidden.value = md5(pwd); 
    return true;
}

5.事件的传播

事件传播示意图

JS中的事件创建后，会按照如下过程在HTML元素间进行传播。IE的事件模型是没有捕获阶段的。

三个阶段

• 事件捕获：事件对对象沿DOM树向下传播
• 目标出发：运行事件监听函数
• 事件冒泡：事件沿DOM树向上传播

6.event对象

事件处理函数中有一个绑定事件的对象，有时候我们需要用到里面的一些重要属性。

7.事件的委托/代理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

比如需要给ul下的li绑定事件，可以利用事件传播机制，直接给ul绑上事件即可：

ul.onclick = function(event){
    if(event.target.nodeName.toLowerCase() == 'li'){
        alert(event.target.innerText);
    }
}

内容总结

以上是互联网集市为您收集整理的小汤学编程之JavaScript学习day05——DOM、事件全部内容，希望文章能够帮你解决小汤学编程之JavaScript学习day05——DOM、事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端