Dom 学习总结以及实例的使用介绍(2)

b、 clientX、clientY 发生事件时鼠标在客户区(浏览器界页面内)的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(按钮button内)的坐标。
c、returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
d、srcElement:获得事件源对象
e、KeyCode:发生时间时的按键值
f、button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同时按。

<body onmousedown="if(event.button==2){alert('禁止复制')}">

6、clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。

(1、当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。<body oncopy="alert('禁止复制!');return false;">
(2、很多元素也有oncopy、onpaste事件。

例子1:禁止复制
                    <body oncopy="alert('禁止复制!');return false;">
 例子2:给粘贴板赋值:复制地址给好友

<input type="button" value="分享本页给好友" />

例子3:禁止粘贴到文本框

请输入您的手机号码:<input type="text" />
请您再次输入手机号码:<input type="text" onpaste="alert('为保证您充值到正确的手机号,请勿粘贴手机号,请直接填!');return false;"/>:

例子4:复制时附带内容

在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权声明。

function modifyClipboard(){

clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区,转载请注明来源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。

用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值,写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒以后执行,这样就不再oncopy的执行调用栈上了。

7、页面前进、后退:history操作历史记录

window.history.back()后退;
window.history.forward()前进。也可以用window.history.go(-1)表前进;window.history.go(1)表后退。

实例1:

<body>这里是第2页<a href="javascript:window.history.back()">后退</a><input type="button" value="后退" />
</body>

8、document属性(最复杂的属性)document是window对象的一个属性,因为使用window对象成员的时候可以省略window,所以一般直接写document。

(1、write:向文档中写入内容。writeln和write差不多,只不过最后添加一个回车
(2、<input type="button" value="点击" />
(3、在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
(4、<script type="text/javascript">
                 document.write("<font color=red>您好</font>");
        </script>

案例1:

复制代码 代码如下:


getElementById
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>getElementById</title>
     <script type="text/javascript">
         //不建议直接通过id操作元素,而是通过getElementById根据元素的Id获得对象
         function btnClick() {
             //alert(textbox1.value);
             var txt = document.getElementById("textbox1");
             alert(txt.value);
         }
         function btnClick2() {
             //alert(form1.textbox2.value);//要显示表单里的信息需添加表单名称
             var txt = document.getElementById("textbox2");
             alert(txt.value);
         }
     </script>
 </head>
 <body>
     <input type="text" />
     <input type="button" value="点击我" />
     <form action="页面1.htm">
     <input type="text" />
     <input type="button" value="显示刚输入的内容" />
     </form>
 </body>
 </html>


案例2:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgfxj.html