js-G3
文档节点是每个文档的根节点,html中 文档节点只有一个子节点,及<html>元素
我们称之为文档元素,每个文档只能有一个文档元素,
在XML中没有定义的元素,因此任何元素都可能成为文档元素
js中的所有节点类型都继承自Node类型,因此所有节点类型偶读共享着相同的基本属性和方法
for (var i = 0; i = values.length; i++) {
//要避免这种频繁操作
ul.innerHTML += "<li>" + values[i] + "</li>";
}
每次循环都设置innerHTML的做法效率很低
最好的做法是单独构建字符串,然后再一次性将及结果字符串赋值给
innerHTML
var ite = "";
for (var i = 0; i = values.length; i++) {
ite += "<li>" + values[i] + "</li>";
}
ul.innerHTML = ite;
contains()方法;
检测某个节点是不是另一个节点的后代:
alert(document.getElement.contains(document.body)); //true;
13 事件:
BOM 浏览器对象模型
DOM 文档对象模型
事件是用户或浏览器自身执行的某种动作
事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码
通过html指定事件处理程序:
1,耦合
2,未加载完点击不起作用
2,不同浏览器中有不同的作用域链
要使用js指定事件处理程序,,首先必须取得一个要操作的对象的引用
var btn = document.getElementById('btn')
btn.onclick = function () {
alert('clecked')
}
DOM2级事件 定义了两个方法,用于处理指定和删除事件处理程序的操作:
addEventListener() 和 removeEventListener() 所有DOM节点中都包含着两个方法,并且他们都接受3个参数:
要处理的事件名,作为事件处理程序的函数,一个布尔值(true:在捕获阶段调用时间处理程序,false:在冒泡阶段调用事件处理程序)
var btn = document.getElementById('‘btn’');
btn.addEventListener('‘click’', function () {
alert('“btn-click”')
}, false);
通过addEventListener() 添加的事件处理程序 只能使用removeEventListener() 来移除;移除是传入的参数与添加处理程序事件时使用的参数相同.
//添加
var btn = document.getElementById('‘btn’');
btn.addEventListener('‘click’', function () {
alert('“btn-click”')
}, false);
//移除
var btn = document.getElementById('‘btn’');
btn.removeEventListener('‘click’', function () {
alert('“btn-click”')
}, false); //无效
注:因为是匿名函数,参数不是同一个 ,所以第二个参数不同
var btn = document.getElementById('‘btn’');
//定义函数
var handle = function () {
alert('“btn - click”')
};
btn.addEventListener('‘click’', handle, false);
//这样移除是有效的
btn.removeEventListener('‘click’', handle, false);
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段(后面false)
跨浏览器方式处理事件:
var EvnetUtil = {
addHandle: function (element, type, handler) {
if (element.addEventListener) {
Element.addEventListener(type, handler, false);
} else
if (element.attachEvent) {
Element.attachEvent('on' + type, handler);
} else {
Element['on' + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
Element.removeEventListener(type, handler, false);
} else
if (element.detachEvent) {
Element.detachEvent('on' + type, handler);
} else {
Element['on' + type] = null;
}
}
}
事件对象:
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息
在需要通过一个函数处理多个事件时,可以使用tyoe属性
var btn = document.getElementById('btn');
var handler = function (event) {
switch (event.type) {
case 'click':
alert('clecked');
break;
case 'mouseover':
event.target.style.backgroundColor = 'red';
break;
case 'mouseout':
event.target.style.backgroundColor = '';
break;
}
}
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
这个例子定义了一个handler函数 用于处理3种事件,
StopPropagation()方法用于立即停止事件在DOM层次中的传播
var btn = document.getElementById('btn');
btn.onclick = function (event) {
alert('clicked');
event.stopPropagation();
}
document.body.onclick = function (event) {
alert('bodyClicked');
此处如果不加stopPropagation 事件将冒泡到body
UI事件:
Load,unload,abort,error,select,resize,scroll
Load
EventUtill.addHandler(window,’load’function(){})
鼠标与滚轮事件:
Hashchange事件:
两个属性 oldUrl newUrl
EventUtil.addHandler(window, 'hashchange', function (event) {
Alert('Old URL: ' + event.oldURL + '\nNew URL:' + event.newURL);
})
考虑兼容性 最好使用 local.hash
事件委托:减少页面绑定事件
<ul id ='myLinks'>
<li id='goSomething'>qwe</li>
<li id='doSomewhere'>qwe</li>
<li id='sayHi'>qwe</li>
</ul>
var list = document.getElementById('myLinks');
EvnetUtil.addHandle(list, 'click', function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTaget(event);
switch (target.id) {
case 'doSomething':
document.title = 'asdasda'
break;
case 'goSomewhere':
location.href = 'qweq';
case 'sayHi':
alert('hi')
break;
}
})
表单的基础知识:
var form = document.getElementByTd('form1');
通过document.forms可以取得页面中所有的表单
var firstForms = document.forms[0]; //取得页面中的第一个表单
var myForms = document.forms['form2']; //取得页面中名称为”form2”的表单
表单提交:
用户点击提交按钮或图像按钮时,就会提交表单
使用 <input>或<button> 都可以定义提交按钮,只要其type特性的值设置为”submit”即可
而图像按钮则是通过将<input>的type特性设置为<image>来定义的
//通用提交按钮
<input type="submit" value="Submit Form">
//自定义提交按钮
<button type="submit">Submit Form</button>
//图像提交按钮
<input type="image" src="sub.gif">
在js中以编程方式调用submit();
var form = document.getElementById('myFormF');
//提交表单
Form.submit();
表单提交最大的问题是:重复提交表单;
在第一次提交表单后就禁用用户提交
用onsubmit事件处理程序取消后续的表单提交操作
重置表单:
<input type="reset" value="Reset Form">
<button type="reset">Reset Form</button>
表单字段:
每个表单都有elements属性,改属性是表单中所有表单元素(字段)的集合是一个有序列表,
var form = document.getElementById('form1');
//取得表单中的第一个字段
var field1 = form.element[0];
//取得名为'textbox1'的字段
var field2 = form.element['textbox1'];
//取得表单中包换的字段数量
var fieldCount = form.element.length;
应尽量使用 elements 来查询表单
共有的表单字段属性:
Disabled:布尔值,表示单签字段是否被禁用
Form;指向当前字段所属表单的指针,只读
name:当前字段的名称
radOnly:布尔值,表示当前字段是否只读
tanIndex:表示当前字段的切换(tab)序号,
type:当前字段的类型,checkbox radio 等等
value: 当前字段将被提交给服务器的值,
//避免多次提交表单:
EventUtil.addHandle(form, 'submit', function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTaget(event);
//取得提交按钮
var btn = target.elements['submit-btn'];
//禁用它
btn.disabled = true;
})
共有的表单字段方法:
focus() blur()
