让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件处理程序</title>
<script>
/*
click,load,mouseover等式事件的名字
事件处理程序（或事件侦听器）：响应某个事件的函数，以“on”开头
例如，click事件的事件处理程序是onclick，load事件的事件处理程序是onload
1，HTML事件处理程序（见下）
2，DOM0级事件处理程序（见下）
3，DOM2级事件处理程序（见下）
4，IE事件处理程序（见下）
5，跨浏览器的事件对象（见下）
*/
// 1，HTML事件处理程序
// 某个元素支持的每种事件，都可以使用一个与相应时间处理程序同名的HTML特性来指定
// 特性的值不能使用未经转义的HTML语法字符，而应该如下写
// <input type="text" name="" id="" οnclick="alert("clicked")">
// <input type="text" name="" id="" οnclick="alert('clicked')">
// 在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面的其他地方定义的脚本或者外部脚本
// function sayHi(){
// alert('hihi');
// }
// 事件处理程序有权访问全局作用域中的任何代码
// 事件处理程序有一些独到之处
// a, 会创建一个封装元素属性值的函数，该函数有一个“局部变量”event（事件对象）
// 在这个函数内部，this值等于事件的目标元素
// b, 这个函数扩展了作用域的方式，可以像访问局部变量一样访问document以及元素本身的成员
// function(){
// with(document){
// with(this){
// // 元素的属性值
// }
// }
// }
// 【注意】HTML中指定事件处理程序有3个缺点：
// 1, 存在时差问题
// 2, 作用域链在不同的浏览器中会导致不同的结果
// 3, HTML代码和JavaScript代码紧密耦合
// 2，DOM0级事件处理程序
// 传统方式：将一个函数赋值给一个事件处理程序属性（简单、跨浏览器）
// 使用JavaScript指定事件处理程序，必须首先取得一个要操作的对象的引用
// 每个元素（包括window, document）都有自己的事件处理程序属性，属性全部小写，onclick。
// 将属性的值设置成为一个函数，就可以指定事件处理程序
// 3，DOM2级事件处理程序
// 定义2个方法： addEventListener() and removeEventListener() --> 所有DOM节点都包含
// 接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值
// 布尔值：true --> 表示在捕获阶段调用事件处理程序
// fasle --> 表示在冒泡阶段调用事件处理程序
// 使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序
// 4，IE事件处理程序
// IE实现了2个与DOM类似的方法：attachEvent() and detachEvent()
// 接收2个参数： 事件处理程序名称和事件处理程序函数
// 通过attachEvent()添加的时间处理程序都会被添加到冒泡阶段
// 5，跨浏览器的事件对象（能力检测）
// 要保证处理事件的代码能在大多数浏览器下一致地运行，只需要关注冒泡阶段
// a, addHandler()：视情况分别使用DOM0级方法、DOM2级方法或者IE方法来添加事件 --> 属于EventUnit对象
// b, removeHandler()：移除之前添加的事件处理程序 --> 默认采用DOM0级
// 接收3个参数：要操作的元素、事件名称和事件处理程序函数
</script>
<!-- <input type="text" name="" id="" onclick="alert("clicked")"> -->
<input type="button" name="" id="" value="click me!" onclick="sayHi();">
<!-- 通过event对象，可以直接访问事件对象，这个对象不用自己定义，也不用从函数的参数列表中读取 -->
<input type="button" name="" id="" value="click me2221!" onclick="alert(event.type);"> <!-- 输出click，即事件名-->
<!-- 在这个函数内部，this值等于事件的目标元素 -->
<input type="button" name="" id="" value="click me22!" onclick="alert(this.value);">
<input type="button" name="" id="" value="click me22!" onclick="alert(this.type);">
<!-- 【总结】开发人员多使用JavaScript指定事件处理程序！！！ -->
<br>
<!-- 将属性的值设置成为一个函数，就可以指定事件处理程序 -->
<!-- <button id="myBtn">点我吧！</button> -->
<!-- <script>
var btn = document.getElementById('myBtn');
btn.onclick = function(){
alert('你好吗？？');
}
</script> -->
<!-- DOM0级事件处理程序被认为是元素的方法。这时候的事件处理程序是在元素的作用域中运行的，
所以，程序中的this引用当前元素 -->
<!-- 这种方式添加的事件处理事件会在事件流的冒泡阶段被处理 -->
<!-- <script>
var btn = document.getElementById('myBtn');
btn.onclick = function () {
alert(this.id); // 'myBtn'
}
</script> -->
<!-- 删除通过DOM0级方法指定的事件处理程序 -->
<!-- <script>
btn.onclick = null; // 点击按钮不会有任何动作发生
</script>
-->
<br>
<!-- DOM2级事件处理程序 -->
<!-- <button id="myBtn1">click12</button> -->
<script>
// var btn = document.getElementById('myBtn1');
// 使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序
// btn.addEventListener('click', function () {
// alert(this.id);
// }, false);
// btn.addEventListener('click', function () {
// alert('hello world');
// }, false);
// 这些事件处理程序按他们添加的顺序执行的！！！
// 使用DOM2级方法添加事件处理程序只能用removeEventListener()来移除
// 移除时传入的参数与添加时的参数必须一样
// 而通过addEventListener()添加的匿名函数将无法移除
// btn.removeEventListener('click', function () {
// alert(this.id);
// }, false);
// 无法移除该事件，why?
// --> 传入removeEventListener()的函数与addEventListener()中的函数是一个完全不同的函数
// 更改如下！！！
// var handler = function(){
// alert(this.id);
// }
// btn.addEventListener('click', handler, false);
// btn.removeEventListener('click', handler, false);
// 【总结】大多数情况下，都把事件处理程序添加到事件流的冒泡阶段，为了最大限度地兼容各种浏览器
// 最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段
</script>
<!-- 4，IE事件处理程序 -->
<!-- <button id="IEBtn">IE按钮</button> -->
<script>
// var IEBtn = document.getElementById('IEBtn');
// btn.attachEvent('onclick',function(){
// alert('i am IE button!');
// })
// 在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域
// 使用attachEvent()方法的情况下，时间处理程序会在全局作用域中运行，因此this等于window
// btn.attachEvent('onclick',function(){
// alert(this == window); // true
// })
// attachEvent()也可以用来为一个或者多个元素添加事件处理程序
// 此时，这些事件处理程序并不是按他们添加的顺序执行的，而是相反顺序执行
// 同样地，detachEvent()的使用类似于removeEventListener()方法
</script>
<!-- 5，跨浏览器的事件对象（能力检测） -->
<input type="button" id="kuaBtn" name="" id="" value="dianwo">
<script>
var EventUtil = {
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type] = handler; // DOM0级方法（在现代浏览器中应该不会执行这里的代码）
}
},
removeHandler:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type] = null;
}
}
};
var btn = document.getElementById('kuaBtn');
var handler = function(){
alert('kuaBtn');
}
EventUtil.addHandler(btn, 'click', handler);
// EventUtil.removeHandler(btn, 'click', handler);
</script>
</head>
<body>
</body>
</html>
4041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
