JavaScript事件（五）
- DOM入门
- DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。 JavaScript→DOM就是C#→ADO.NET。DOM就是一些让JavaScript能操作Html页面控件的类、函数。
- DOM也像WinForm一样，通过事件、属性、方法进行编程。
- CSS+JavaScript+DOM=DHtml
- DOM模型
- 事件
- 在DOM中有很多事件。演示：
- <body οnmοusedοwn=“alert(‘别点我！’);”>//注意body的范围。Body的范围就是body里内容的范围，如果没有内容，就无法触发事件。
- 有时事件的响应代码比较多，就要放到一个函数中：
<script type="text/javascript">
function userMouseDown() {
alert('网页被你点坏了>_<~~,赔吧！');
alert('逗你玩呢~~');
}
</script>
<input type="button" value="按钮" οnmοusedοwn=“userMouseDown();" />
注：οnmοusedοwn=“userMouseDown();”中，userMouseDown后的括号不能丢（不能写成οnmοusedοwn=“userMouseDown” ），带()表示调用函数，直接写函数名表示设置事件的处理函数为userMouseDown。可以这样说吧,onclick后会触发一个方法,
οnclick=f1;的意思就是说onclick触发的方法就是f1.
οnclick=“f1()”的意思就是说onclick触发的方法里调用了f1
οnclick=事件引发后的处理程序。
οnclick=" f(this); "; //在onclick的事件处理程序中调用了f()方法
οnclick=f;//该事件的处理程序就是f()方法。
- 动态设置事件
- JavaScript也可以像.Net中那样动态设置事件，Button.Click+=…
<script type="text/javascript">
function F1() { alert('In F1'); }
function F2() { alert('In F2'); }
</script>
<input type="button" value="关联F1" οnclick="document.οnclick=F1;" />
<input type="button" value="关联F2" οnclick="document.οnclick=F2;" />
- 注意： οnclick=“document.οnclick=F1;” 此处的F1不要加括号，加括号就编程了调用F1()函数，并且把返回值赋值给document.onclick了。
document.body.onclick范围仅限于body
document.onclick范围为整个文档。
- 事件冒泡
- 事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应，例：
<table οnclick="alert('table onclick');">
<tr οnclick="alert('tr onclick');">
<td οnclick="alert('td onclick');"><p οnclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
- 取消事件冒泡： window.event.cancelBubble = true;//IE下的写法。
<table οnclick="alert('table onclick');">
<tr οnclick=" window.event.cancelBubble = true;alert('tr onclick');">
<td οnclick="alert('td onclick');">
<p οnclick=" window.event.cancelBubble = true;alert('p onclick');"> aaaa</p>
</td>
<td>
bbb
</td>
</tr>
</table>
- window.onload与body的onload
1.二者效果完全一样,都是在页面内容都加载完毕后才触发。
2.由于网页中没有window所以在body中写onload
3.建议使用window.onload//使用js脚本的方式高效
4.其实应该是document.onload，但是所有浏览器都实现到了window对象上。
- 事件中的this
- 事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），如果要使用则要将this传递给函数或者使用event.srcElement，例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function f3() {
alert(event.srcElement.value);
}
function f4() {
//事件的调用函数中this 代表window对象
alert(this.location.href);
alert(this.value);
}
window.onload = function () {
btn5.onclick = function () {
alert(event.srcElement.value);
}
btn6.onclick = function () {
//在事件响应函数中 this代表当前触发事件的对象
alert(this.value);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="btn1" οnclick="alert(event.srcElement.value)" /><br />
<input id="btn2" type="button" value="btn2" οnclick="alert(this.value)" /><br />
<input id="btn3" type="button" value="btn3" οnclick="f3()" /><br />
<input id="btn4" type="button" value="btn4" οnclick="f4()" /><br />
<!-- 此时this是触发事件的对象-->
<!--<input id="Button1" type="button" value="btn4" οnclick="f4(this)" />--><br />
<input id="btn5" type="button" value="btn5" /><br />
<input id="btn6" type="button" value="btn6" /><br />
</body>
</html>
- (*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡，例：
<!--srcElement 引发事件的对象-->
<table οnclick="alert(event.srcElement.innerHTML);">
<tr οnclick="alert(event.srcElement.innerHTML);">
<td οnclick="alert(event.srcElement.innerHTML);"><p οnclick="alert(event.srcElement.innerHTML);">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
<!--this 监听事件的这个对象-->
<table οnclick="alert(this.innerHTML);">
<tr οnclick="alert(this.innerHTML);">
<td οnclick="alert(this.innerHTML);"><p οnclick="alert(this.innerHTML);">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
- <body οnclick=“//这个叫做事件调用函数，在这里写this表示发生事件的控件。在这里调用另外一个函数F1,则F1中不能使用this表示发生事件的控件”>
文章来源: wanghao.blog.csdn.net，作者：AI浩，版权归原作者所有，如需转载，请联系作者。
原文链接：wanghao.blog.csdn.net/article/details/106500306
- 点赞
- 收藏
- 关注作者
评论（0）