WebAPI编程DOM学习
1.事件高级
1.1 给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
方法监听注册方式
· w3c标准 推荐方式
· addEventListener()它是一个方法
· IE9之前的IE不支持此方法，可使用attachEvent()代替（非标准 不建议使用）
· 特点：同一个元素同一个事件可以注册多个监听器
//1.里面的事件类型是字符串 必定加引号 而且不带on //2.同一个元素 同一个事件可以添加多个侦听器（事件处理程序） btn.addEventListener('click',function(){ alert('HELLO!') })
2.删除事件
divs[0].onclick = function(){ alert(11); //1.传统方式删除事件 divs[0].onclick = null; } //2.removeEventListener 删除事件 //里面的fn不需要调用加小括号 divs[1].addEventListener('click',fn); function fn(){ alert(22); divs[1].removeEventListener('click',fn); }
3.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
注意
① JS代码中只能执行捕获或者冒泡其中的一个阶段
②onclick和attachEvent 智能得到冒泡阶段
③addEventListener（type,listener[,useCapture]）第三个参数如果是true，表示事件
捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段
调用事件处理程序。
捕获阶段
<script type="text/javascript">
//dom 事件流 三个阶段
//1.JS代码中只能执行捕获或者冒泡其中的一个阶段。
//2.onclick和attachEvent（ie）只能得到冒泡阶段。
//3.捕获阶段 如果addEventListener第三个参数是true那么则处于捕获阶段 document->html->body->father->son
var son = document.querySelector('.son');
son.addEventListener('click',function(){
alert('son');
},true);
var father = document.querySelector('.father');
father.addEventListener('click',function(){
alert('father');
},true);
</script>
冒泡阶段
<script type="text/javascript">
//dom 事件流 三个阶段
//1.JS代码中只能执行捕获或者冒泡其中的一个阶段。
//2.onclick和attachEvent（ie）只能得到冒泡阶段。
//4.冒泡阶段 如果addEventListener 第三个参数是false或者省略 则处于冒泡阶段 son->father->body->html->document
var son = document.querySelector('.son');
son.addEventListener('click',function(){
alert('son');
},false);
var father = document.querySelector('.father');
father.addEventListener('click',function(){
alert('father');
},false);
</script>
事件对象
<script type="text/javascript">
var div = document.querySelector('div');
//ie678用传统方法
div.onclick = function(e){
console.log(window.event);
}
//不考虑兼容用以下
div.addEventListener('click',function(e){
console.log(e);
})
//1.event 就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看
//2.事件对象只有有了事件才会存在，它是系统自动创建的，不需要我们传递参数
//3.事件对象是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等，如果是键盘事件里面就包含键盘事件的信息，比如 判断用户按下了哪个键
//4.这个事件对象可以自己命名 比如event、evt、e
//5.事件对象也有兼容性问题 ie678 通过window.event
</script>
常见事件对象属性和方法
<script type="text/javascript">
//常见事件对象的属性和方法
//1.e.target 返回的是触发事件的对象（元素）this返回的是绑定事件的对象（元素）
//区别：e.target 点击了哪个元素 就返回哪个元素。this哪个元素绑定了这个点击事件，就返回谁
var div = document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
//给ul绑定了事件 this就指向ul
console.log(this);
//e.target 指向我们点击的那个对象 谁触发了这个事件。点击的是li，e.target指向的就是li
console.log(e.target);
})
</script>
阻止默认行为
<script type="text/javascript">
//阻止默认行为（事件）让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault();//dom 标准写法
});
//传统方式
a.onclick = function(e){
//普通浏览器 e.preventDefault()方法
e.preventDefault();
//ie678 低版本浏览器 returnValue 属性
e.returnValue;
//我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点：return后面的代码不执行了 而且只限于传统的注册方式
return false;
}
</script>
5.阻止事件冒泡
5.1 阻止事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。
阻止事件冒泡
· 标准写法：利用事件对象里面的stopPropagation()方法
e.stopPropagation();
· 非标准写法：IE6-8利用事件对象cancelBubble属性.
if(e&&e.stopPropagation()){ e.stopPropagation(); }else{ window.event.cancelBubble = true; }
6. 事件委托（代理、委派）
事件委托的原理
不要每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡
原理影响设置每个子节点。
<ul> <li>知否知否应是绿肥红瘦</li> <li>知否知否应是绿肥红瘦</li> <li>知否知否应是绿肥红瘦</li> <li>知否知否应是绿肥红瘦</li> <li>知否知否应是绿肥红瘦</li> </ul> <script type="text/javascript"> //事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click',function(e){ for(var i = 0; i<ul.children.length;i++){ ul.children[i].style.backgroundColor = ''; } e.target.style.backgroundColor = 'pink'; }) </script>
7.常用的鼠标事件
7.1禁止鼠标右键菜单
contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
7.2禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
7.3鼠标事件对象
跟随鼠标移动的小天使 案例
<body> <img src="img/angel.jpg"/> <script type="text/javascript"> var img = document.querySelector('img'); document.addEventListener('mousemove',function(e){ var x = e.pageX; var y = e.pageY; img.style.top = y-50+'px'; img.style.left = x - 40 + 'px'; }) </script> </body>
8.常用键盘事件
keyup 和 keydown事件不区分字母大小写 a 和A 得到的都是65
keypress事件区分字母大小写 a 97和A得到的是65
document.addEventListener('keyup',function(e){
console.log('up:'+e.keyCode);
})
document.addEventListener('keypress',function(e){
console.log('press:'+e.keyCode);
})
模拟京东按键S输入内容
var search = document.querySelector('input'); document.addEventListener('keyup',function(e){ if(e.keyCode == 83){ search.focus(); } })
京东快递单号查询
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .search{ position: relative; margin: 200px; } .con{ position: absolute; display: none; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0,0,0,.3); width: 200px; height: 35px; line-height: 35px; top: -45px; left: 0; } .con::before{ content: ''; position: absolute; top: 35px; left: 20px; width: 0; height: 0; border-top: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; } </style> </head> <body> <div class="search"> <div class="con"> 123 </div> <input type="text" placeholder="请输入您的快递单号" class="jd"/> </div> <script type="text/javascript"> var con = document.querySelector('.con'); var jd = document.querySelector('.jd'); jd.addEventListener('keyup',function(e){ if(this.value==''){ con.style.display='none'; }else{ con.style.display ='block'; con.innerHTML = this.value; } }) </script> </body>
浙公网安备 33010602011771号