一、dom2级事件设置
1、var dv=document.getElementsByTagName('div')[0];
dv.addEventListener('click',function(){//dv.addEventListener('click',处理 有名/匿名函数);
dv.style.backroundColor='pink';
//this代表div的元素节点对象
this.style.width='400px';
});
2、为同一个div对象设置多个mouseover事件
var dv = document.getElementsByTagName('div')[0];
//dv.addEventListener('click',处理 有名/匿名函数);
dv.addEventListener('click',function(){
//this 代表div的元素节点对象
dv.style.backgroundColor="pink";
this.style.width="400px";
});
function f1(){ //this代表事件的主体节点对象
this.style.height = "300px";
console.log(111111);
}
function f2(){
console.log(222222);
}
function f3(){
console.log(333333);
}
dv.addEventListener('mouseover',f1);
dv.addEventListener('mouseover',f2);
dv.addEventListener('mouseover',f3);
3、dom 2级事件取消
function cancel(){
dv.removeEventLisrener('mouseover',f2);
}
4、事件流
1 <h2>事件流</h2> 2 <div> 3 <p> 4 <span> 5 i am span tag 6 </span> 7 </p> 8 </div>
1 var dv=document.getElementsByTagName('div)[0]; 2 var pp=document.getElementsByTagName('p')[0]; 3 var sp=document.getElementsByTagName('span')[0]; 4 //addEventListener(类型,处理,true捕捉/false冒泡); 5 sp.addEventListerner('click',function(evt){ 6 console.log('span tag'); 7 evt.stopPropagation();//阻止事件流产生 8 },false); 9 pp.addEventListener("click",function(evt){ 10 console.log('p tag'); 11 evt.stopPropagation();//阻止事件流产生 12 },false); 13 dv.addEventListener("click",function(evt){ 14 console.log('div tag'); 15 evt.stopPropagation();//阻止事件流产生 16 },false);
5、获得事件对象
//形参evt 代表事件对象
function clk(evt){
//alert(evt);//object MouseEvent
//alert(window.event);//IE浏览器的事件对象 Object MSEventObj
var evnt = evt ? evt : window.event;//兼容事件对象获取
this.style.backgroundColor = "green";
}
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',clk);
6、获得鼠标坐标
//形参evt 代表事件对象
function clk(evt){
var evnt = evt ? evt : window.event;
console.log(evnt.clientX+"--"+evnt.clientY); //鼠标相对dom的坐标
console.log(evnt.pageX+"--"+evnt.pageY); //鼠标相对dom的坐标,给考虑滚动条
console.log(evnt.screenX+"--"+evnt.screenY); //鼠标相对整个屏幕的坐标,
}
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',clk);
7、BOM-location对象使用
1 <h2>location对象</h2> 2 <input type="button" value="获取地址" onclick="f1()" /> 3 <input type="button" value="设置地址" onclick="f2()" />
1 function f1(){ 2 console.log(window.location.href);//file:///E:/web/0105/24-BOM-location%E5%AF%B9%E8%B1%A1%E4%BD%BF%E7%94%A8.html 3 } 4 function f2(){ 5 alert('操作成功!'); 6 //window.location.href = "24.php"; 7 window.location.href = window.location.href; //刷新页面 8 }