Javascript-基础知识（5）

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

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

3.事件

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

  e.g : onclick='abc()'

  
  
  
• 脚本模型：
  

  function btnClick(){shu('我是Button');}window.onload=function(){//加载完毕html后执行下面//方式1：var input=document.getElementsByTagName('input')[1];input.onclick=function(){shu('我是button1');};//方式2：input.onclick=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.onload=function(){document.onclick=function(evt){var e=evt || window.event; //做兼容处理，W3c || IEshu(this); //这里this代表的是当前对象shu(arguments.lenth) //这里是事件绑定的函数，浏览器会默认传一个参数：enentshu(evt);shu(evt.clientX); //点击的位置xshu(evt.clientY); //点击位置的yshu(evt.x); //点击的位置xshu(evt.y); //点击的位置yshu(evt.shiftkey);};//document.onclick=go;document.onmouseup=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.onload=function(){document.onkeydown=function(evt){shu(evt);shu(evt.keyCode); //返回的是小写字幕的ASCII的值shu(String.fromCharCode(evt.keyCode));};document.onkeypress=function(evt){shu(evt.charCode); //支持大小写，返回字符键码}};

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

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

  
  
  

事件绑定及深入

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

  //匿名函数里面的某一函数里的this的作用域就是window//window.onload 相当于 window['onload']window.onload=function(){var box=document.getElementById('red');box.onclick=toBlue;};function toRed(){this.className='red';this.onclick=toBlue;}function toBlue(){this.className='blue';this.onclick=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