<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: #0000FF;
}
.box3 {
width: 100px;
height: 100px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<!-- <div style="width: 100px; height: 100px; background-color: red; margin-left: 100px; margin-top: 100px;" id="div"></div> -->
<!-- <ul>
<li >a</li>
<li >a</li>
<li >a</li>
<li >a</li>
</ul> -->
<!-- <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
<!-- 事件冒泡 -->
<a href="#">111</a>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script type="text/javascript">
// 三种触发点击事件
// div.onclick
// div.addEventListener()//普遍用这个
// div.attachEvent() //支持id9以上浏览器，其他不支持，指向window
//click和onclick方法区别
//click比onclick先执行
// div.addEventListener('onclick',function(){
// console.log('b');
// })
// div.addEventListener('click',function(){
// console.log('a');
// },false)
// var div = document.getElementsByTagName('div')[0];
//三种触发事件方式
//一.只能触发一个事件
// div.onclick = function() {
// console.log('a');
// };
//二.可以触发多个事件
// div.addEventListener('click',function(){
// console.log('b')
// },false)
// div.addEventListener('click',function(){
// console.log('c')
// },false)
//三.IE9独用 可以触发多个事件 attachEvent --- 指向window ，需要使用call进行指向
// div.attachEvent('onclick',function() {
// console.log('d');
// });
// 练习题：点击li显示对应的序号
// var li = document.getElementsByTagName('li');
// var len = li.length;
// for(var i = 0 ; i < len ; i++) {
// (function (i) {
// li[i].addEventListener( 'click',function() {
// console.log(i)
// },false);
// }(i))
// };
//封装兼容性的addEvent(elem,type,handle)方法
// function addEvent(elem,type,handle) {
// if(elem.addEventListener){
// elem.addEventListener(type,handle,false);
// }else if(elem.attachEvent) {
// elem.attachEvent('on' + type , function() {
// handle.call(elem);
// })
// }else {
// elem['on' + type] = handle;
// }
// }
// const dom = document.getElementById('div')
// addEvent(dom,'click',fun);
// function fun() {
// console.log('0000')
// }
//解除绑定事件
//1.第一种方法
// var div = document.getElementsByTagName('div')[0];
// div.onclick = function() {
// console.log('a')
// this.onclick = null;//执行一次不在执行
// }
//2.第二种方法 removeEventListener
// var div = document.getElementsByTagName('div')[0];
// div.addEventListener('click',test,false);
// function test() {
// console.log('www');
// }
//div.removeEventListener('click',test,false);
//3.第三种方法 ele.detachEvent('on' + type ,fn);
//触发顺序：先捕获，后冒泡
//事件冒泡和事件捕获的区别：1.执行顺序的不同，2.事件捕获使用true
//事件冒泡:结构上嵌套关系的元素(非视觉上的)，会存在事件冒泡功能(打印顺序为：自子元素向父元素冒泡)
// var box1 = document.getElementsByClassName('box1')[0];
// var box2 = document.getElementsByClassName('box2')[0];
// var box3 = document.getElementsByClassName('box3')[0];
// box1.addEventListener('click',function(){
// console.log('a');
// },false);
// box2.addEventListener('click',function(){
// console.log('b');
// },false);
// box3.addEventListener('click',function(){
// console.log('c');
// },false);
//事件捕获：结构上嵌套关系的元素（非视觉上），会存在事件捕获，（打印顺序为：字父元素向子元素进行捕获） IE没有捕获事件
// var box1 = document.getElementsByClassName('box1')[0];
// var box2 = document.getElementsByClassName('box2')[0];
// var box3 = document.getElementsByClassName('box3')[0];
// box1.addEventListener('click',function(){
// console.log('a');
// },true);
// box2.addEventListener('click',function(){
// console.log('b');
// },true);
// box3.addEventListener('click',function(){
// console.log('c');
// },true);
//不能冒泡的事件
// focus,blur,change,submit,reset,Select
//取消冒泡 W3C event.stopPropagation(不支持ie9一下) cancelBubble = true true 取消冒泡 false 进行冒泡（IE独有）
// document.onclick = function() {
// console.log('111');
// }
// var div = document.getElementsByTagName('div')[0];
// div.onclick = function(e) {
// //e.stopPropagation();
// //e.cancelBubble =true;
// stopBubble(e);//调用封装的函数
// this.style.background = 'green';
// }
// //封装方法 取消冒泡的方法
// function stopBubble(event) {
// if(event.stopPropagation) {
// event.stopPropagation();
// }else{
// event.cancelBubble = true;
// }
// }
//oncontextmenu 弹出主菜单栏
//避免出现菜单栏（阻止默认事件） 1.return false （以对象熟悉的方法注册的事件才生效） e.preventDefault （W3C标准 ，ie9以下不兼容） e.returnValue = false （只兼容ie9）
// document.oncontextmenu = function(e) {
// console.log('a');
// //e.preventDefault();
// //return false;
// //e.returnValue = false;
// preventDefault(e);
// }
// var a = document.getElementsByTagName('a')[0];
// //点击a标签时，会置顶展示，为了解决默认事件，使用该方法
// a.onclick = function() {
// return false;
// }
// //封装方法 组织默认事件（菜单栏）
// function preventDefault(event) {
// if(event.preventDefault) {
// event.preventDefault();
// }else if(event.returnValue) {
// event.returnValue = true;
// }else{
// return false;
// }
// }
//event 可以打印出参数 而ie9下打印e的参数需要使用 window.event
// var div = document.getElementsByTagName('div')[0];
// div.onclick = function(e) {
// var event = e || window.event;
// }
//事件委托 利用事件冒泡，和事件源对象进行处理
//优点：性能：不需要在循环一个一个绑定事件 ，灵活：当有新的子元素不需要重新绑定
//event.target 火狐只有这个 event.srcElement ie只有这个 这两个chrome都有
// var ul = document.getElementsByTagName('ul')[0];
// ul.onclick = function(e) {
// var event = e || window.event;
// var target = event.target || event.srcElement;
// console.log(target.innerText);
// }
//onmouseenter onmouseleave onmousemove 预习
//拖拽功能
</script>
</body>
</html>
浙公网安备 33010602011771号