DOM 事件

DOM 事件

为了使得DOM文档支持交互，DOM定义了事件模型及相关操作（监听和触发）。所有的节点对象都支持EventTarget接口，主要包括三个实例方法

  • addEventListener：绑定事件的监听函数
  • removeEventListener：移除事件的监听函数
  • dispatchEvent：触发事件

其他一些需要事件通信的浏览器内置对象（比如XMLHttpRequest、AudioNode、AudioContext）也支持该接口

事件声明写法一

  <button id="btn">click</button>
  <script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.addEventListener('click',function(){
      alert("hello wrold");
    },false)
    // btn.removeEventListener('click')
  </script>

事件声明写法二

  <button id="btn">click</button>
  <script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.οnclick=function(){
      alert("hello world");
    }
    // btn.οnclick= null
  </script>

事件声明写法三

  <button id="btn" onclick="alert('hello world')">click</button>

事件来源

  • 文档事件：指由于文档元素(document对象)的变化所引发的事件，如load、change、submit等
  • 窗口事件：指浏览器窗口(window对象)的变化所引发的事件，如load、resize、close等
  • 输入事件：指键盘、鼠标等所发出的事件，如keyup、keydown、click、mouseover等
  • 系统事件：指来自系统内部的事件，如定时器 http://www.runoob.com/js/js-timing.html
  • 程序调用：如对元素调用 HTMLElement.click() 方法，或者定义一些自定义事件，再使用 EventTarget.dispatchEvent()等

事件对象

希望制作一个鼠标特效（魔术棒），当鼠标移动时，该魔术棒也随之移动。 请问如何获知鼠标的当前位置座标?

  document.querySelector('body').addEventListener('mousemove', function(event){
    if( !event){event = window.event;}  // 兼容IE浏览器       
    console.log(event.clientX);
  }, false);

答案：当事件发生时，浏览器会将相关的环境信息(如鼠标座标)打包为一个事件对象，供开发者代码在事件处理函数中使用

示例：动态CRUD

利用DOM和DOM事件实现了表格元素的动态增删改

示例： 可编辑的表格

this 引用

<td onclick='ChangeCell(this);'>栏目一数据1</td>

this 是什么？

javascript中获取某节点或元素的三类编程模式

  • 使用 id 等选择器直接获取节点元素，绝对模式，编辑时
  • 使用 this 获取当前对象的引用(即指向某个节点元素)，上下文模式，编译时
  • 使用 event.target 事件对象的属性来获取当前事件关联的元素，交互模式，运行时

关于焦点：窗口与文档

当用户输入的信息错误或为空时，请观察：使用弹出框窗口提示和使用页面元素信息提示的区别！

  • alert()函数弹出的是一个窗口window，它与浏览器自身的窗口属于同级（都是由操作系统管理），两者之间将展开对输入焦点的竞争，难以被页面脚本代码所控制，从而使得焦点无法回到表单控件输入框
  • <div class="info">error!</div> 则属于文档元素，不涉及对焦点的争夺

在Web前端应用中，尽量使用文档元素来构建各类UI元素，从而拥有较自由的控制

一些兼容性问题

IE的兼容性问题: event

if( !event){  
  event = window.event;
  event.target = event.srcElement;
  event.layerX = event.offsetX;
  event.layerY = event.offsetY;
}

firefox的兼容性问题： blue bug

setTimeout(function() {elem.focus();}, 5000);

参考

高级

results matching ""

    No results matching ""