JavaScript学习心得(七)

时间:2024-12-03 18:03:43

一 创建事件监听器

  开发人员往往使用事件和元素组合来命名事件处理函数。

  创建事件监听器方法:

  • 嵌入式事件处理器即将JavaScript函数赋值给HTML元素属性(不推荐使用:污染HTML;无法应用渐进增强的概念)
  • 传统事件处理:好处有二(容易使用和传统方法创建事件处理器可以使用匿名函数
     window.onload = function(){
    }

    ),可以通过传统方法将对象的相应事件属性赋值为null,删除事件处理器,同样可以检查对象的属性来确认事件监听器的存在

     if(typeof window.onload =='function'){}

    ;坏处也有二(只能指定一个事件处理器容易覆盖现有的事件处理器),可以通过创建一个调用两个所需函数的事件处理函数来缓解

  • W3C事件处理,DOM Level2规范(嵌入和传统事件处理统称为DOM Level 0)之一,事件监听器用addEventListener()方法创建
     window.addEventListener('load'(事件类型的名称,不是window自带的属性onload),init(调用的函数,不带括号),false(事件阶段的布尔值));

    可以多次使用添加多个事件监听器,对应的是删除一个事件监听器removeEventListener(),必须提供与准备撤销的addEventListener()调用相同的参数。,当事件监听器不需要的时候建议删除。

  • IE浏览器事件处理,用attachEvent()和detach()代替addEventListener()和removeEventListener(),只有两个参数:事件和事件发生时调用的函数
    window.attachEvent('onload',init);

二 事件类型

  1.输入设备事件

  输入设备事件:光标驱动事件(不包括键盘)由鼠标、触控板、轨迹球、绘图板及类似设备触发。

  1.1 输入按钮事件

  click(单击)事件:

  • mousedown(鼠标按下)
  • mouseup(鼠标释放)
  • click(单击)

  在一个元素上单击并移动到另一个位置的操作叫做Drag(拖动)。

  双击(dbclick)事件,如果在同一元素上使用dbclick,就不要使用click。

  1.2输入移动事件

  移动光标可能触发的事件:

  • mouseout(鼠标移出)
  • mouseover(鼠标移过)
  • mousemove(鼠标移动):少用,降低网页性能

  1.3键盘事件

  • keydown(按下键)
  • keyup(释放键)
  • keypress(按键)

  1.4浏览器事件

  • load:元素加载时触发

  • unload:页面卸载时触发,常用于创建弹出式窗口的一种方法,但不能阻止用户关闭窗口
  • resize:用户改变窗口大小时触发
  • scroll:在浏览器窗口中滚动
  • copy
  • paste
  • cut

  1.5表单事件

  • reset(无必要,当你使用重置按钮时,可以监视reset事件避免无意重置表单)
  • change
  • select:文本输入域和文本区域中的文本被选中时触发
  • focus
  • blur

三 高级事件处理 

  检查按键

  键和字符的区别:键是指键盘上的物理按键,大部分键可以产生超过一个字符,关键至于Unicode。KeyCode和which属性获得字符的Unicode值,但IE不支持which,可以通过以下方法获得字符:

 var charCode = e.which || e.keyCode;
//或者
var charCode = ( typeof e.which ==='number') ? e.which: e.keyCode;

  使用String对象的fromCharCode()方法获得与字符代码相关的实际字符:

 String.fromCharCode(charCode);

  对于一些特定的情况(游戏或者其他图形界面),字符不重要,关键在于特定的光标键。

  三个特殊键:shiftKey、ctrlkey、altKey。每个键的取值代表该键是否按下的布尔值。

  阻止默认事件行为

  阻止默认事件行为的方法——从事件处理器中返回false。