JavaScript基础—dom,事件

Posted 2020-06-08

Js基础—DOM

1：dom:文档对象模型

Dom就是html页面的模型，将每个标签都作为一个对象，js通过调用dom中的属性，方法就可以对网页中的文本框，层等元素进行编程控制。Dom就是一些让javascript能操作html页面控件的类，函数。

这就是文档对象模型。按照xml文档的理解就可以。

à页面中的属性，标签要是没有注明给那个对象，则统一时给window的，我们都可以通过window点击出来，进行操作，这个js中理解的一样。但是我们现在通过document.getElementById(‘btn‘)可以找到元素。

1. <div>
2. ????<form id="form1" action="/" method="GET">
3. ????????<input type="text" id="txt1" name="name" value=""/>
4. ????????<input type="button" id="btn" value=""/>
5. ????</form>
6. </div>
7. <script type="text/javascript">
8. ????document.getElementById(‘txt1‘).value=‘你好，世界‘;
9. </script>

àwindow.onload事件

这是在整个页面加载完成之后再执行的事件。这个可以解决某些标签没有注册就在前面js中使用的情景。<网页是从上往下执行的>

1. window.onload = function() {
2. ????document.getElementById(‘txt1‘).value = ‘你好，世界‘;
3. ????document.getElementById(‘btn‘).value = ‘aaaa====‘;
4. };

à动态注册事件使得html和js进行分离

我们进行分类是不想让在html中邪js代码，我们添加点击事件可以放到window.onload中。争取都是用匿名函数来注册事件。

1. <script type="text/javascript">
2. ????//为窗体注册一个加载事件
3. ????window.onload = function() {
4. ????????//为按钮注册单击事件
5. ????????document.getElementById(‘i‘).onclick = function() {
6. ????????????alert(‘啊你 ‘);
7. ????????};
8. ????};
9. </script>

à下面是两个重要的区分[fun,fun()]

1. window.onload = function() {
2. ????document.getelementById(‘aaa‘).onclick = function() {
3. ????????alert(‘你好‘);
4. ????};
5. ????document.getElementById(‘aaa‘).onclick = fun(); //这是将fun()函数的返回值传递过来，是错误的
6. ????document.getElementById(‘aaa‘).onclick = fun; //这是将函数传递过来，什么时候执行不知道，等点击了之后才知道。
7. ????function fun() {
8. ????????alert(‘我不好‘);
9. ????};
10. };

2:window对象的函数

à其实我们页面上的匿名函数，变量等都是window的函数，比如alert();这是window的函数。

àconfirm();

确认对话框。

1. <script type="text/javascript">
2. ????window.onload= function() {
3. ????????document.getElementById(‘btn1‘).onclick = function() {
4. ????????????if (confirm(‘你确定要删除吗？‘)) {
5. ????????????????alert(‘删除成功！‘);
6. ????????????} else {
7. ????????????????alert(‘取消删除！‘);
8. ????????????}
9. ????????};
10. ????};
11. </script>

àjs中按钮的跳转

