您的位置：首页 > Web前端 > JavaScript

js事件

2016-04-08 11:13 399 查看

/**
* 事件
*/
/**事件流
* 1、事件冒泡 IE事件流叫事件冒泡 event bubbling 即由具体到不具体
* 2、事件捕获 从最不具体到具体 Safari chrome opera Firefox都支持事件捕获
* 3、DOM事件流 包含三个阶段：
*  （1）事件捕获阶段
*  （2）处于目标阶段
*  （3）事件冒泡阶段*/

/**
* 事件处理程序或者事件监听器
* 事件定义：事件就是用户或者浏览器自身执行的某种动作 如click load。。。
* 1、HTML事件处理程序 就是在HTML元素中调用JavaScript
*    使用缺点：（两个）
*         HTML与JavaScript代码紧密耦合，如果要更换事件处理程序，就要改动两个地方 HTML代码和JavaScript代码
*         (自己发现的bug：当用HTML事件时 用原生的
*              window.onload = function(){
*                  var handleFunc = function(){alert("这是HTML事件！");}
*               }加载完在执行时会报错),所以尽量不要使用HTML事件流
*              比如：eventUtils.html:10 Uncaught ReferenceError: handleFunc is not defined)
* 2、DOM0级事件处理程序 就是将一个函数赋值给一个事件处理程序属性
*    使用前提首先必须取得一个要操作的对象引用
*    使用优点：（两个）
*          简单 具有跨浏览器的优势
*    注意点：
*          制定事件事件处理程序时，在这一段运行以前不会制定事件处理程序，因此如果这些代码在页面中位于
*              按钮后面，就有可能在一段事件内怎么单击都没有反应。
*          使用DOM0级方法指定的事件处理程序被认为是元素的方法，在这时候的事件处理程序时在元素的作用域
*              中运行，也就是说程序中的this引用当前元素
*          这种方式添加事件处理会在事件流的冒泡阶段处理。
*    取消DOM0级事件方法：
*          将事件程序属性值设计为null
*          如：btn.onclick = null;单击按钮将不会有任何动作发生
*
*   (自己发现的bug:
*        window.onload = function(){
var handleFunc = function(msg){
alert(msg);
}

//DOM0事件
var btn = document.getElementById("btn0");
btn.onclick = handleFunc("这是DOM0级事件！");//当使用这个调用函数时，文档加载的过程中就会
执行一次handleFunc函数，再次点击事件时没有函
数没有响应，也不会报错。所以使用DOM0级事件时
并要调用函数时尽量把要调用的函数写在事件中如：
btn.onclick = function(){alert("这是DOM0级事件！");}
};
*   )
*   3、DOM2级事件处理程序 定义了两个事件 addEventListener()和removeEventListener()方法
*      优点：所有的DOM节点都包含两个方法并且都接受3个参数即 要处理的事件名 作为事件处理城西的函数 一个布尔值
*            可以添加多个事件处理程序
*      最后一个布尔值 若是true表示捕获阶段调用事件处理程序
*                     若是false表示冒泡阶段调用事件处理程序，一般情况下都是把事件程序调价到事件流的冒泡阶段，
*                          这样可以最大限度兼容各种浏览器
*      注意点：当使用removeEventListener()删除事件处理程序时，函数的三个参数都要一样，否则不能删除事件处理程序。
*              因为removeEventListener()和addEventListener()的第二个函数要是各自自己写的话这两个函数就是不同的函数
*              所以一般使用方式为：
*              addEventListener(event,handle,false);
*              removeEventListener(event,handle,false);把handle函数抽出来单独写。
* */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript" src="eventUtils.js"></script>
</head>
<body>
<div id="event">
<input type="button" value="html事件" onclick="handleFunc('这是HTML事件！')" /><!--HTML事件--> <!--handleFunc执行时会报错 -->
<!-- eventUtils.html:10 Uncaught ReferenceError: handleFunc is not defined-->
<input type="button" value="DOM0事件" id="btn0" />
<input type="button" value="DOM2事件" id="btn2" />
</div>
<script type="text/javascript">
window.onload = function(){
var handleFunc = function(msg){
alert(msg);
}
var handleDOM2 = function(){
alert("dom2级事件！");
}

//DOM0事件
var btn = document.getElementById("btn0");
//btn.onclick = handleFunc("这是DOM0级事件！");//不要这样调用，否则会出错并且文档加载中会自动执行一次handleFunc函数
btn.onclick = function(){
handleFunc("这是DOM0级事件！");
}

//DOM2级事件
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", handleDOM2, false);
btn2.removeEventListener("click", handleDOM2, false);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航