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

js事件

2016-04-08 11:13 381 查看
/**
* 事件
*/
/**事件流
* 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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: