事件流 事件冒泡 事件捕获 ，按相反的方向查找 DOM2级事件 事件处理程序 DOM0级事件程序 DOM2级事件处理程序 IE事件处理程序 事件对象 IE中的事件对象 跨浏览器的事件对象
事件流
事件冒泡
事件捕获 ，按相反的方向查找
DOM2级事件
事件处理程序
DOM0级事件程序
DOM2级事件处理程序
IE事件处理程序
事件对象
IE中的事件对象
跨浏览器的事件对象
事件类型
DOM33级锁定以下事件
UI
焦点
鼠标
滚轮
文本
键盘
合成
变动
变动名称
添加了大量的事件处理程序，这时就要去考虑事件和性能
事件委托
<ul id="myLinks">
<li id="goSomewhere">Go goSomewhere</li>
<li id="doSomething"> doSomething</li>
<li id="sayHi">Say hi</li>
</ul>
var item1=docunment.getElementById("goSomewhere");
var =item2=docunment.getElementById("doSomething");
var item3=docunment.getElementById("sayHi");
EvenUtil.addHandler(item1,"click",function(event){
location.href="http://www.wrox.com";
});
EvenUtil.addHandler(item2,"click",function(event){
location.title="I cha the docuemnt's title";
});
EvenUtil.addHandler(item3,"click",function(event){
consoel.log("HI");
});
//事件委托，在DOM的最高层添加一个事件处理程序
var list=document.getElementById("myLinks");
EvenUtil.addHandler(list,"click",function(event){
event=EvenUtil.getEvent(event);
var target=EvenUtil.getTarget(event);
switch(target.id){
case "doSomething":
docunment.title="i changed the document 's title";
break;
case "goSomewhere":
location.href="http://www.wrox.com";
break;
case "sayHi":
`alert("hi");
break;
}
});
模拟事件
IE中的事件模拟
表单脚本
提交表单
重复表单
选择文本select()方法，选择文本框中的所有文本
移除选择框选项
Selectbox.removeChild(selectbox.optioms[0]);
selectbox.remove(0)
在表单提交期间，浏览器是如何将数据发送给服务器的：
对表单字段的名称和值进行url编码，使用和号（&）分割
不发送禁用的表单字段
只发送勾选的复选框和单选按钮
不发送type为reset和button的按钮
多选选择框中每个选中的值单独一个条目
单击提交按钮提交表单的情况下，也会发送提交按钮;否则，不发送提交按钮，也包括tyoe为image的input元素
Select元素的值，就是选中的optiom元素的value特性的值，如果option元素没有value特性，则是optiom元素的文本值
富文本编辑
练习代码
var person1 ={
name: "Nicholas"
};
var person={}
Object.defineProperty(person,"name",{
configurable: false,
writable:false,
value:"Nicholas"
});
console.log(person.name);
person.name="Greg";
console.log(person.name);
//构造器模式
function Personq(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName =function(){
console.log(this.name);
};
}
var person3=new Personq("tt",29,'Engineer');
var preson4=new Personq("yy",29,"driver");
//这样写，避免每一个属性前面都加上Person.prototype麻烦
function Person(){}
Person.prototype ={
//将con属性指向特定值，保证能够正确访问到
constructor:Person ,
name :'ss',
age :29,
job:'checker',
sayName:function (){
console.log(this.name);
}
};
//dom操作，动态脚本
<script type='text/javascript' src='client.js'></script>
function loadScript(url){
var script =document.createElement("script");
script.type="text/javascript";
srcipt.src="client.js";
document.body.appendChild(script);
}
loadScript('client.js');
var script=document.createElement("script");
script.type="text/javascript";
script.appendChild(document.createTextNode('function sayHi(){alert('hi');}'));
document.body.appendChild(script);
//IE中的写法
var script=document.createElement('script');
script.type='text/javascript';
script.text='function sayHi(){alert('hi');}';
document.body.appendChild(script);
//动态样式
//<link rel ='stylesheet' type='text/css' href='styles.css'>
var link=document.createElement("link");
link.rel='stylesheet';
link.type='text/css';
link.href='style.css';
var head=document.getElementsByTagName('head')[0];
head.appendChild(link);
selectbox.opitions[0]=null;
function clearSelectbox(selectbox){
for(var i=0,len=selectbox.options.length;i<len;i++){
selectbox.remove(i);
}
}
移动和重排选项
var selectbox1=document.getElementById("selLocations1");
var selectbox2=document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);
<!--
向前移动一个选项
-->
var optionToMove=selectbox.opitions[1];
selectbox.insertBefore(optionToMove,selectbox.opitions[optionToMove.indxe-1]);
<!--
向后移动一个选项
-->
var optionToMove=selectbox.opitions[1];
selectbox.insertBefore(optionToMove,selectbox.opitions[optionToMove.indxe+2]);
<!--序列化表单代码-->
function serialize(form){
var parts=[],
field=null,
i,len,j,optLen,option,optValue;
for(i=0,len=form.elements.length;i<len;i++){
field=form.elements[i];
swith(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j=0,optLen=field.opitions.length;j<optLen;j++){
option=field.options[j];
if(option.selected){
optValue="";
if(option.hasAttribute){
optValue=(option.hasAttribute("value")?option.value:option.text);
}else{
optValue=(option.attributes["value"].specified?option.value:option.text);
}
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue))；
}
}
}
break;
case undefined:
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if(!field.checked){
break;
}
default:
}
}
}
