javascript的事件处理

简介: 原文:javascript的事件处理    首先了解一下什么是事件?事件是web浏览器通知应用程序发生了什么事情。我们可以通过一些方式注册事件用来监听一些我们需要处理的事件。事件包含一下一些属性:     事件类型:用来说明是什么类型事件的字符串     事件处理程序:监听了某个事件想让他做的事情     事件对象:特定的事件类型,有不同的属性     事件传播:一般情况下是会经历捕获->目标对象->冒泡的过程,IE8之前的浏览器不支持事件捕获       下面简单介绍一下事件有哪些类型,文档加载和准备就绪事件、鼠标事件、鼠标滚轮事件、拖放事件、键盘事件和文本输入事件。
原文: javascript的事件处理

    首先了解一下什么是事件?事件是web浏览器通知应用程序发生了什么事情。我们可以通过一些方式注册事件用来监听一些我们需要处理的事件。事件包含一下一些属性:
    事件类型:用来说明是什么类型事件的字符串
    事件处理程序:监听了某个事件想让他做的事情
    事件对象:特定的事件类型,有不同的属性
    事件传播:一般情况下是会经历捕获->目标对象->冒泡的过程,IE8之前的浏览器不支持事件捕获
 
    下面简单介绍一下事件有哪些类型,文档加载和准备就绪事件、鼠标事件、鼠标滚轮事件、拖放事件、键盘事件和文本输入事件。随着web平台的发展,事件集合越来越大,这些新的事件主要来自:html5规范和移动设备的触摸和手势事件。
 
    介绍了事件有哪些类型之后,接着我们聊聊注册事件处理程序。我们知道注册事件处理程序有两种基本方式:第一种出现在web初期,给事件目标对象或文档元素设置属性(0级事件模型);第二种方式是将事件处理程序传递给对象或者是元素(2级事件模型)。
 
    0级事件模型:
    
//直接写在属性里
    <button id="btn" onclick="alert('click me')">clicke me</button>
    //通过JS绑定到元素上
    document.getElementById('btn').onclick = function() {
          alert('click me');
     }
 

  

2级事件模型
function clickHandler = function () {
        alert('click me');
    }
    //非IE浏览器
    
/*
        参数说明:第一个参数是事件类型,第二个参数是处理程序,第三个参数是是否在捕获阶段执行
        阻止事件传播:Event.stopPropagation();
        阻止默认事件:Event.preventDefault();
    */
    document.getElementById('btn').addEventListener('click', clickHandler, false );    //注册
    document.getElementById('btn').removeEventListener('click', clickHandler, false );    //清除
    
    //IE浏览器
    /*
        参数说明:第一个参数是事件类型,第二个参数是处理程序;由于IE不支持捕获,所以没有第三个参数
         阻止事件传播:window.event.cancleBuble();
         阻止默认事件:window.event.returnValue = false;
    */
   document.getElementById('btn').attachEvent('onclick', clickHandler);    //注册
   document.getElementById('btn').detachEvent('onclick', clickHandler);    //解除
    注:
    1.虽然所有的事件都受事件传播的捕获阶段的支配但并非所有事件都冒泡;一般来说原始输入事件冒泡,高级语义事件不冒泡(blur、focus)
    2.addEventListener注册的事件是由顺序的,attachEvent无顺序
 
    利用event.target和冒泡可以实现事件代理。
目录
相关文章
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 算法
|
3月前
|
JavaScript
|
20天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
10 0
|
22天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
19 1
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
15 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
21 3
|
1月前
|
JavaScript
js事件记录(如有更新请留言我去补充)
js事件记录(如有更新请留言我去补充)