Javascript-基础知识（5）

1.回顾：上篇学习浏览器检测，DOM知识

2.这篇将学习 事件，错误调试

3.事件

• 1).事件：是访问web页面的用户引起一系列操作：比如用户点击。
• javascript有三种事件模型：内联模型，脚本模型，和DOM2模型。
• 内联模型： 事件作为处理函数作为html属性执行js代码

e.g : οnclick='abc()'

• 
  
• 脚本模型：

function btnClick(){
shu('我是Button');
}
window.οnlοad=function(){
//加载完毕html后执行下面
//方式1：
var input=document.getElementsByTagName('input')[1];
input.οnclick=function(){
shu('我是button1');
};
//方式2：
input.οnclick=btnClick;//直接赋值函数名称
};

• 
  
• 2)常用的事件：
• onclick() ：点击事件
• ondblclick() ：双击事件
• onmousedown() :鼠标按下，没有离开
• onmouseup() :鼠标按下，离开执行
• onmouseover() :鼠标进入执行
• onmouseout() ：鼠标离开执行
• onmousemove() :鼠标移动执行
• onkeydown() : 按下任意键执行
• onkeypress() : 按下字符键执行
• onkeyup() ： 当按下键，离开就执行
• 3)HTML事件：= 匿名函数（即执行函数）
• window.onload ：页面加载完成的时候，执行
• window.onunload : 页面卸载的时候执行
• select ：选中之后执行
• onchange : 内容改变，光标离开后执行
• onfocus :获得焦点后执行
• onblur : 当失去焦点后执行
• onsubmit :提交表达执行，必须在form上，才能执行
• onreset :重置事件
• window.onresize ：窗口改变后执行
• onscroll ：滚动时执行
• 等。。。。
• 4)事件对象：鼠标事件
• e.g:

function go(){
shu(this); //这里的this代表被绑定的对象
}
window.οnlοad=function(){

document.οnclick=function(evt){
var e=evt || window.event; //做兼容处理，W3c || IE
shu(this); //这里this代表的是当前对象
shu(arguments.lenth) //这里是事件绑定的函数，浏览器会默认传一个参数：enent
shu(evt);
shu(evt.clientX); //点击的位置x
shu(evt.clientY); //点击位置的y
shu(evt.x); //点击的位置x
shu(evt.y); //点击的位置y
shu(evt.shiftkey);
};

//document.οnclick=go;

document.οnmοuseup=function(evt){
shu(evt.button);
};

};

• 
  
• 5)时间对象：键盘事件
• IE和Oprea 浏览器使用charCode ,其他可以使用keyCode；
  String.fromCharCode(evt.keyCode) ：将ASCII码转为字符
• e.g :

//IE和Oprea 浏览器使用charCode ,其他可以使用keyCode
//String.fromCharCode(evt.keyCode) ：将ASCII码转为字符
window.οnlοad=function(){
document.οnkeydοwn=function(evt){
shu(evt);
shu(evt.keyCode); //返回的是小写字幕的ASCII的值
shu(String.fromCharCode(evt.keyCode));
};
document.οnkeypress=function(evt){
shu(evt.charCode); //支持大小写，返回字符键码
}

};

• 
  
• 事件流的两种模式：捕获和冒泡
• e.stopPropagation() ：取消冒泡,e为事件
• e.canceBubble=true; IE取消冒泡
• e.g :

var box=document.getElementById('div1');
document.οnclick=function(evt){
shu(evt.target); //点击文档的哪里，输出哪里的文档对象
shu(evt.srcElement); 
};

事件绑定及深入

• 1)事件绑定分两种：一种是传统事件绑定(内联模型，脚本模型),另一种是现代事件绑定。
• e.g:

//匿名函数里面的某一函数里的this的作用域就是window
//window.onload 相当于 window['onload']
window.οnlοad=function(){
var box=document.getElementById('red');
box.οnclick=toBlue;
};

function toRed(){
this.className='red';
this.οnclick=toBlue;
}

function toBlue(){
this.className='blue';
this.οnclick=toRed;
}

• 
  
• 2)W3C事件处理函数
• addEventListener()和removeEventListener()函数：
• 上面两种方法：有三个参数：事件名称，执行函数，ture/false(true:捕获,false:冒泡) 可以解决问题：1)覆盖问题 2)执行函数中的同名函数
• e.g :
  

function zhi(){
shu('yuan ming zhuo');
}

window.addEventListener('load',function(){
shu('yuan');
},true);

window.addEventListener('load',zhi,true);

• 
  
