1. 事件对象：
    事件对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
  2. 事件对象的属性：
    x x坐标 距左边界的距离 IE中距父级容器左边界的距离
    y y坐标 距上边界的距离 IE中距父级容器上边界的距离
    clientX 距左边界的距离
    clientY 距上边界的距离
    screenX 距屏幕左边界的距离
    screenY 距屏幕上边界的距离
    pageX 距左边界的距离 IE8不支持
    pageY 距上边界的距离 IE8不支持
  3. 事件流：
    DOM事件流分为三个阶段：
    1) 事件捕获
    2) 目标阶段
    3) 事件冒泡
    事件流的写法：
    1) W3c：
    element.addEventListener(eventType, fn, false)
    dom对象.addEventListener(事件类型, 回调函数, 事件机制)
    2) IE：
    element.attachEvent(eventType,fn,false);
    dom对象.attachEvent(事件类型,回调函数,事件机制)
    // 注册事件
    if(dom.addEventListener) {
    dom.addEventListener(eventType, fn);
    } else {
    if(dom.attachEvent) {
    dom.attachEvent(‘on’ + eventType, fn);
    }
    }
    // 删除事件
    if(dom.removeEventListener) {
    dom.removeEventListener(eventType, fn, false);
    } else {
    if(dom.detachEvent) {
    dom.detachEvent(“on” + eventType, fn)
    }
    }
  4. 事件捕获和事件冒泡：
    事件捕获：从上向下触发事件，先父级元素触发事件，再子级元素触发事件；
    事件冒泡：从下向上触发事件，先子级元素触发事件，再父级元素触发事件。
  5. 阻止事件冒泡和取消浏览器默认行为：
    1. 阻止事件冒泡：
      w3c:
      event.stopPropagation;
      IE:
      event.cancelBubble = true;
    2. 取消浏览器默认行为：
      W3c:
      event.preventDefault
      IE:
      event.returnValue = false;
      阻止事件冒泡
      function stopBubble(e) {
      //如果提供了事件对象，则这是一个非IE浏览器
      if ( e && e.stopPropagation )
      //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
      else
      //否则，我们需要使用IE的方式来取消事件冒泡
      window.event.cancelBubble = true;
      }
      阻止浏览器的默认行为
      function stopDefault( e ) {
      //阻止默认浏览器动作(W3C)
      if ( e && e.preventDefault )
      e.preventDefault();
      //IE中阻止函数器默认动作的方式
      else
      window.event.returnValue = false;
      return false;
      }
  6. 事件委托(事件代理)：
    利用事件冒泡的原理，让自己触发的事件，交给父元素代替执行
  7. jquery中的四种事件绑定(事件监听)方式：
    1. bind
    2. live
    3. delegate
    4. on
      区别：
      bind 函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置
      live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章