DOM事件

href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，
而void(0)表示一个空的方法，也就是不执行js函数。

<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 <a href="#">点击</a> 点击后会回到网面顶部

"＃"其实是包含了位置信息，例如默认的锚点是＃top 也就是网页的上端

=======搜狗shijian(事件)==========

</style>
</head>
<body>
<button id="btn">点击我</button>

<div id="container">祖父
<div id="parent">父亲<div id="sp">孙子</div></div>
</div>
<script>
/**
* 1，事件对象 button
* 2，事件对象绑定一个事件类型
* 3，事件句柄(类似函数体，即事件执行的过程)
*/
/*IE使用：
target.attachEvent(type,listener); //绑定函数 listener /'lɪs(ə)nə/ 监听器听众
target.detachEvent(type,listener) ;//移除绑定
DOM使用：
target.addEventListener(type, fnHandler, bCapture); //绑定函数 Capture /'kæptʃə/ 捕获
target.removeEventListener(type, fnHandler, bCapture); //移除绑定*/
/**
* 三种事件绑定方式：
* 1，直接在HTML标签中写JS代码缺点：
* a,强耦合，强制把JS代码和HTML代码合并在一起。不利于代码复用。
* b,内容与行为没有分离。
* 2，DOM0级事件，事件对象的属性(事件类型)添加绑定事件。
* a,优点：松耦合，即：html代码和js代码分离(内容与行为分离)
* b,缺点：有且只能绑定一个事件类型。(后面绑定的事件会覆盖之前的事件对象)
* 3，DOM2级事件，通过addEventListener("事件类型",function(){})绑定事件
* a,优点：松耦合，即：内容与行为分离。
* b,优点：可以绑定多个事件
* c,优点：事件捕获和事件冒泡
*/

//----在HTML标签中直接绑定JS代码执行----
//另外两种绑定方式：
//<button id="btnClick" onclick="alert('love');">btnClick</button>
//<body onload="init()">...</body>
/*<button id="btnClick" onclick="clickYou();">clickYou</button>
function clickYou(){
alert("clickYou");
}
缺点：违反了“内容与行为相分离”的原则，应尽量可能少用。
*/

//----btn.addEventListener("事件类型",function(){})----
//----称做DOM0级事件----
/*var btn=document.getElementById("btn");
btn.onclick=function(){
alert("称做DOM0级事件");
}*/

/*var btn=document.getElementById("btn");
var btnOnclick=function(){
alert("称做DOM0级事件");
}
btn.onclick=btnOnclick;*/

/*var btn=document.getElementById("btn");
function btnOnclick_1(){
alert("称做DOM0——1级事件");
}
function btnOnclick_2(){
alert("称做DOM0——2级事件");
}
btn.onclick=btnOnclick_1;
//DOM0级事件有且只能绑定一个事件，如果绑定多个事件，最后一个事件会覆盖之前所有事件。
btn.onclick=btnOnclick_2;*/
//btn.onclick=btnOnclick_2();函数名称后面直接跟上()，则页面运行立马执行函数。

//----btn.addEventListener("事件类型",function(){})----
//----称做DOM2级事件----

//因为网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件，而不仅仅是表单元素。比方说，在用户点击某按钮时产生一个 onClick 事件来触发某个函数。值得注意的是：事件通常与函数配合使用，当事件发生时函数才会执行。

//方法一：
/*var btn=document.getElementById('btn');
btn.addEventListener("click", function(){//点击包括：鼠标按下--抬起，整个动作完成才执行。
alert("称做DOM2级事件");
})
btn.addEventListener("mouseup",function(){//抬起时触发事件在先
alert("DOM2级事件可以绑定多个事件，这是第二个事件");
})*/

//方法二：
//使用匿名函数进行声明时，匿名函数一定要写在调用之前。
/*var btn=document.getElementById('btn');
var clickme=function(){
alert("称做DOM2级事件");
}
btn.addEventListener("click", clickme);*/

//方法三：
//DOM2级事件：支持IE9以及IE9以上的浏览器
//（1）绑定事件：addEventListener(event,fn,false/true);
//（2）解绑事件：removeEventListener(event,fn,false/true);
//如果是自定义函数，则不论事件监听放在哪里都是可以调用的。
//btn.addEventListener("事件类型",function(){},boolean);
//事件类型：click等
//function(){} 事件句柄
//boolean true:进行事件冒泡或事件捕获 false:不进行事件冒泡和事件捕获
/*var btn=document.getElementById('btn');
btn.addEventListener('click',clickme);
function clickme(){//自定义函数
alert('称做DOM2级事件');
}*/

/*JavaScript 中，定义函数时用 var foo = function () {} 和 function foo() 有什么区别
1，var FUNCTION_NAME = function() { FUNCTION_BODY };
编译后变量声明FUNCTION_NAME 会“被提前”了，但是他的赋值（也就是FUNCTION_BODY）并不会被提前。
所以，声明必须放在调用之后。
2，function FUNCTION_NAME () { FUNCTION_BODY };
自定义函数声明和赋值在一起，所以一起前置。也就是说函数声明过程在整个程序执行之前的预处理就完成了，所以只要处于同一个作用域，就可以访问到，即使在定义之前调用它也可以。
*/

//onmousedown：某个鼠标按键被按下时触发事件
//onkeypress：某个键盘的键被按下或按住时触发事件
//onchange：用户改变域的内容改变时触发事件
//onfocus: 获得焦点后产生的事件
//onblur：元素失去焦点触发事件

//-------removeEventListener()---------
//-------接触指定事件的绑定---------
/*var fn=function(){
alert("称做DOM2级事件");
}
var btn=document.getElementById('btn');
btn.addEventListener("click",fn,false);
//接触事件绑定：必须三个参数一模一样，且事件句柄函数不能使用匿名函数，默认值false表示不进行事件捕获和事件冒泡
btn.removeEventListener("click",fn,false);*/

//-------attachEvent()---------
//-------IE10以及IE10以下浏览器支持。 IE9,IE10同时支持attachEvent和addListener---------
//btn.attachEvent("onclick",function(){}) 注意点：
//1，只要两个参数
//2，这里的事件类型，前面必须加on,如：onclick,onmouseover等，而addEventListener却不要加on。
//3，属于DOM2级事件，可以绑定多个事件
//4，btn.detachEvent("onclick",function(){}) 移除btn事件句柄，并不是移除该事件。
//且想要成功移除，里面的两个函数必须一模一样。
/*var btn=document.getElementById("btn");
var fn1=function(){
alert("属于DOM2级事件，可以绑定多个事件。1")
}
btn.attachEvent("onclick",fn1);
var fn2=function(){
alert("属于DOM2级事件，可以绑定多个事件。2")
}
btn.attachEvent("onclick",fn2);*/
//-----detachEvent()-----
/*var btn=document.getElementById("btn");
var fn2=function(){
alert("属于DOM2级事件，可以绑定多个事件。2");
}
btn.attachEvent("onclick",fn2);//绑定onclick事件
btn.detachEvent("onclick",fn2);//移除指定对象的指定事件*/

//此外，在IE10及IE10以下任何函数内的this都表示window。如下：
//attachEvent("事件类型",function(){})事件绑定
/*var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(){
alert(this===window);//返回true。
})
//自定义函数
function fn1(){
alert(this===window);
}
fn1();*/

//以下代码可以兼容所有浏览器的添加事件和删除事件。
/*var aa={
//添加事件 addEventListener() attachEvent()
//chrome firefox等主流浏览器
//IE8及以下浏览器
addEvent:function(element,type,fnHandler){
if (element.addEventListener) {
element.addEventListener(type,fnHandler,false);
}else{
element.attachEvent("on"+type,fnHandler);
}
},//这里的逗号千万别忘记了！！！

//删除事件 removeEventListener() detachEvent()
//chrome firefox等主流浏览器
//IE8以及以下浏览器
removeEvent:function(element,type,fnHandler){
if (element.removeEventListener) {
element.removeEventListener(type,fnHandler,false);
}else{
element.detachEvent("on"+type,fnHandler);
}
}
}
var btn=document.getElementById("btn");
var fnHandler=function(){//在使用移除事件时千万不能使用匿名函数进行定义fnHandler，否则是无法移除的。
alert("Love you!");
}
aa.addEvent(btn,"click",fnHandler);
aa.removeEvent(btn,"click",fnHandler);*/

//千万别使用下面方式删除事件句柄。
//使用匿名函数可以添加事件，但是匿名函数是无法删除事件句柄的。
/*aa.addEvent(btn,"click",function(){alert("不能使用匿名函数作为事件句柄")});
aa.removeEvent(btn,"click",function(){alert("不能使用匿名函数作为事件句柄")});*/

/*IE和DOM事件流的区别
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件，
冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)，
在IE8及以下的事件处理中，事件含有on，如onclick等。*/