Window.navigate(‘http://www.baidu.com‘);这个现在只有IE浏览器支持，别的浏览器都不支持了，我们现在使用window.location.href=‘http://www.baidu.com‘;来进行跳转。

1. window.onload = function() {
2. ????document.getElementById(‘btn2‘).onclick = function () {
3. ????????//window.navigate(‘http://www.baidu.com‘); //这个只有IE支持，别的浏览器都不支持。
4. ?????????window.location.href=‘http://www.baidu.com‘;
5. ?????};
6. ?};

àwindow.setInterval(code.delay);

Code:表示一段代码，那么就写在匿名函数中就行。Delay:延迟时间。

计时器放回值是个id，这个id只有关闭的时候才需要使用，所以定义为全局变量。

Setinterval是重复的定时执行，setTimeout也是定时执行，但是，它只执行一次，Interval:间隔，timeout:超时。

1. <script type="text/javascript">
2. ????var intervalId;
3. ????window.onload = function () {
4. ????????//开始
5. ????????document.getElementById(‘btnStart‘).onclick = function () {
6. ????????????//启动一个计时器,这里面的参数code是代码块，那就写个匿名函数就行了。1000毫秒是1秒。
7. ????????????intervalId = setInterval(function () {
8. ????????????????//思路：先获取到文本框中的值，接着为其执行累加，在为其文本框赋值。
9. ????????????????//第一钟写法
10. ????????????????//var txtobj = document.getElementById(‘txt1‘);
11. ????????????????//var s = txtobj.value;
12. ????????????????//s = parseInt(s) + 1;
13. ????????????????//txtobj.value = s;
14. ????????????????//第二钟写法
15. ????????????????document.getElementById(‘txt1‘).value++;
16. ????????????}, 1000);
17. ????????};
18. ????????//停止
19. ????????document.getElementById(‘btnStop‘).onclick = function () {
20. ????????????clearInterval(intervalId);
21. ????????};
22. ????};
23. </script>

这里必须将计时器放到一个外部变量中，这样就好关闭了，应为关闭的时候也需要这个变量，clearInterval(计时器变量);

Eg:利用计时器实现标题栏的滚动。

1. <title>阿辉，你要加油。</title>
2. <script type="text/javascript">
3. ????//目标：实现标题栏的滚动效果；思路：向左滚，每隔一秒截取标题左边的字符串，放到标题的右边。向右滚思路一样。
4. ????//直接启动计时器
5. ????setInterval(function () {
6. ????????var txtTitle = document.title;
7. ????????var leftTitle = txtTitle.charAt(0); //截取出第一个字符串
8. ????????var right = txtTitle.substring(1); //从第一个字符到最后一个，这就是剩余的字符串。
9. ?????document.title= right + leftTitle;
10. ????},1000);
11. </script>

Eg:通过按钮来调节标题滚动的方向。

1. <title>阿辉，你要加油。</title>
2. <script type="text/javascript">
3. ????//目标：实现标题栏的滚动效果；思路：向左滚，每隔一秒截取标题左边的字符串，放到标题的右边。向右滚思路一样。
4. ????//直接启动计时器
5. ????var direction = ‘left‘;
6. ????window.onload = function () {
7. ????????setInterval(function () {
8. ????????????var txtTitle, leftTitle, rightTitle, end1, end2;
9. ????????????txtTitle = document.title;
10. ????????????if(direction==‘left‘) {
11. ?????????????????leftTitle = txtTitle.charAt(0); //截取出第一个字符串
12. ?????????????????end1= txtTitle.substring(1); //从第一个字符到最后一个，这就是剩余的字符串。
13. ????????????????document.title = end1+ leftTitle;
14. ????????????} else {
15. ????????????????rightTitle = txtTitle.charAt(txtTitle.length - 1);
16. ????????????????end2 = txtTitle.substring(0, txtTitle.length - 1);
17. ????????????????document.title = rightTitle + end2;
18. ????????????}
19. ????????}, 1000);
20. ????document.getElementById(‘btnLeft‘).onclick = function () {
21. ????????direction = ‘left‘;
22. ????};
23. ????document.getElementById(‘btnRight‘).onclick = function () {
24. ????????direction = ‘Right‘;
25. ????};
26. ????};
27. </script>

àwindow.onload()

页面加载后触发，这是在整个页面全部都执行完之后，才进行触发，浏览器一边下载文档，一边解析执行，可能会出现js执行时需要操作某个元素，这个元素还没有加载，这样就需要放到onload事件中，或者可以把js放到元素之后，

àwindow.onbeforeunload()

页面卸载之前执行,弹出对话框，就像教务管理系统里面的一样。Return"";出来的字符串js安装正常的显示执行。下面一样。

àwindow.onunload();

页面卸载之后执行。

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????alert(‘你好吗‘);
4. ????};
5. ????window.onbeforeunload = function () {
6. ????????return ‘aaa‘;
7. ????};
8. ????window.onunload = function() {
9. ????????return ‘aaaaaaaaaaaa‘;
10. ????};
11. </script>

3：Window对象的属性

àwindow.Location

这个之前说是可以利用js进行跳转(超链接)，直接window.location.href=‘http://www.baidu.com‘;这样就可以进行超链接了。

也可以直接获取到当前的url中的地址。就是利用上面的语句。Alert(window.location.href);利用.reload可以进行网页的刷新。

à事件对象event widnow.event

这个是事件对象，可以查看出鼠标点击下的状态，比如鼠标左键同时按下shift键，这是可以通过这个事件对象来获取到的。《这个事件对象对于不同的浏览器存在差异》

