记录我的旅程5之JavaScript Dom学习笔记

下面我们接着旅程4继续我们的JavaScript Dom征程5，这篇博文主要讲的是事件冒泡还有Dom修改元素的样式，所以这篇博文里面有很多举例说明，如：网页的开关灯效果，文本框的变色效果，还有就是评分控件的实现，而且这些在网页中用法都是非常普遍的。

JavaScript中的事件冒泡

(1) 事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件被触发，B的onclick也会触发，触发的顺序是”由内到外”。验证：在页面上添加table,table里面有tr,tr里面有td,td里面放一个p,在p,td,tr,table中添加onclick事件响应。

</td>

</tr>

</table>

</body>

(2) 其它

1) 事件中的this，除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件，只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数总不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听的这个事件，event.srcElement是引发事件的对象；事件冒泡。

function btnClick2() {

alert(this.value); //在事件响应函数调用的函数里就不能通过this来获得事件对象

}

function btnClick3(btn) {

alert(btn.value); //在事件响应函数中将this传过来即可

}

function btnClick4() {

alert(event.srcElement.value);

}

</script>

2) 易错：修改元素的样式不是设置class属性，而是className属性

.day{

background-color:Green;

}

.night{

background-color:Black;

}

</style>

</div>

3) 例子：实现网页开关灯效果
(1) CSS样式引用上一个案例即可，其余代码如下：

(document.body.className == "day") {

document.body.className = "night";

b function switchLight() {

var btnSwitch = document.getElementById("btnSwitch");

if tnSwitch.value = "开灯";

}

else {

document.body.className = "day";

btnSwitch.value = "关灯";

}

</script>

</body>

(3) 易错：单独修改样式的属性使用“style.属性名”，注意在CSS中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有“—”的属性，因为JavaScript中“—”是不能做属性，类名的。所以CSS中背景颜色是BackGround-Color，而JavaScript中则是style.background；元素样式名为class,在javascript中是className属性，font-size—>style.fontsize;margin-top—>style.marginTop。

案例学习

(1) 案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景颜色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。

注释: <input type="text" onblur="alert('第一个失去焦点')" />

代码: <script type="text/javascript">

function initEvent() { //遍历所有的input控件，添加

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

input.onblur = inputOnBlur;//设置inputOnBlur函数为input元素的onblur事件的响应函数

}

function inputOnBlur() { //焦点失去的时候进行数据检查

//inputOnBlur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件的对象

if (this.value.length <= 0) { //检查文本框中文字的长度，如果c<=0就说明是空的

this.style.background = "red";

}

else {

this.style.background = "white";

}

</script>

</body>

(2) 案例2：评分控件，用一个单行5列的table的评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色，鼠标在评分控件上的时候显示超链接形式的鼠标图标，演示：Jquery 版本。

function IndexOf(arr, element) { //alert(indexOf([1,5,3],3));

for (var i = 0; i < arr.length; i++) {

if (arr[i] == element) {

return i;

}

return -1;

}

function initEvent() { //给所有的td增加onclick事件

var tableRating = document.getElementById("tableRating");

var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有的Id

for (var i = 0; i < tds.length; i++) {

var td = tds[i];

td.onclick = TdOnClick;

td.style.cursor = "pointer"; //让鼠标放到td上显示手形状的光标

}

function TdOnClick() {

var tableRating = document.getElementById("tableRating");

var tds = tableRating.getElementsByTagName("td");

var index = IndexOf(tds, this);

for (var i = 0; i <= index; i++) {

var td = tds[i];

td.style.background = "red";

}

for (var i = index + 1; i < tds.length; i++) {

var td = tds[i];

td.style.background = "white";

}

</script>

</head>

<tr>

</tr>

</table>

</body>

(3) 练习1：超链接的单选效果，页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其它超链接背景还原为白色，window.event.returnValue=false。

function initEvent() {

var links = document.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {

var link = links[i];

link.onclick = LinkOnClick;

}

function LinkOnClick() {

var links = document.getElementsByTagName("a");

//不要把links放到全局变量中，尽量不要用全局变量，如果重复性的代码太多了，将代码放到一个公共函数中

for (var i = 0; i < links.length; i++) {

var link = links[i];

if (link == this) {

link.style.background = "red";

}

else {

link.style.background = "white";

}

window.event.returnValue = false; //阻止打开超链接

}

</script>

</body>

(4) 练习2：点击按钮，表格隔行变色，偶数行为黄色背景，奇数行为默认颜色，通过Table的getElementByTagName取得所有的tr，以次遍历，如果是偶数行就变色

function ShowIt() {

var tableMain = document.getElementById("tableMain");

var tds = tableMain.getElementsByTagName("tr");

for (var i = 0; i < tds.length; i++) {

if (i % 2 != 0) {

var tr = tds[i];

tr.style.background = "yellow";

}

</script>

</table>

</body>

posted @ 2012-07-09 23:51 Kencery 阅读(612) 评论(0) 编辑收藏举报

刷新页面返回顶部

怪才(Kencery)

菜鸟的里程中只有奋斗，别无其他

记录我的旅程5之JavaScript Dom学习笔记

公告