//-----事件冒泡，第三个参数为false-------
var container=document.getElementById("container");
var parent=document.getElementById("parent");
var sp=document.getElementById("sp");
//点击sp时，事件触发顺序：sp > parent > container
//点击parent时，事件触发顺序：parent > container
//点击container时，事件触发顺序：container
container.addEventListener("click",function(){alert("这是祖父的"+this.id)},false);
parent.addEventListener("mouseup",function(){alert("这是父亲的"+this.id)},false);
sp.addEventListener("mouseup",function(){alert("这是孙子的"+this.id)},false);
//事件冒泡：sp < parent < container。每个子元素一直向上级每个父元素触发事件冒泡
//如果每一个都有绑定事件，那么点击孙子sp触发点击事件，
//会从孙子sp--parent--container---->>一直往上冒泡触发事件，直到html根元素。
//只要期间有任何一个父级元素有绑定事件，那么都会触发事件。
//如果sp和container有绑定事件，而parent没有绑定事件，点击sp的时候，container事件也会触发。
//其中同一个事件类型才可以触发冒泡,此外注意：鼠标事件按下有一系列动作，所以也可以看做是同一事件类型。

//-----事件捕获，第三个参数为true-------
//事件捕获和事件冒泡完全相反
/*var container=document.getElementById("container");
var parent=document.getElementById("parent");
var sp=document.getElementById("sp");
//点击sp时，事件捕获执行顺序：container > parent > sp
//点击parent时，事件捕获执行顺序：container > parent
//点击container时，事件捕获执行顺序：container
container.addEventListener("click",function(){alert("这是祖父的"+this.id)},true);
parent.addEventListener("click",function(){alert("这是父亲的"+this.id)},true);
sp.addEventListener("click",function(){alert("这是孙子的"+this.id)},true);*/
//click 整个过程：鼠标按下去完全松开才触发事件
//mouseup 整个过程：松开一瞬间就触发事件
//mousedown 整个过程：按下去就触发事件
//所以 click > mouseup click > mousedown
</script>
</body>
</html>
--------事件委托(事件冒泡原理)只支持IE9及以上浏览器--------
事件冒泡/事件捕获/事件委托
以下是根据事件冒泡原理进行的事件委托
事件委托：说白了就是在 fnHandler中添加一个event对象
使用event.target.id 取值
使用event.target.innerHTML 取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托(事件冒泡)</title>
</head>
<body>
<div>
<ul id="wrap">
<li id="one">11</li>
<li id="two">22</li>
<li id="three">33</li>
<li id="four">44</li>
<li id="five">55</li>
</ul>
</div>
<script>
var wrap=document.getElementById('wrap');
wrap.addEventListener("click",function(event){
/*alert(event.target.innerHTML);//返回的是点击对象的innerHTML
alert(event.target.id);//返回的是点击对象的id*/
switch(event.target.id) {
case "one":
alert("我爱你第一次！");
break;
case "two":
alert("我爱你第二次！");
break;
case "three":
alert("我爱你第三次！");
break;
case "four":
alert("我爱你第四次！");
break;
default:
alert("我爱你第五次！");
break;
}
},false);
</script>
</body>
</html>

============

事件绑定：
1，HTML直接事件绑定(效率低下，行为与结构不分离)
2，匿名函数btn.onclick=function(){}
3，自定义函数btn.onclick=isLock; isLock是函数，这里千万不能加()，如果加，那么页面加载就会执行该函数。

鼠标事件：
onload: 页面加载时触发
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfocus:获得焦点时触发
onblur:是去焦点时触发
onchange:域的内容改变时触发

onsubmit:表单确认按钮被点击时触发(相对于整个表单而言)
onmousedown:鼠标在元素上按下时触发
onmouseup:鼠标在元素上按下松开时触发
onmousemove:鼠标在元素上移动时触发
onresize:当浏览器窗口发生变化时触发
onscroll:当滚动条滚动时触发(对象可以是window,element)