差异：在ie8以及更早的ie中需要通过window.event来获取事件对象，但是现在在标准的浏览器火狐等中通过在事件处理的匿名函数中写参数来代表事件的对象。这个可以通过浏览器的兼容代码解决。

Event事件不局限于window对象的事件，所有的元素的事件都可以通过event属性取到相关信息。

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????document.getElementById(‘div1‘).onclick = function (event) {
4. ????????????/*浏览器兼容*/ //这里的参数是事件对象
5. ????????????var e = window.event || event;
6. ????????????if (e.altKey) {
7. ????????????????alert(‘同时按下了alt‘);
8. ????????????} else {
9. ????????????????if (e.shiftKey) {
10. ????????????????????alert(‘按下了shift‘);
11. ????????????????} else {
12. ????????????????????if (e.ctrlKey) {
13. ????????????????????????alert(‘按下了ctrl键‘);
14. ????????????????????} else {
15. ????????????????????????alert(‘其它‘);
16. ????????????????????}
17. ????????????????}
18. ????????}
19. ????};
20. ????};
21. </script>

àevent事件的其它属性

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????document.getElementById(‘div1‘).onclick = function(event) {
4. ????????????var e = window.event || event;
5. ????????????//相对于页面左上角的偏移坐标
6. ????????????var x = e.clientX;
7. ????????????var y = e.clientY;
8. ????????????alert(x + ‘ ‘ + y);
9. ????????????//相当于屏幕左上角的偏移坐标
10. ????????????var x = e.screenX;
11. ????????????var y = e.screenY;
12. ????????????alert(x + ‘ ‘ + y);
13. ????????????//相当于自己元素左上角的偏移坐标
14. ????????????var x = e.offsetX;
15. ????????????var y = e.offsetY;
16. ????????????alert(x + ‘ ‘ + y);
17. ????????};
18. ????};
19. </script>

在事件的点击函数中里面的this就代表的是这个元素。可以通过this获取到元素的所有页面上的值。

àthis中的事件冒泡

这里的冒泡是指某个标签在几个标签里面包含着，我们使用点击事件，外面的标签也会一起执行，这就是事件的冒泡。

在js中this代表的是当前的元素对象，我们使用this的时候一定注意事件冒泡，这个是从里面到外面一次的都执行。 This和window.event.srcElement大体上是一个意思，但是在事件冒泡上面，二者就有了分别，event.srcElement始终表示最初引发事件的对象(冒泡依旧继续，但是在每个事件中的event.srcElement都是代表最初引发事件的对象， 于this不同，this代表的是当前事件的对象)。

如何阻止事件冒泡：window.event.cancelBubble=true;

à鼠标按下获取是按下了那个键

这次不是onclick事件了，是鼠标按下事件。

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????document.getElementById(‘div1‘).onmousedown = function(event) {
4. ????????????var e = window.event || event;
5. ????????????alert(e.button);
6. ????????};
7. ????};
8. </script>

à剪切板对象(只支持IE)

利用clipboardData属性来操作，它里面有setData,getData，clearData等，来操作里面具体的数据

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????//拷贝
4. ????????document.getElementById(‘btnCopy‘).onclick = function() {
5. ????????????var txt = document.getElementById(‘txt1‘).value;
6. ????????????window.clipboardData.setData(‘text‘, txt);
7. ????????????alert(‘内容写入剪切板‘);
8. ????????};
9. ????????//剪切
10. ????????document.getElementById(‘btnPaste‘).onclick = function() {
11. ???????????var s= window.clipboardData.getData(‘text‘);
12. ???????????document.getElementById(‘txt2‘).value = s;
13. ????????????alert(‘粘贴成功‘);
14. ????????};
15. ????};
16. </script>

à复制小尾巴dom

Document.body.oncopy是复制事件。

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????document.body.oncopy = function () {
4. ????????????setTimeout(function() {
5. ????????????????var msg = clipboardData.getData(‘text‘);
6. ????????????????msg += ‘此文出自：http://www.ahui.com‘;
7. ????????????????clipboardData.setData(‘text‘, msg);
8. ????????????}, 100);
9. ????????};
10. ????};
11. </script>

àhistoty操作历史纪录