第四天
事件:
页面的加载事件;
鼠标的单击事件,ctrl,alt,shift的单击事件;
除了属性之外,当然还有通用的HTML元素的事件:
1.onclick(单击)、
2.ondblclick(双击)、
3.onkeydown(按键按下)、
4.onkeypress(点击按键)、
5.onkeyup(按键释放)、
6.onmousedown(鼠标按下)、
7.onmousemove(鼠标移动)、
8.onmouseout(鼠标离开元素范围)、
9.onmouseover(鼠标移动到元素范围)、
10.onmouseup(鼠标按键释放)、
11.oncontextmenu(在浏览器中单击鼠标右键显示”右键菜单”时触发)等。
获取当前鼠标的坐标:(相对于当前的页面)
alert('client x:' + window.event.clientX + ',client y:' + window.event.clientY);
(相对于屏幕)
alert('screen x:' + window.event.screenX + ',screen y:' + window.event.screenY);
(相对于当前对象元素的坐标)
OffsetX、offsetY
单击超链接后不再出发事件:
触发按钮的源对象
Window。Event。srcElement事件源;
在单击的时候,测试单击的键,左键是0,中间是1,右键是2;
如果是用的window的方式,在IE中是1,4,2,文档中说的是同时按下左右键是3;
为body添加鼠标事件:
document.body.onmousedown = function (e) {
//alert(window.event.button);
alert(e.button);
};
在赋值的内容中加上自己的内容:
window.onload = function () {
document.body.oncopy = function () {
setTimeout(function () {
var content = clipboardData.getData('text');
content = content + '<br/>信?息¢来ぁ?源′:阰传?智?播¥客í<br/>';
clipboardData.setData('text',content);
}, 20);
};
};
禁止复制:
Oncopy
将变量放到剪贴板中,clipboardData. setData(‘数据类型’,变量);
页面的后退:window.history.go(-1);
页面的前进:window.history.go(1);
对象的属性----document
Document。Write(‘要输出的内容’)
Document。Writeln 是在源代码中的换行,在显示的时候只会显示一个空格;
Window。Onload=function(){};页面加载完成后要执行的代码;
通过document。Write()动态创建元素的时候,与页面加载一起的时候没有问题,但当页面加载完毕后,在点击按钮时,通过document。Write()创建的所有的元素 都会覆盖掉;
获取页面中的元素:
getElementByld()获取页面中的元素;
function dg(snodes) {
alert(snodes.nodeName + ' ' + snodes.childNodes.length);
for (var i = 0; i < snodes.childNodes.length; i++) {
alert(snodes.childNodes[i].nodeName);
if (snodes.childNodes[i].childNodes.length > 0) {
dg(snodes.childNodes[i]);
};
};
};
在网页中,路径不能使用绝对路径,要使用相对路径;
事件冒泡:由里向外;
禁止事件冒泡:
window.event.cancelBubble = true;
alert(this.id); 表示当前对象;
window.event.srcElement.id; 表示最初引发事件的对象;
动态创建元素:
createElement创建元素;
appendChild增加元素;
removeChild删除元素;
通过innerText获取标签之间的内容时,只会获取文字,会过滤掉标签;
对HTML进行反解析,生成元代吗;不能解析源代码,否则:“<”会变成<;“>”会变成>;
alert(document.getElementById('dv1').innerHTML);
对html进行解析:单击按钮btn2,读取txt1中的内容,显示在dv1中;
document.getElementById('btn2').onclick = function () {
var val = document.getElementById('txt1').value;
document.getElementById('dv1').innerHTML = val;
};
用insertRow、insertCell来代替或者为表格添加单元格;
Insertrow是添加行,insertCell是添加列;
对于大量进行节点操作时,使用innerHTML的方式性能要好于频繁的Dom操作