window.onkeydown:键盘的键按下时触发
window.onkeyup:键盘的键按下松开时触发
window.onkeypress:键盘的键按下时触发

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML事件</title>
<style>
.lock{
width: 100px;
height: 30px;
line-height: 27px;
font-size: 16px;
text-align: center;
background: #00f;
color: #fff;
border-radius: 5px;
}
.unlock{
width: 100px;
height: 30px;
line-height: 27px;
font-size: 16px;
text-align: center;
background: #333;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>

<input type="button" value="弹窗" onclick="alert('直接使用脚本执行')"/>

<input id="btn" class="lock" type="button" value="锁定"/>
<script type="text/javascript">
/*function over(btn,color){
btn.style.backgroundColor=color;
}
function out(btn,color){
btn.style.backgroundColor=color;
}*/

//-----匿名函数事件-------
/*var btn=document.getElementById('btn');//获取btn对象
//这种方式btn.onclick=function(){}; 叫做匿名函数
//点击按钮时要执行匿名函数里面的脚本内容，匿名函数中一定要使用this，代替事件绑定的对象。否则报错
//第一种解决方法：判断this.className的值
btn.onclick=function(){
if (this.className=="unlock") {
this.value="锁定";//这里一定注意使用this代替btn,
this.className="lock";
}else{
this.value="解锁";
this.className="unlock"
}
}*/

//第二种使用匿名函数方法：根据this.value的值进行判断是否解锁
/*btn.onclick=function(){
if (this.value=="解锁") {
this.value="锁定";//这里一定注意使用this代替btn,
this.className="lock";
}else{
this.value="解锁";
this.className="unlock"
}
}*/

//-----调用自定义函数事件-------
/* var btn=document.getElementById('btn');//获取btn对象
//这种是调用自定义函数
btn.onclick=islock;//islock这是函数，不需要些后面小括号()，如果些了小括号，那么在网页加载时就立马会执行。千万别写小括号();
//点击按钮时执行islock()函数。
function islock(){
if (this.className=="unlock") {
this.value="锁定";//这里一定注意使用this代替btn,
this.className="lock";
}else{
this.value="解锁";
this.className="unlock"
}
}*/

</script>
</body>
</html>

=============
//onchange 事件一般适用于：select下拉列表 checkbox复选框 radio单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{width: height: 2000px;}
.wrap{padding: 60px;}
.left{float: left;}
.wrap:nth-child(1){display: none;}
#tip{margin-left:15px;color: red;}
#one{width: 300px;height:300px;background-color: #ff0;overflow: auto;}
</style>
<script>
/*window.onload=function(){
var wrap=document.getElementById('wrap');
var phone=document.getElementById("phone");
var tip=document.getElementById("tip");
//没有输入时隐藏提示信息
wrap.children[1].style.display="none";
// wrap.firstElementChild.style.display="block";
phone.onfocus=function(){
tip.style.display="block";
}
phone.onblur=function(){
//this.value.length返回的是长度，所以是number类型，判断的时候不要双引号：11
//isNaN(this.value)返回的是布尔值，所以值是false/true。千万别写成"false",这是字符串
if (this.value.length==11 && isNaN(this.value)==false) {
tip.innerHTML="显示对勾。";
}else{
tip.innerHTML="请输入有效手机号码";
}
}
}*/

//文档加载完成后执行以下匿名函数脚本。
/*window.onload=function(){
var bgcolor=document.getElementById("bgcolor");//获取下拉列表对象
bgcolor.onchange=function(){
// var color=this.value;//等于下面一句话
// 上下两句相等，下面表示：下拉列表bgcolor.options表示数组，
// bgcolor.selectedIndex 表示下拉列表bgcolor选中项的索引
// value表示选中项的值。
var color=bgcolor.options[bgcolor.selectedIndex].value;//等于
if (color=="") return//如果是空值，则不该变背景颜色，所以使用return阻止程序运行。一句话可以省略if结构语句。
//设置文档部分的背景样式的颜色
document.body.style.backgroundColor=color;
}
}*/

/**
* 鼠标在div中移动，按下，松开时触发的事件
* @return {[type]} [description]
*/
/* window.onload=function(){
var one=document.getElementById("one");
//鼠标在div中按下触发事件
one.onmousedown=function(){
console.log("我是onmousedown事件");
}

//鼠标在div中按下后松开触发事件
one.onmouseup=function(){
console.log("我是onmouseup事件");
}

//鼠标在div中移动时触发事件
one.onmousemove=function(){
console.log("我是onmousemove事件");
}
}*/

/**
* 浏览器窗口变化时触发的事件：window.onresize
* @return {[type]} [description]
*/
/*window.onload=function(){
window.onresize=function(){
console.log("我是浏览器窗口变化时触发的事件：wiondow.onresize");
}
}*/

/**
* 滚动条拖动事件window/ele.onscroll=function(){}
* @return {[type]} [description]
*/
window.onload=function(){
var one=document.getElementById("one");
//我是div滚动条滚动事件
one.onscroll=function(){
console.log("我是div滚动条事件：one.onscroll=function(){}");
}

//我是浏览器滚动条滚动事件
/* window.onscroll=function(){
console.log("我是window滚动条事件：window.onscroll=function(){}");
}*/
}

</script>
</head>
<body>
<div id="wrap">
<div class="left"><input id="phone" type="text" placeholder="请输入手机号码"/></div>
<div class="left" id="tip">请输入有效的手机号码</div>
</div>
<div id="wrap1">
<select name="bgcolor" id="bgcolor">
<option value="" selected>请选择</option>
<option value="#f00">红色</option>
<option value="#0f0">绿色</option>
<option value="#00f">蓝色</option>
<option value="#ff0">黄色</option>
<option value="#ccc">灰色</option>
</select>
</div>
<form action="">
<input type="button" value="submit" id="btn">
</form>
<div id="one">
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
</div>
</body>
</html>

=================

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>mouse</title>
<style type="text/css">
#container > div > #allow{color: red;font-weight: bold;}
#cc{display: none;}
</style>
</head>
<body>
<div id="container">
<div>您还可以输入：<span id="allow">30</span>/30个字。<span id="cc"></span></div>
<textarea name="" id="text" cols="30" rows="3" ></textarea>
</div>
<script type="text/javascript">
window.onload=function(){
/*var text=document.getElementById("text");//获取textarea文本域对象
var allow=document.getElementById("allow");//获取允许输入内容长度的对象
var total=30;//可输入字数为30个
//document.onkeydown 表示按键按下触发事件，这里的event是表示触发事件的对象
document.onkeydown=function(event){
//返回键盘按下键对应的键码
//console.log(even.keyCode);
//获取textarea文本域对象内容的长度，这里不是可以使用text.innerHTML,因为这里使用的value进行取值的，innerHTML的取值时两个标签之间的内容，textarea的值是写在value中的。和<input type="text" value="我爱你"></input>一样。
len=text.value.length;
//可输入30-已经输入内容的长度=剩于可输入内容的长度
var count=total-len;
//允许输入的长度不能小于0，小于0时就显示允许输入的长度为0. 在上面的文本域中设置：maxlength="30"，是限制可输入最长的长度。
if (count<0) {
allow.innerHTML=0;
}else{
allow.innerHTML=count;
}
}*/

/*var allow=document.getElementById("allow");//可输入字数长度对象
var text=document.getElementById("text");//文本域对象
document.onkeydown=function(){
var len=text.value.length;//获取已经输入内容的长度
var allowLen=30-len;//允许输入的长度。
if (allowLen<0) {//如果字数超过则要显示超过字数的提醒
allow.innerHTML=0;//如果字数超过30个，那么剩余可输入字数一直都是0.
var cc=document.getElementById("cc");//获得超过字数时的提醒对象
cc.style.display="inline-block";//字数超过，则显示cc对象提醒超过的字数
cc.innerHTML="您已经超出"+(allowLen*-1)+"个字。";//(allowLen*-1)负数乘以负一就是整数
}else{
allow.innerHTML=allowLen;//没有超过30字数时，显示剩余几个字数
}
}*/

//document.onkeydown 表示按键按下时触发,针对电脑所有统一按键都有效。
/*document.onkeydown=function(event){//event是触发事件的对象。
console.log(event.keyCode);//这里指的是哪个按键，输出按键键码。
}*/

//document.onkeyup 表示按键按下松开时触发,针对电脑所有统一按键都有效。
/*document.onkeyup=function(event){//event是触发事件的对象。
console.log(event.keyCode);//这里指的是哪个按键，输出按键键码。
}*/

//document.onkeypress 按下键盘按键时触发事件（只对字母和数字有效）
//onkeypress事件会在键盘按下时发生
//如果是在输入框中输入内容时，先弹出提示框再出现输入框中输入的文本
/*document.onkeypress=function(event){//event是触发事件的对象。
alert("111");//按下任意一个按键立马跳出窗口
console.log(event.keyCode);//这里指的是哪个按键，输出按键键码。
}*/

}
</script>
</body>
</html>

========搜狗shijian========

事件冒泡/捕获和 event属性兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托(事件冒泡)</title>
<style>
#parent{border:1px solid red;background: #ccc;height: 1500px}
#btn{border:1px solid #ff0;background: #0f0;margin: 100px;}
</style>
</head>
<body>
<div id="parent">
<button id="btn">按钮</button>
<a id="a" href="http://www.baidu.com">百度超链接</a>
</div>
<script>
var btn=document.getElementById('btn');

/*标准Event方法：
下列为DOM2级事件标准定义的方法，IE的事件模型不支持这些方法
initEvent() 初始化新创建的Event对象的属性
preventDefault() 阻止与事件关联的默认事件
stopPropagation() 阻止事件冒泡或者事件捕获*/

//----event----
//event是鼠标事件，而不是事件绑定对象
/*var btn=document.getElementById("btn");
function fn(event){
//返回鼠标事件：MouseEvent {isTrusted: true, screenX: 273, screenY: 240, clientX: 135, clientY: 68, …}
console.log(event);
console.log(typeof event);//返回 object类型
console.log(Boolean(event)); //true
alert("111");
}
btn.addEventListener("click",fn);*/

//----event.type----
/**
* 对于同一个事件对象绑定多个事件，可以只定义一个方法，
* 就是一个事件句柄：fnHandler
* @param object event [事件对象]
* @return {[type]} [description]
*/
/*function fnHandler(event){
if (event.type==="click") {
//返回: MouseEvent {isTrusted: true, screenX: 66, screenY: 138, clientX: 32, clientY: 17, …}
//在控制台中点击详细，可以查看各种event自带的各种属性：target,type,x,y等等
console.log(event);
alert("我被点击了");
}else if(event.type==="mouseout"){
alert("我被移出了按钮，触发事件");
}
}
btn.addEventListener("click",fnHandler);
btn.addEventListener("mouseout",fnHandler);*/

//----event.target/event.currentTarget----
/*var parent=document.getElementById("parent");
var btn=document.getElementById("btn");
var fnHandler=function(event){
if (event.currentTarent==="") {}
}*/

//事件绑定对象currentTarget是parent
/*parent.addEventListener("click",function(event){
console.log(event.currentTarget);//返回事件绑定的当前对象：<div id="parent">...</div>
//返回鼠标点击对象：如果点击parent对象，则返回parent对象：<div id="parent">...</div>
// 如果点击btn对象，则返回btn对象：<button id="btn">按钮</button>
console.log(event.target);
});*/

//这里事件绑定对象currentTarget是btn
/*btn.addEventListener("click",function(event){
console.log(event.currentTarget);//返回事件绑定的对象：<button id="btn">按钮</button>
console.log(event.target);//返回鼠标点击的对象：<button id="btn">按钮</button>
});*/

//----event.preventDefault----
//阻止与绑定事件相关的默认事件的触发
//console.log(e.preventDefault);//返回一个空函数：ƒ preventDefault() { [native code] }
//console.log(typeof e.preventDefault)//返回类型是：function 函数类型
//console.log(Boolean(e.preventDefault));//经过Boolean转换(也叫隐式转换)，返回true.
/*var a=document.getElementById("a");
a.addEventListener("click",function(event){
event.preventDefault();
console.log(event.preventDefault());//返回：undefined
alert("event.preventDefault()是阻止绑定对象的默认行为，不会跳转到百度网页");
})*/

//----event.stopPropagation----
//console.log(e.stopPaopagation);//返回一个空函数：ƒ stopPaopagation() { [native code] }
//console.log(typeof e.stopPaopagation)//返回类型是：function 函数类型
//console.log(Boolean(e.stopPaopagation));//经过Boolean转换(也叫隐式转换)，返回true.
//阻止当前对象事件向上冒泡事件或者捕获事件
//阻止事件冒泡或者事件捕获的发生，写在被点击对象中
//propagation /,prɒpə'ɡeɪʃən/ 传播
/*var parent=document.getElementById("parent");
var btn=document.getElementById("btn");
parent.addEventListener("click",function(event){
alert("当前点击parent,阻止事件冒泡/事件捕获的方法event.stopPropagation()");
})
btn.addEventListener("click",function(event){
alert("当前点击btn,只触发当前点击对象，阻止冒泡事件/事件捕获的发生，event.stopPropagation()")
event.stopPropagation();//阻止当前事件向上冒泡。
})*/

//----event.clientY,event.pageY,event.screenY----
//event.clientY 表示：浏览器文档顶部到鼠标点击位置的垂直距离(不计算滚动条的滚动距离)
//event.pageY 表示：浏览器文档顶部到鼠标点击位置的垂直距离(计算滚动条的滚动距离)
//event.screenY 表示：设备屏幕顶边到鼠标点击位置的垂直距离
//如果不存在滚动条，那么event.clientY等于event.pageY
/*var parent=document.getElementById("parent");
parent.addEventListener("click",function(event){
alert("clientY:"+event.clientY+",event.pageY:"+event.pageY+",event.screenY:"+event.screenY);
})*/

//====以下是IE8以及以下浏览器的Event事件处理=====
//----event.srcElement----
//返回被点击的对象。
//类似于addEventListener()中的event.target
/*var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(event){
console.log(event.srcElement.id);//返回被点击对象:#btn
})*/

//----event.type----
/*var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(event){
alert("IE8浏览器中的event.type:"+event.type);//返回:click
})*/

//----event.returnValue=false----
//阻止与绑定事件相关的默认事件的触发类似于addEventListener中的event.preventDefault();
/*var a=document.getElementById("a");
a.attachEvent("onclick",function(event){
event.returnValue=false;//这里是阻止点击事件发生时，超链接又跳转到百度网页
alert("event.valueReturn:"+event.returnValue);
})*/

//---- event.cancelBubble = true ----
//阻止事件冒泡或事件捕获
//类似于addEventListener()的event.stopPropagation()
/*var parent=document.getElementById("parent");
var btn=document.getElementById("btn");
parent.attachEvent("onclick",function(event){
alert("我是parent事件");
})
btn.attachEvent("onclick",function(event){
alert("我是btn事件");
event.cancelBubble=true;//阻止事件冒泡或事件捕获
})*/

/*自己写的阻止冒泡捕获事件的兼容所有浏览器*/
/*var parent=document.getElementById("parent");
var btn=document.getElementById("btn");
function fnHandler(event){
if (event.target) {
event.stopPropagation();//主流浏览器阻止事件冒泡或者事件捕获
alert(event.target.id+"阻止事件冒泡或者事件捕获");
}else{
event.cancelBubble=true;//阻止事件冒泡或者事件捕获
alert(event.srcElement.id+"阻止事件冒泡或者事件捕获");
}
}
function common(element,type,fnHandler){
//事件添加
//主流浏览器
if (element.addEventListener) {
element.addEventListener(type,fnHandler);
}else{//IE8及以下浏览器
element.attachEvent("on"+type,fnHandler);
}
}
common(parent,"click",fnHandler);
common(btn,"click",fnHandler);*/

/**
* 创建一个变量a, 并给a赋值；{}是一个空的对象，是 new Object();的简写。
* var a={"a":"1","b":"2","c":"3"};可以看做是一个对象，里面都是a对象的属性及属性值。
* 可以使用a.a 或者 a["a"]进行取值。
*/
var eventUtil={
/**
* 添加事件
* 1，IE8及其以下浏览器支持：event.attachEvent(...)
* 2，chrome等主流浏览器支持：event.addEventListener(...)
* @param {object} element HTML对象
* @param {string} type 事件类型
* @param {函数} fnHandler 事件句柄
*/
addHandler:function(element,type,fnHandler){
if (element.addEventListener) {
element.addEventListener(type,fnHandler);
}else if(element.attachEvent){
element.attachEvent("on"+type,fnHandler)
}
},
/**
* 删除句柄
* 1，IE8及以下浏览器支持：event.detachEvent
* 2，chrome等其他主流浏览器支持：event.removeEventListener
* @param {object} element html对象
* @param {string} type 事件类型
* @param {函数对象} fnHandler 事件句柄
*/
removeHandler:function(element,type,fnHandler){
if (element.removeEventListener) {
element.removeEventListener(type,fnHandler)
}else if (element.detachEvent) {
element.detachEvent("on"+type,fnHandler);
}
},
/**
* 分为两派浏览器
* 1，IE8及以下浏览器支持event.srcElement
* 2，其他主流浏览器支持event.target
* @param {object} event 鼠标事件对象，而不是事件绑定对象
* @return {boolean} 返回true的一个对象
*/
getTarget:function(event){
return event.target || event.srcElement;//返回true的一个
},
/**
* 阻止与事件相关的默认操作
* 1，IE8及其以下浏览器支持：event.returnValue=false
* 2，chrome等主流浏览器支持：event.stopPropagation()
* @param {object} event 鼠标事件对象，而不是事件绑定对象
* @return {[type]} [description]
*/
preventDefault:function(event){
//console.log(e.preventDefault);//返回一个空函数：ƒ preventDefault() { [native code] }
//console.log(typeof e.preventDefault)//返回类型是：function 函数类型
//console.log(Boolean(e.preventDefault));//经过Boolean转换(也叫隐式转换)，返回true.
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},
/**
* 阻止事件冒泡或事件捕获
* 1，IE8及其以下支持：event.returnValue=false;
* 2，chrome等主流浏览器支持：event.stopPropagation();
* @param {[type]} event [description]
* @return {[type]} [description]
*/
stopPropagation:function(event){
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
/**
* 事件句柄
* @param {object} event 鼠标事件对象
* @return {alert弹窗} alert弹窗
*/

/*function fn(event){
//实例化eventUtil对象
var target=new eventUtil.getTarget(event);
console.log(target);
}
var parent=document.getElementById("parent");
var btn=document.getElementById("btn");
//子元素父元素同时绑定click，点击子元素会触发事件冒泡
eventUtil.addHandler(parent,"click",fn);
eventUtil.addHandler(btn,"click",fn);*/

var parent=document.getElementById("parent");
//给parent添加事件，下面的event是鼠标事件对象，而不是事件绑定对象
eventUtil.addHandler(parent,"click",function(event){
console.log("parent被触发");
});

var btn=document.getElementById("btn");
//给btn添加事件，下面的event是鼠标事件对象，而不是事件绑定对象
eventUtil.addHandler(btn,"click",function(event){
console.log("btn被触发");
//实例化eventUtil对象，调用阻止冒泡事件
var stopPropagation=new eventUtil.stopPropagation(event);
});

//给超链接a添加事件，下面的event是鼠标事件对象，而不是事件绑定对象
eventUtil.addHandler(a,"click",function(event){
//实例化eventUtil对象，调用阻止与事件相关的默认事件的触发。
var preventDefault=new eventUtil.preventDefault(event);
});
</script>
</body>
</html>

事件冒泡/捕获和 event属性兼容性

<!DOCTYPE html>

<head>

<style>

#parent{border:1px solid red;background: lightyellow;height: 1500px}

#btn{border:1px solid #ff0;background: #0f0;margin: 100px;}

</style>

</head>

<body>

<a id="a" href="http://www.baidu.com">百度超链接</a>

</div>

</ul>

var btn=document.getElementById('btn');

/*标准Event方法：

下列为DOM2级事件标准定义的方法，IE的事件模型不支持这些方法

initEvent() 初始化新创建的Event对象的属性

preventDefault() 阻止与事件关联的默认事件

stopPropagation() 阻止事件冒泡或者事件捕获*/

//----event----

//event是鼠标事件，而不是事件绑定对象

/*var btn=document.getElementById("btn");

function fn(event){

//返回鼠标事件：MouseEvent {isTrusted: true, screenX: 273, screenY: 240, clientX: 135, clientY: 68, …}

console.log(event);

console.log(typeof event);//返回 object类型

console.log(Boolean(event)); //true

alert("111");

}

btn.addEventListener("click",fn);*/

//----event.type----

/**

* 对于同一个事件对象绑定多个事件，可以只定义一个方法，

* 就是一个事件句柄：fnHandler

* @param object event [事件对象]

* @return {[type]} [description]

/*function fnHandler(event){

if (event.type==="click") {

//返回: MouseEvent {isTrusted: true, screenX: 66, screenY: 138, clientX: 32, clientY: 17, …}

//在控制台中点击详细，可以查看各种event自带的各种属性：target,type,x,y等等

console.log(event);

alert("我被点击了");

}else if(event.type==="mouseout"){

alert("我被移出了按钮，触发事件");

}

btn.addEventListener("click",fnHandler);

btn.addEventListener("mouseout",fnHandler);*/

//----event.target/event.currentTarget----

/*var parent=document.getElementById("parent");

var btn=document.getElementById("btn");

var fnHandler=function(event){

if (event.currentTarent==="") {}

}*/

//事件绑定对象currentTarget是parent

/*parent.addEventListener("click",function(event){

console.log(event.currentTarget);//返回事件绑定的当前对象：<div id="parent">...</div>

//返回鼠标点击对象：如果点击parent对象，则返回parent对象：<div id="parent">...</div>

// 如果点击btn对象，则返回btn对象：<button id="btn">按钮</button>

console.log(event.target);

});*/

//这里事件绑定对象currentTarget是btn

/*btn.addEventListener("click",function(event){

console.log(event.currentTarget);//返回事件绑定的对象：<button id="btn">按钮</button>

console.log(event.target);//返回鼠标点击的对象：<button id="btn">按钮</button>

});*/

//----event.preventDefault----

//阻止与绑定事件相关的默认事件的触发

//console.log(e.preventDefault);//返回一个空函数：ƒ preventDefault() { [native code] }

//console.log(typeof e.preventDefault)//返回类型是：function 函数类型

//console.log(Boolean(e.preventDefault));//经过Boolean转换(也叫隐式转换)，返回true.

/*var a=document.getElementById("a");

a.addEventListener("click",function(event){

event.preventDefault();

console.log(event.preventDefault());//返回：undefined

alert("event.preventDefault()是阻止绑定对象的默认行为，不会跳转到百度网页");

})*/

//----event.stopPropagation----

//console.log(e.stopPaopagation);//返回一个空函数：ƒ stopPaopagation() { [native code] }

//console.log(typeof e.stopPaopagation)//返回类型是：function 函数类型

//console.log(Boolean(e.stopPaopagation));//经过Boolean转换(也叫隐式转换)，返回true.

//阻止当前对象事件向上冒泡事件或者捕获事件

//阻止事件冒泡或者事件捕获的发生，写在被点击对象中

//propagation /,prɒpə'ɡeɪʃən/ 传播

/*var parent=document.getElementById("parent");

var btn=document.getElementById("btn");

parent.addEventListener("click",function(event){

alert("当前点击parent,阻止事件冒泡/事件捕获的方法event.stopPropagation()");

})

btn.addEventListener("click",function(event){

alert("当前点击btn,只触发当前点击对象，阻止冒泡事件/事件捕获的发生，event.stopPropagation()")

event.stopPropagation();//阻止当前事件向上冒泡。

})*/

//----event.clientY,event.pageY,event.screenY----

//event.clientY 表示：浏览器文档顶部到鼠标点击位置的垂直距离(不计算滚动条的滚动距离)

//event.pageY 表示：浏览器文档顶部到鼠标点击位置的垂直距离(计算滚动条的滚动距离)

//event.screenY 表示：设备屏幕顶边到鼠标点击位置的垂直距离

//如果不存在滚动条，那么event.clientY等于event.pageY

/*var parent=document.getElementById("parent");

parent.addEventListener("click",function(event){

alert("clientY:"+event.clientY+",event.pageY:"+event.pageY+",event.screenY:"+event.screenY);

})*/

//====以下是IE8以及以下浏览器的Event事件处理=====

//----event.srcElement----

//返回被点击的对象。

//类似于addEventListener()中的event.target

/*var btn=document.getElementById("btn");

btn.attachEvent("onclick",function(event){

console.log(event.srcElement.id);//返回被点击对象:#btn

})*/

//----event.type----

/*var btn=document.getElementById("btn");

btn.attachEvent("onclick",function(event){

alert("IE8浏览器中的event.type:"+event.type);//返回:click

})*/

//----event.returnValue=false----

//阻止与绑定事件相关的默认事件的触发类似于addEventListener中的event.preventDefault();

/*var a=document.getElementById("a");

a.attachEvent("onclick",function(event){

event.returnValue=false;//这里是阻止点击事件发生时，超链接又跳转到百度网页

alert("event.valueReturn:"+event.returnValue);

})*/

//---- event.cancelBubble = true ----

//阻止事件冒泡或事件捕获

//类似于addEventListener()的event.stopPropagation()

/*var parent=document.getElementById("parent");

var btn=document.getElementById("btn");

parent.attachEvent("onclick",function(event){

alert("我是parent事件");

})

btn.attachEvent("onclick",function(event){

alert("我是btn事件");

event.cancelBubble=true;//阻止事件冒泡或事件捕获

})*/

/*自己写的阻止冒泡捕获事件的兼容所有浏览器*/

/*var parent=document.getElementById("parent");

var btn=document.getElementById("btn");

function fnHandler(event){

if (event.target) {

event.stopPropagation();//主流浏览器阻止事件冒泡或者事件捕获

alert(event.target.id+"阻止事件冒泡或者事件捕获");

}else{

event.cancelBubble=true;//阻止事件冒泡或者事件捕获

alert(event.srcElement.id+"阻止事件冒泡或者事件捕获");

}

function common(element,type,fnHandler){

//事件添加

//主流浏览器

if (element.addEventListener) {

element.addEventListener(type,fnHandler);

}else{//IE8及以下浏览器

element.attachEvent("on"+type,fnHandler);

}

common(parent,"click",fnHandler);

common(btn,"click",fnHandler);*/

/**

* event /ɪ'vent/ 事件 util /ju'til/ 工具

* 创建一个变量a, 并给a赋值；{}是一个空的对象，是 new Object();的简写。

* var a={"a":"1","b":"2","c":"3"};可以看做是一个对象，里面都是a对象的属性及属性值。

* 可以使用a.a 或者 a["a"]进行取值。

var EventUtil={

/**

* 添加事件

* 1，IE8及其以下浏览器支持：event.attachEvent(...)

* 2，chrome等主流浏览器支持：event.addEventListener(...)

* @param {object} element HTML对象

* @param {string} type 事件类型

* @param {函数} fnHandler 事件句柄

addHandler:function(element,type,fnHandler){

if (element.addEventListener) {

element.addEventListener(type,fnHandler);

}else if(element.attachEvent){

element.attachEvent("on"+type,fnHandler)

}

/**

* 删除句柄

* 1，IE8及以下浏览器支持：event.detachEvent

* 2，chrome等其他主流浏览器支持：event.removeEventListener

* @param {object} element html对象

* @param {string} type 事件类型

* @param {函数对象} fnHandler 事件句柄

removeHandler:function(element,type,fnHandler){

if (element.removeEventListener) {

element.removeEventListener(type,fnHandler)

}else if (element.detachEvent) {

element.detachEvent("on"+type,fnHandler);

}

/**

* 仅仅适用于事件keypress类型，其他不适用

* @param {object} event 事件类型对象

* @return {[type]} [description]

getCharCode:function(event){

if (typeof event.charCode=="number") {

return event.charCode;

}else{

return event.keyCode;

}

/**

* 分为两派浏览器

* 1，IE8及以下浏览器支持event.srcElement

* 2，其他主流浏览器支持event.target

* @param {object} event 鼠标事件对象，而不是事件绑定对象

* @return {boolean} 返回true的一个对象

getTarget:function(event){

return event.target || event.srcElement;//返回true的一个

/**

* 阻止与事件相关的默认操作

* 1，IE8及其以下浏览器支持：event.returnValue=false

* 2，chrome等主流浏览器支持：event.stopPropagation()

* @param {object} event 鼠标事件对象，而不是事件绑定对象

* @return {[type]} [description]

preventDefault:function(event){

//console.log(e.preventDefault);//返回一个空函数：ƒ preventDefault() { [native code] }

//console.log(typeof e.preventDefault)//返回类型是：function 函数类型

//console.log(Boolean(e.preventDefault));//经过Boolean转换(也叫隐式转换)，返回true.

if (event.preventDefault) {

event.preventDefault();

}else{

event.returnValue=false;

}

/**

* 阻止事件冒泡或事件捕获

* 1，IE8及其以下支持：event.returnValue=false;

* 2，chrome等主流浏览器支持：event.stopPropagation();

* @param {[type]} event [description]

* @return {[type]} [description]

stopPropagation:function(event){

if (event.stopPropagation) {

event.stopPropagation();

}else{

event.cancelBubble=true;

}

/**

* 事件句柄

* @param {object} event 鼠标事件对象

* @return {alert弹窗} alert弹窗

/*function fn(event){

//实例化EventUtil对象

var target=new EventUtil.getTarget(event);

console.log(target);

}

var parent=document.getElementById("parent");

var btn=document.getElementById("btn");

//子元素父元素同时绑定click，点击子元素会触发事件冒泡

EventUtil.addHandler(parent,"click",fn);

EventUtil.addHandler(btn,"click",fn);*/

/* var parent=document.getElementById("parent");

//给parent添加事件，下面的event是鼠标事件对象，而不是事件绑定对象

EventUtil.addHandler(parent,"click",function(event){

console.log("parent被触发");

});

var btn=document.getElementById("btn");

//给btn添加事件，下面的event是鼠标事件对象，而不是事件绑定对象

EventUtil.addHandler(btn,"click",function(event){

console.log("btn被触发");

//实例化EventUtil对象，调用阻止冒泡事件

var stopPropagation=new EventUtil.stopPropagation(event);

});

//给超链接a添加事件，下面的event是鼠标事件对象，而不是事件绑定对象

EventUtil.addHandler(a,"click",function(event){

//实例化EventUtil对象，调用阻止与事件相关的默认事件的触发。

var preventDefault=new EventUtil.preventDefault(event);

});*/

//事件类型：UI事件焦点事件鼠标事件滚轮事件文本事件键盘事件合成事件变动事件

//====以下是UI事件====

//给windwo添加load事件

//window加载完成后才执行fn(e)事件句柄

//load 表示页面加载完成后

/*EventUtil.addHandler(window,"load",function(e){

alert("loaded!");

})*/

//var img=document.getElementById("img");

/**UI事件

* 给img对象添加load事件

* 表示img对象加载完成后才执行fn(e)事件

/*EventUtil.addHandler(img,"load",function(e){

alert("loaded!");

})*/

//先把创建的img加载完毕

/*var img=document.createElement("img");//创建图片对象

img.src="images/banner3.jpg";//设置img对象的属性及值

EventUtil.addHandler(img,"load",function(e){

var e=EventUtil.getTarget(e);//返回load事件发生的对象：img

console.log(e);

});

//上面图片已经加载完毕，再把已经加载好的图片添加到指定位置。

document.body.appendChild(img);*/

//预加载图片：类似创建一个图片对象在内存中，随时可以使用

//比如打开一个页面时，提前把页面中的图片全部下载下来，缓存到内存当中，

//要使用时，直接从内存中调用，这个过程就是图片预加载。

/*var image=new Image();//实例化图片对象,把图片缓存到内存中

console.log(image.src);//还没设置image.src的值，所以返回空。

//先把image对象缓存到内存中，成功才执行fn(event)

EventUtil.addHandler(image,"load",function(event){

alert("Image Loaded!");

})

//image对象缓存成功后才设置属性。所以属性设置放在后面。

image.src="images/banner3.jpg";

console.log(image.src);//返回： file:///D:/%E5%89%...

//使用内存中的缓存下来的图片对象。给parent的最后添加子元素。

document.getElementById("parent").appendChild(image);*/

//动态加载JS文件

var body=document.body;//获取body对象

var script=document.createElement("script");//创建script元素

script.type="text/javascript";//给script添加属性

//加载script成功后提示加载成功，或者进行其他操作。

EventUtil.addHandler(script,"load",function(event){

alert("这里用于提示script元素加载成功！也可以执行其他操作。");

//body.appendChild(script);在事件句柄里面进行DOM节点添加操作是错误的

})

script.src="js/jquery.js";//给加载成功的script对象设置属性。

//把新创建的script对象添加到文档中的body最后,js/jquery.js必须存在，否则报错。

//执行完可以审查元素，可以查看body的最后一个子元素就是script标签对象

//等价于手动添加：<script type="text/jquery" src="js/jquery.js">...

body.appendChild(script);*/

//动态添加css文件

/*var link=document.createElement("link");//创建link对象

var head=document.head;//获得head元素

link.type="text/css";//设置link对象的type属性

link.rel="stylesheet";//设置link对象的rel属性

//加载成功进行提示，也可以执行其他操作

EventUtil.addHandler(link,"load",function(event){

alert("link对象加载成功，也可以执行其他操作");

//head.appendChild(link);在事件句柄里面进行DOM节点添加操作是错误的。

})

link.href="css/index.css";//设置link对象的href属性，用于引入外联样式表

//把link对象添加到head子元素的最后，css/index.css必须存在否则报错

//执行完审查元素，可以查看head标签中的最后一个子元素就是link标签对象

//等价于手动添加：<link rel="stylesheet" type="text/css" href="css/index.css"></link>

//等价于：document.getElementsByTagName("head")[0].appendChild(link);

//把link对象添加到head的子元素最后

head.appendChild(link);*/

//unload事件

//用户从一个页面切换到另一个页面

//在IE浏览器切换版本的时候会触发：IE8切换到IE10会触发Unload事件

/*EventUtil.addHandler(window,"unload",function(event){

alert("在IE浏览器切换版本的时候会触发：IE8切换到IE10会触发Unload事件");

})

//resize事件

//浏览器窗口发生变化时触发,重复执行的，损耗性能

EventUtil.addHandler(window,"resize",function(event){

console.log("resize到底是什么，还需探讨");

})*/

//scroll事件

//当滚动条滚动时触发事件，重复执行的，损耗性能

/*EventUtil.addHandler(window,"scroll",function(event){

//scroll返回： ƒ scroll() { [native code] } 对象

console.log(document.documentElement.scroll);

//返回 function ，document是文档结构，documentElement是HTML根节点

//console.log(typeof document.documentElement.scroll);

//console.log(document.children[0]);//返回网页整个文档结构,可以通过document.body,document.getElementById()等取到指定节点

//console.log(document.documentElement.tagName);//说白了就是HTML根节点，是一个节点，可以通过document.firstElementChild/document.children[0]取得。

})*/

/*var text=document.getElementById("text");

var i=0;//用于计算获得焦点的次数

var j=0;

//获得焦点触发事件不支持冒泡

EventUtil.addHandler(text,"focus",function(event){

if (i===0) {//只获得一次焦点就不会触发该事件

alert("focus，只获得一次焦点触发事件后就失效了！");

}

i++;

})

//失去焦点触发事件

EventUtil.addHandler(text,"blur",function(event){

if (j===0) {

alert("blur,失去焦点触发只一次事件");

}

j++;

})*/

//focusin等同于focus focusout等同于blur

//只是focusin,focusout只支持IE5.5+

/*var text=document.getElementById("text");

EventUtil.addHandler(text,"focusin",function(event){

alert("focusout支持IE5");

})

EventUtil.addHandler(text,"focusout",function(event){

alert("focusout支持IE5");

})*/

//DOMFocusIn 等同于 focus(兼容所有浏览器)

//DOMFocusOut 等同于 blur(兼容所有浏览器)

//DOMFocusIn,DOMFocusOut只支持Opera浏览器

/*var text=document.getElementById("text");

EventUtil.addHandler(text,"DOMFocusIn",function(event){

alert("DOMFocusIn只支持Opear浏览器。");

})

EventUtil.addHandler(text,"DOMFocusOut",function(event){

alert("DOMFocusOut只支持Opear浏览器。");

})*/

//======以上都是UI事件======

//======以下鼠标事件======

//click,dblclick,mousedown,mouseup,mouseover,mouseout,mouseenter,mouseleave

/*var btn=document.getElementById("btn");

var parent=document.getElementById("parent");

// EventUtil.addHandler(btn,"click",function(event){console.log("click鼠标按下松开，单击事件")})

// 注意鼠标双击事件：dblclick 别写成 dbclick 少了一个l

// EventUtil.addHandler(btn,"dblclick",function(event){console.log("dbclick鼠标双击事件")})

EventUtil.addHandler(btn,"mousedown",function(event){

console.log("mousedown鼠标按下触发事件");

//主流浏览器中event.button显示如下：

//按鼠标左键，返回0 在IE8及其以下返回1

//按鼠标中键，返回1 在IE8及其以下返回4

//按鼠标右键，返回2 在IE8及其以下返回2

//IE8中鼠标左右键同时按返回3

console.log(event.button);

})*/

//EventUtil.addHandler(btn,"mouseup",function(event){console.log("mouseup鼠标松开触发事件")})

// mousedown+mouseup=click 鼠标按下事件+鼠标松开事件=鼠标单击事件

// EventUtil.addHandler(btn,"mousemove",function(event){console.log("mousemove鼠标在指定元素中移动时重复触发事件")})

//----mouseover,mouseout 和 mouseenter,mouseleave 的区别-----

//mouseover,mouseout 对于指定元素对象会触发，同事对子元素也会同时触发

//mouseenter,mouseleave 只对指定元素对象触发，对子元素无效。

//mouseover和mouseout 进入移出指定对象触发一次事件，此时如果进入子元素，那么会先出发：

//鼠标从父元素进入子元素：1，从父元素离开触发一次mouseout 2, 进入子元素触发一次mouseenter

//鼠标再从子元素进入父元素：1，从子元素离开触发一次mouseout 2，进入父元素触发一次mouseenter

/*EventUtil.addHandler(parent,"mouseover",function(event){console.log("mouseover鼠标进入指定元素时触发一次")})

EventUtil.addHandler(parent,"mouseout",function(event){console.log("mouseout鼠标离开指定元素时触发一次")})*/

//mouseenter和mouseleave 进入移出指定对象才触发事件，对于子元素无效。

/*EventUtil.addHandler(parent,"mouseenter",function(event){console.log("mouseenter鼠标进入指定元素时触发一次")})

EventUtil.addHandler(parent,"mouseleave",function(event){console.log("mouseleave鼠标离开指定元素时触发一次")})*/

//文本域不支持的事件包括:onBlur onFocus onChange

//onsearch是用户向搜索域输入文本时触发 ( <input="search">)，除特定的搜索文本域在其他文本域里无效，即其他文本域不包含onsearch事件。

//onchange 事件会在文本域的内容改变时发生。onchange 事件也可用于单选框与复选框改变后触发的事件。

//onSelect是用户选取文本时触发，用于 ( <input> 和 <textarea>)。

//oninput事件在用户输入时触发。

//-----shiftKey：检测 SHIFT 键是否被按住-----

/*var parent=document.getElementById("parent");

//按住对应键盘的键+鼠标左键，就会输出按住的键名

EventUtil.addHandler(parent,"click",function(event){

var keys=new Array();//构造函数创建数组

//console.log(event.shiftKey);//返回boolean true：按了shift false:没有按shift

//console.log(typeof event.shiftKey);//返回boolean类型

if (event.shiftKey) {

keys.push("shift");

}else if(event.ctrlKey){//shiftKey：检测 SHIFT 键是否被按住。

keys.push("ctrl");

}else if(event.altKey){//altKey：检测 SHIFT 键是否被按住。

keys.push("alt");

}else if(event.metaKey){//meta是window键

keys.push("meta");

}

console.log("keys:"+keys.join(","));

})*/

/*自己把上面的Array()修改了一下

//var keys=new Array();//构造函数创建数组改成一个变量也行

var parent=document.getElementById("parent");

//按住对应键盘的键+鼠标左键，就会输出按住的键名 [description]

EventUtil.addHandler(parent,"click",function(event){

var keys;//构造函数创建数组

if (event.shiftKey) {

keys="shift";

}else if(event.ctrlKey){

keys="ctrl";

}else if(event.altKey){

keys="alt";

}else if(event.metaKey){//meta是window键

keys="meta";

}

console.log("keys:"+keys);

})*/

/*var text=document.getElementById("text");

//键盘事件，在键盘中按下任意键时触发，返回对应的键码event.keyCode

EventUtil.addHandler(text,"keydown",function(event){

console.log(event.keyCode);

})*/

//键盘事件，在键盘中按下任意键松开时触发，返回对应的键码event.keyCode

/*EventUtil.addHandler(text,"keyup",function(event){

console.log(event.keyCode);

})*/

/*//键盘事件，在键盘中按下任意键时触发，返回对应的键码event.keyCode

//和下面的事件类型keypress的event.charCode相比较，比较明显差异。

EventUtil.addHandler(text,"keydown",function(event){

console.log(event.keyCode);

})

//ASCII码，字符键触发事件。不是任意键，有一些非字符键是不存在ASCII码的。

//在keypress事件中很大程度上：event.keyCode=event.charCode。

//keyCode是键码，不同浏览器显示可能不同，所以兼容性比较差

//charCode字符码，兼容较新浏览器，所以需要写一个兼容型方法：见上面的EventUtil变量

//事件类型：keypress的event.charCode 和事件类型keydown的event.keyCode相比较才会看出来差异

EventUtil.addHandler(text,"keypress",function(event){

console.log(event.keyCode);

console.log("event.charCode:"+event.charCode);

})*/

//====以下是MutationEvent对象的事件====

//---textInput，文本框输入内容时触发事件----

/*var text=document.getElementById("text");

//textInput事件,event.data动态获取text对象的value值

EventUtil.addHandler(text,"textInput",function(event){

console.log(event.data);//动态获取文本框输入的内容，类似于text.value

})*/

//---DOMNodeRemoved，删除节点出发事件----

/*var myList=document.getElementById("myList");

//DOMNodeRemoved事件是：MutationEvent事件类型

//表示在文档结构document中只要有节点被删除，那么就会触发事件。

//把document改成myList,那么就仅仅是在muList中发生节点被删除，才会触发事件

EventUtil.addHandler(document,"DOMNodeRemoved",function(event){

//返回MutationEvent对象

console.log(typeof event);

})

myList.removeChild(myList.firstElementChild);*/

//---DOMNodeInserted，添加节点出发事件----

/*var myList=document.getElementById("myList");

var li=document.createElement("li");//创建li对象

var txt=document.createTextNode("woaini");//创建文本节点对象

li.appendChild(txt);//把文本节点对象添加到li对象中

//把document改成myList，表示在myList中添加节点时触发事件

EventUtil.addHandler(document,"DOMNodeInserted",function(event){

console.log(event);

})

//注意fn(event)函数是最后执行的，先执行该行，再支持fn(event)里面代码

myList.appendChild(li);//把li添加到myList中，添加操作一定要写在事件后面，否则不会触发。*/

//---DOMSubtreeModified，节点发生任何变化触发事件----

//指定对象文档结构内发生任何节点变化，都会触发该事件

//把document改为myList,表示在myList对象内有任何节点变化触发事件，event返回Object

/*var myList=document.getElementById("myList");

EventUtil.addHandler(myList,"DOMSubtreeModified",function(event){

console.log(event);//返回MutationEvent对象

})

myList.removeChild(myList.firstElementChild);*/

//---DOMNodeRemovedFromDocument，指定节点删除之前触发事件----

/*var myList=document.getElementById("myList");

//表示myList被删除之前触发事件

EventUtil.addHandler(myList,"DOMNodeRemovedFromDocument",function(event){

console.log(event);//返回Mutation对象

});

document.body.removeChild(myList);*/

//---DOMNodeInsertedIntoDocument，指定节点被添加之前触发事件----

/*var myList=document.getElementById("myList");

var li=document.createElement("li");//创建li对象

var txt=document.createTextNode("woaini");//创建文本节点对象

li.appendChild(txt);//把文本节点对象添加到li对象中

EventUtil.addHandler(li,"DOMNodeInsertedIntoDocument",function(event){

console.log(event);//返回MutationEvent类型

})

myList.appendChild(li);//必须放在EventUtil后面，否则无法执行*/

//----以下是HTML5新增的几个事件------

//DOMContentLoaded DOM树加载完成时触发(不会加载图片，js,css文件和其他资源)

//load事件必须是所有文件都加载完成时才触发

//DOMContentLoaded 加载速度比 load 要快速很多

/*EventUtil.addHandler(document,"DOMContentLoaded",function(event){

console.log(event);//返回Event对象

})*/

//---readystatechange---

//支持IE,firefox,opera,提供文档或者元素加载过程，但是很难预料，

//与load时间一起使用：

//1，document.readyState == uninitialized 尚未初始化

//2，loading 对象正在加载数据

//3，interactive 可以操作对象，但还没有完全加载

//4，对象已经加载完毕

/*EventUtil.addHandler(document,"readystatechange",function(event){

//总之不好搞，兼容性差，因为是HTML5新事件所以要了解如何兼容

})*/

//---hashchange事件---

//该事件只用于window对象，指在地址栏 + # + 内容 + 回车，内容发生变化时触发事件

//在网页地址栏 + # + 任何字符--回车。即：触发事件

//用于获取地址栏的状态，处理某些逻辑时很有用。

/*EventUtil.addHandler(window,"hashchange",function(event){

console.log("event.oldURL:"+event.oldURL);

console.log("event.newURL:"+event.newURL);

})*/

//====移动端键盘事件===

var img=document.getElementById("img");

//touchstart 移动端手指按下时触发事件

EventUtil.addHandler(img,"touchstart",function(event){

console.log(event);//返回TouchEvent

//表示：当前触摸屏幕的触摸点数组(即：几根手指按在屏幕上)

console.log(event.touches);//返回TouchList

//表示：数组中只包含引起事件的触摸点信息,前提移动的触摸点要触发事件。

//(假如屏幕上有4个触摸点，两个按着不动，两个移动，这里的数组存储的就是两个移动触摸点的信息)

console.log(event.changeTouches);//

//只包含放在事件对象img上面的触摸点信息，

//假如屏幕上有4个触摸点，两个在img上面，两个不在img上面，这里返回的是两个在img上面的触摸点的信息

console.log(event.targetTouches);//返回TouchList

})

/*//touchend 移动端手指按下，松开后触发事件

EventUtil.addHandler(img,"touchend",function(event){

console.log(event);//返回TouchEvent

})

//touchmove 移动端手指按在屏幕上移动时触发事件、重复触发，注意性能损耗

EventUtil.addHandler(img,"touchmove",function(event){

console.log(event);//返回TouchEvent

})*/

</script>

</body>

</html>

事件绑定，移除，事件冒泡/捕获/委托<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin: 0;} #container,#container>#parent,#container>#parent>#sp{ border: 1px solid red; } #container>#parent{margin: 100px;background: #0f0;} #container>#parent>#sp{margin: 200px;background: #ccc;}
</style></head><body> <button id="btn">点击我</button>  <div id="container">祖父 <div id="parent">父亲<div id="sp">孙子</div></div> </div> <script> /** * 1，事件对象 button * 2，事件对象绑定一个事件类型 * 3，事件句柄(类似函数体，即事件执行的过程) */ /*IE使用： target.attachEvent(type,listener); //绑定函数 listener /'lɪs(ə)nə/ 监听器听众 target.detachEvent(type,listener) ;//移除绑定 DOM使用： target.addEventListener(type, fnHandler, bCapture); //绑定函数 Capture /'kæptʃə/ 捕获 target.removeEventListener(type, fnHandler, bCapture); //移除绑定*/ /** * 三种事件绑定方式： * 1，直接在HTML标签中写JS代码缺点： * a,强耦合，强制把JS代码和HTML代码合并在一起。不利于代码复用。 * b,内容与行为没有分离。 * 2，DOM0级事件，事件对象的属性(事件类型)添加绑定事件。 * a,优点：松耦合，即：html代码和js代码分离(内容与行为分离) * b,缺点：有且只能绑定一个事件类型。(后面绑定的事件会覆盖之前的事件对象) * 3，DOM2级事件，通过addEventListener("事件类型",function(){})绑定事件 * a,优点：松耦合，即：内容与行为分离。 * b,优点：可以绑定多个事件 * c,优点：事件捕获和事件冒泡 */   //----在HTML标签中直接绑定JS代码执行---- //另外两种绑定方式： //<button id="btnClick" onclick="alert('love');">btnClick</button> //<body onload="init()">...</body> /*<button id="btnClick" onclick="clickYou();">clickYou</button> function clickYou(){ alert("clickYou"); } 缺点：违反了“内容与行为相分离”的原则，应尽量可能少用。 */   //----btn.addEventListener("事件类型",function(){})----//----称做DOM0级事件---- /*var btn=document.getElementById("btn"); btn.onclick=function(){ alert("称做DOM0级事件"); }*/
/*var btn=document.getElementById("btn"); var btnOnclick=function(){ alert("称做DOM0级事件"); } btn.onclick=btnOnclick;*/
/*var btn=document.getElementById("btn"); function btnOnclick_1(){ alert("称做DOM0——1级事件"); } function btnOnclick_2(){ alert("称做DOM0——2级事件"); } btn.onclick=btnOnclick_1; //DOM0级事件有且只能绑定一个事件，如果绑定多个事件，最后一个事件会覆盖之前所有事件。 btn.onclick=btnOnclick_2;*/ //btn.onclick=btnOnclick_2();函数名称后面直接跟上()，则页面运行立马执行函数。   //----btn.addEventListener("事件类型",function(){})----//----称做DOM2级事件----     //因为网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件，而不仅仅是表单元素。比方说，在用户点击某按钮时产生一个 onClick 事件来触发某个函数。值得注意的是：事件通常与函数配合使用，当事件发生时函数才会执行。         //方法一： /*var btn=document.getElementById('btn'); btn.addEventListener("click", function(){//点击包括：鼠标按下--抬起，整个动作完成才执行。 alert("称做DOM2级事件"); }) btn.addEventListener("mouseup",function(){//抬起时触发事件在先 alert("DOM2级事件可以绑定多个事件，这是第二个事件"); })*/
//方法二： //使用匿名函数进行声明时，匿名函数一定要写在调用之前。 /*var btn=document.getElementById('btn'); var clickme=function(){ alert("称做DOM2级事件"); } btn.addEventListener("click", clickme);*/     //方法三： //DOM2级事件：支持IE9以及IE9以上的浏览器 //（1）绑定事件：addEventListener(event,fn,false/true); //（2）解绑事件：removeEventListener(event,fn,false/true); //如果是自定义函数，则不论事件监听放在哪里都是可以调用的。 //btn.addEventListener("事件类型",function(){},boolean); //事件类型：click等 //function(){} 事件句柄 //boolean true:进行事件冒泡或事件捕获 false:不进行事件冒泡和事件捕获 /*var btn=document.getElementById('btn'); btn.addEventListener('click',clickme); function clickme(){//自定义函数 alert('称做DOM2级事件'); }*/     /*JavaScript 中，定义函数时用 var foo = function () {} 和 function foo() 有什么区别 1，var FUNCTION_NAME = function() { FUNCTION_BODY }; 编译后变量声明FUNCTION_NAME 会“被提前”了，但是他的赋值（也就是FUNCTION_BODY）并不会被提前。所以，声明必须放在调用之后。 2，function FUNCTION_NAME () { FUNCTION_BODY };   自定义函数声明和赋值在一起，所以一起前置。也就是说函数声明过程在整个程序执行之前的预处理就完成了，所以只要处于同一个作用域，就可以访问到，即使在定义之前调用它也可以。 */    //onmousedown：某个鼠标按键被按下时触发事件 //onkeypress：某个键盘的键被按下或按住时触发事件 //onchange：用户改变域的内容改变时触发事件 //onfocus: 获得焦点后产生的事件 //onblur：元素失去焦点触发事件
//-------removeEventListener()--------- //-------接触指定事件的绑定--------- /*var fn=function(){ alert("称做DOM2级事件"); } var btn=document.getElementById('btn'); btn.addEventListener("click",fn,false); //接触事件绑定：必须三个参数一模一样，且事件句柄函数不能使用匿名函数，默认值false表示不进行事件捕获和事件冒泡 btn.removeEventListener("click",fn,false);*/

//-------attachEvent()--------- //-------IE10以及IE10以下浏览器支持。 IE9,IE10同时支持attachEvent和addListener--------- //btn.attachEvent("onclick",function(){}) 注意点： //1，只要两个参数 //2，这里的事件类型，前面必须加on,如：onclick,onmouseover等，而addEventListener却不要加on。 //3，属于DOM2级事件，可以绑定多个事件 //4，btn.detachEvent("onclick",function(){}) 移除btn事件句柄，并不是移除该事件。 //且想要成功移除，里面的两个函数必须一模一样。 /*var btn=document.getElementById("btn"); var fn1=function(){ alert("属于DOM2级事件，可以绑定多个事件。1") } btn.attachEvent("onclick",fn1); var fn2=function(){ alert("属于DOM2级事件，可以绑定多个事件。2") } btn.attachEvent("onclick",fn2);*/ //-----detachEvent()----- /*var btn=document.getElementById("btn"); var fn2=function(){ alert("属于DOM2级事件，可以绑定多个事件。2"); } btn.attachEvent("onclick",fn2);//绑定onclick事件 btn.detachEvent("onclick",fn2);//移除指定对象的指定事件*/
//此外，在IE10及IE10以下任何函数内的this都表示window。如下： //attachEvent("事件类型",function(){})事件绑定 /*var btn=document.getElementById("btn"); btn.attachEvent("onclick",function(){ alert(this===window);//返回true。 }) //自定义函数 function fn1(){ alert(this===window); } fn1();*/
//以下代码可以兼容所有浏览器的添加事件和删除事件。 /*var aa={ //添加事件 addEventListener() attachEvent() //chrome firefox等主流浏览器 //IE8及以下浏览器 addEvent:function(element,type,fnHandler){ if (element.addEventListener) { element.addEventListener(type,fnHandler,false); }else{ element.attachEvent("on"+type,fnHandler); } },//这里的逗号千万别忘记了！！！
//删除事件 removeEventListener() detachEvent() //chrome firefox等主流浏览器 //IE8以及以下浏览器 removeEvent:function(element,type,fnHandler){ if (element.removeEventListener) { element.removeEventListener(type,fnHandler,false); }else{ element.detachEvent("on"+type,fnHandler); } } } var btn=document.getElementById("btn"); var fnHandler=function(){//在使用移除事件时千万不能使用匿名函数进行定义fnHandler，否则是无法移除的。 alert("Love you!"); } aa.addEvent(btn,"click",fnHandler); aa.removeEvent(btn,"click",fnHandler);*/
//千万别使用下面方式删除事件句柄。 //使用匿名函数可以添加事件，但是匿名函数是无法删除事件句柄的。 /*aa.addEvent(btn,"click",function(){alert("不能使用匿名函数作为事件句柄")}); aa.removeEvent(btn,"click",function(){alert("不能使用匿名函数作为事件句柄")});*/
/*IE和DOM事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件，冒泡型事件模型： button->div->body (IE事件流)   捕获型事件模型： body->div->button (Netscape事件流)   DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)，在IE8及以下的事件处理中，事件含有on，如onclick等。*/
//-----事件冒泡，第三个参数为false------- var container=document.getElementById("container"); var parent=document.getElementById("parent"); var sp=document.getElementById("sp"); //点击sp时，事件触发顺序：sp > parent > container //点击parent时，事件触发顺序：parent > container //点击container时，事件触发顺序：container container.addEventListener("click",function(){alert("这是祖父的"+this.id)},false); parent.addEventListener("mouseup",function(){alert("这是父亲的"+this.id)},false); sp.addEventListener("mouseup",function(){alert("这是孙子的"+this.id)},false); //事件冒泡：sp < parent < container。每个子元素一直向上级每个父元素触发事件冒泡 //如果每一个都有绑定事件，那么点击孙子sp触发点击事件， //会从孙子sp--parent--container---->>一直往上冒泡触发事件，直到html根元素。 //只要期间有任何一个父级元素有绑定事件，那么都会触发事件。 //如果sp和container有绑定事件，而parent没有绑定事件，点击sp的时候，container事件也会触发。 //其中同一个事件类型才可以触发冒泡,此外注意：鼠标事件按下有一系列动作，所以也可以看做是同一事件类型。
//-----事件捕获，第三个参数为true------- //事件捕获和事件冒泡完全相反 /*var container=document.getElementById("container"); var parent=document.getElementById("parent"); var sp=document.getElementById("sp"); //点击sp时，事件捕获执行顺序：container > parent > sp //点击parent时，事件捕获执行顺序：container > parent //点击container时，事件捕获执行顺序：container container.addEventListener("click",function(){alert("这是祖父的"+this.id)},true); parent.addEventListener("click",function(){alert("这是父亲的"+this.id)},true); sp.addEventListener("click",function(){alert("这是孙子的"+this.id)},true);*/ //click 整个过程：鼠标按下去完全松开才触发事件 //mouseup 整个过程：松开一瞬间就触发事件 //mousedown 整个过程：按下去就触发事件 //所以 click > mouseup click > mousedown </script></body></html>--------事件委托(事件冒泡原理)只支持IE9及以上浏览器--------事件冒泡/事件捕获/事件委托以下是根据事件冒泡原理进行的事件委托事件委托：说白了就是在 fnHandler中添加一个event对象使用event.target.id 取值使用event.target.innerHTML 取值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件委托(事件冒泡)</title></head><body> <div> <ul id="wrap"> <li id="one">11</li> <li id="two">22</li> <li id="three">33</li> <li id="four">44</li> <li id="five">55</li> </ul> </div> <script> var wrap=document.getElementById('wrap'); wrap.addEventListener("click",function(event){ /*alert(event.target.innerHTML);//返回的是点击对象的innerHTML alert(event.target.id);//返回的是点击对象的id*/ switch(event.target.id) { case "one": alert("我爱你第一次！"); break; case "two": alert("我爱你第二次！"); break; case "three": alert("我爱你第三次！"); break; case "four": alert("我爱你第四次！"); break; default: alert("我爱你第五次！"); break; } },false); </script></body></html>

posted @ 2019-05-24 23:23 最好的安排阅读(689) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

最好的安排

DOM事件

公告

Knowledge is infinite