• 3)IE事件处理函数：attachEvent(),detachEvent() :只支持冒泡，this对象指的是window
• 4)在处理IE兼容性问题的时候：搜索相关js类库,来解决！
• 5)事件对象的其他补充：
  W3c提供了relatedTarget ；可以在mouseover和mouserout，事件里获得当前的dom对象；
  IE的处理是：window.event.fromElement和window.event.toElement 来处理
• 6)上下文菜单事件：contextmenu,当右击网页的时候，显示自己的菜单
• e.g :

window.addEventListener('load',function(){
var text=document.getElementById('text');

text.addEventListener('contextmenu',function(evt){
preDef(evt);
var menu=document.getElementById('menu');
menu.style.left=evt.x+'px';
menu.style.top=evt.y+'px';
menu.style.display='block';
},true);
},true);

表单处理

• 1)获取From对象的方法：

var form=document.getElementById('form');
shu(form);

var form1=document.forms['form'];//不推荐 使用name属性
shu(form1);

var form2=document.forms[0];
shu(form2);

var form3=document.form; //不推荐使用
shu(form3);

var form4=document.getElementsByTagName('form')[0];
shu(form4);

• 
  
• 2)表单提交 e.g：

window.addEventListener('load',function(){

var form=document.getElementById('form');
//阻止submit的提交,submit只能绑定在form对象上
form.addEventListener('submit',function(evt){
evt.returnValue=false;
},false);

//使用submit()可以触发表单提交，用button测试
var btn=document.getElementById('btn');
btn.addEventListener('click',function(evt){
form.submit();
},false);

//ctrl+enter 自行查询资料

},false);

• 
  
• 3)提交次数：
  //减少表单提交次数方法：
  //1.第一次提交后，将按钮禁用
  //2.使用外部变量var flag=false; 提交后设置为 true; 判断 flag为true后 return
  //3.两者结合，最好
• 4)HTML DOM 操作表单
• e.g :

var form=document.getElementById('form');
//yuan为 name=‘yuan’ 的 input 控件

shu(form.elements); //表单控件集合
shu(form.elements.length);//控件数量
shu(form.elements['yuan']); //使用name获得表单对象值
shu(form.elements['yuan'].value); //获得控件值
shu(form.elements['yuan'].disabled); //是否可用
shu(form.elements['yuan'].form); //所属的form对象
shu(form.elements['yuan'].type); //控件类型
form.elements['yuan'].focus(); //获得焦点
form.elements['yuan'].blur(); //失去焦点
form.elements['yuan'].change(); //文本改变事件

• 
  
• 5) 文本框 的脚本
• 在html中input有value属性和textarea没有value属性
  在js中,input和textarea都有value属性
• select(); ：选定文本方法
  setSelectionRange(0,1); ：选中第0到第1个文本
• 过滤输入模式： (1).禁止或屏蔽非数字键的输入，阻止数字键的默认行为
  (2).验证后取消，可以先输入非法字符，然后判断后，取消你刚刚输入的文本
• 6)选择框 的脚本
• options 属性，返回options集合
•  

4.错误处理与调试

• 1)浏览器错误报告：打开js控制台上提示
• 2) 错误处理：
  try{}catch(e){} ,throw()语句
  参数e: 为错误信息，e.name()错误名称 和 e.message 错误信息;
  try-catch
  try-catch-finally
• 3)错误类型：

1.Error 
2.TypeError //类型错误
3.RangError //范围错误
4.ReferenceError //变量没有定义 引用错误
5.SyntaxError // 语法错误
6.Eval //
7.encodeURI //字符串转编码

• 
  
• 4)善用try-catch:
  常规错误和浏览器兼容错误，不建议使用try-catch;
  拼写错误，不建议使用try-catch;
  可以通过修改代码来排除的不建议使用;
  try-catch消耗资源多，可用于调试；
  也可将错误抛出：throw new Error('未知错误');
• 5)错误事件
  发生错误后，触发错误事件：

window.addEventListener('error',function(){
shu('我挣得错了');
},false);

• 
  
• 6)错误处理策略
  (1).类型错误
  (2).数据类型错误
  (3).通信错误
• e.g :
  

window.addEventListener('load',function(){

shu(arrSort('yuan'));
shu(arrSort([1,4,2,6,3]));

},false);

function arrSort(arr){
if(arr instanceof Array){
return arr.sort();
}else{
return '不是数组';
}
}

• 
  
• 7)调试技术: console对象

console.error('错误输出');
console.info('信息');
console.log('日志');
console.warn('警告');

• 
  
• 8)调试工具
• 网页版：firebug lite